Add trading platform storyboards for equities and forex
- Created detailed storyboards demonstrating complete workflow - Equities storyboard: AAPL example with 3 action plans (aggressive/conservative/wait) - Forex storyboard: EUR/USD example with pre-NFP strategy - Both include probability analysis, risk/reward calculations, and Moomoo API integration - Interactive mock interfaces showing platform workflow from data sourcing to execution
This commit is contained in:
731
prototype/storyboards/equities-storyboard.html
Normal file
731
prototype/storyboards/equities-storyboard.html
Normal file
@@ -0,0 +1,731 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Equities Trading Storyboard - Quantitative Trading Platform</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap 5 CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<!-- Bootstrap Icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.storyboard-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyboard-step {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 2px solid var(--accent-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--accent-blue);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mock-screen {
|
||||||
|
background: var(--secondary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mock-screen::before {
|
||||||
|
content: 'Mock Screen';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 20px;
|
||||||
|
background: var(--primary-dark);
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.probability-badge {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-probability { background: rgba(76, 175, 80, 0.2); border: 1px solid var(--accent-green); color: var(--accent-green); }
|
||||||
|
.medium-probability { background: rgba(255, 152, 0, 0.2); border: 1px solid var(--accent-orange); color: var(--accent-orange); }
|
||||||
|
.low-probability { background: rgba(244, 67, 54, 0.2); border: 1px solid var(--accent-red); color: var(--accent-red); }
|
||||||
|
|
||||||
|
.action-card {
|
||||||
|
background: var(--tertiary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow {
|
||||||
|
text-align: center;
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow i {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-logo {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--accent-blue);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-dark text-light">
|
||||||
|
<div class="storyboard-container">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h1 class="display-4 mb-3">
|
||||||
|
<i class="bi bi-graph-up-arrow text-accent-blue"></i>
|
||||||
|
Equities Trading Storyboard
|
||||||
|
</h1>
|
||||||
|
<p class="lead text-muted">
|
||||||
|
How the Quantitative Trading Platform sources data, analyzes equities, and provides actionable recommendations
|
||||||
|
</p>
|
||||||
|
<div class="d-flex justify-content-center gap-3 mt-4">
|
||||||
|
<a href="forex-storyboard.html" class="btn btn-outline-light">
|
||||||
|
<i class="bi bi-arrow-right"></i> View Forex Storyboard
|
||||||
|
</a>
|
||||||
|
<a href="../index.html" class="btn btn-outline-light">
|
||||||
|
<i class="bi bi-house"></i> Back to Prototype
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Storyboard Steps -->
|
||||||
|
|
||||||
|
<!-- Step 1: Data Sourcing -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3 class="mb-0">Data Sourcing from Moomoo API</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
The platform automatically connects to Moomoo API to fetch real-time and historical data for selected equities.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-database text-accent-blue fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Data Layer - Moomoo API Connector</h5>
|
||||||
|
<span class="badge bg-success ms-3">Connected</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Fetching Data For</small>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
<span class="badge bg-info me-2">AAPL</span>
|
||||||
|
<span class="badge bg-info me-2">MSFT</span>
|
||||||
|
<span class="badge bg-info me-2">GOOGL</span>
|
||||||
|
<span class="badge bg-info">TSLA</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Data Types Collected</small>
|
||||||
|
<ul class="mt-2 mb-0">
|
||||||
|
<li>Real-time price quotes</li>
|
||||||
|
<li>Historical OHLCV (1m, 5m, 1d intervals)</li>
|
||||||
|
<li>Company fundamentals</li>
|
||||||
|
<li>Market depth data</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">API Metrics</small>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Rate Limit Usage</small>
|
||||||
|
<small>42/60 requests</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-info" style="width: 70%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Data Freshness</small>
|
||||||
|
<small>< 100ms latency</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" style="width: 95%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-info mt-3 mb-0">
|
||||||
|
<i class="bi bi-info-circle me-2"></i>
|
||||||
|
<strong>Automated Data Pipeline:</strong> The platform continuously monitors and updates equity data, triggering analysis when significant changes occur.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: Data Processing & Analysis -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3 class="mb-0">Processing & Analysis Engine</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Raw data is processed through multiple analytical models to identify trading opportunities and assess risk.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-cpu text-accent-purple fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Strategy Engine - Analysis Results</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="text-center p-3 border border-secondary-dark rounded">
|
||||||
|
<div class="display-6 text-info">AAPL</div>
|
||||||
|
<small class="text-muted">Apple Inc.</small>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Current Price:</small>
|
||||||
|
<small class="text-light">$182.45</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Daily Change:</small>
|
||||||
|
<small class="text-success">+2.3%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Volume:</small>
|
||||||
|
<small class="text-light">45.2M</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Technical Indicators</small>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>RSI (14):</small>
|
||||||
|
<small class="text-warning">68.5</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>MACD:</small>
|
||||||
|
<small class="text-success">Bullish</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Moving Avg (50):</small>
|
||||||
|
<small class="text-success">Above</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Bollinger Band:</small>
|
||||||
|
<small class="text-info">Upper Band</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Fundamental Analysis</small>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>P/E Ratio:</small>
|
||||||
|
<small class="text-light">28.5</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>EPS Growth:</small>
|
||||||
|
<small class="text-success">+12.4%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Dividend Yield:</small>
|
||||||
|
<small class="text-light">0.6%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Debt/Equity:</small>
|
||||||
|
<small class="text-warning">1.8</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-warning mt-3 mb-0">
|
||||||
|
<i class="bi bi-lightning-charge me-2"></i>
|
||||||
|
<strong>Signal Detected:</strong> AAPL showing strong momentum with bullish technical indicators and positive earnings growth.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3: Recommendation Generation -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3 class="mb-0">Intelligent Recommendations</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Based on comprehensive analysis, the platform generates personalized recommendations with probability assessments.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-star text-accent-orange fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Trading Recommendation: AAPL</h5>
|
||||||
|
<span class="badge bg-warning ms-3">Medium Risk</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success">
|
||||||
|
<i class="bi bi-check-circle me-2"></i>
|
||||||
|
<strong>Recommended Action:</strong> Consider adding AAPL to portfolio for short-to-medium term growth
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6 class="mb-3">Probability Analysis</h6>
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Target: +8% in 30 days</small>
|
||||||
|
<small class="text-success">72% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-success" style="width: 72%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Target: +15% in 90 days</small>
|
||||||
|
<small class="text-warning">58% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-warning" style="width: 58%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Stop Loss: -5%</small>
|
||||||
|
<small class="text-danger">18% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-danger" style="width: 18%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6 class="mb-3">Key Factors</h6>
|
||||||
|
<ul class="mb-0">
|
||||||
|
<li><span class="text-success">✓</span> Strong earnings growth (+12.4% YoY)</li>
|
||||||
|
<li><span class="text-success">✓</span> Bullish technical indicators (RSI: 68.5)</li>
|
||||||
|
<li><span class="text-warning">⚠</span> Elevated P/E ratio (28.5 vs industry 22)</li>
|
||||||
|
<li><span class="text-success">✓</span> Positive market sentiment</li>
|
||||||
|
<li><span class="text-warning">⚠</span> Moderate debt levels</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 4: Course of Action -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<h3 class="mb-0">Course of Action Options</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
The platform presents 3 distinct courses of action, each with detailed risk/reward profiles and execution plans.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Action 1: Aggressive -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge high-probability me-2">85% Confidence</span>
|
||||||
|
Aggressive Entry
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Maximize short-term gains with higher risk tolerance</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-danger">High Risk / High Reward</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Buy 100 shares at market price ($182.45)</li>
|
||||||
|
<li>Set stop loss at $173.33 (-5%)</li>
|
||||||
|
<li>Take profit at $197.05 (+8%)</li>
|
||||||
|
<li>Time horizon: 2-4 weeks</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Expected Outcomes</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Best Case:</small>
|
||||||
|
<small class="text-success">+$1,460 profit</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Worst Case:</small>
|
||||||
|
<small class="text-danger">-$912 loss</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Expected Value:</small>
|
||||||
|
<small class="text-info">+$876</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Risk/Reward Ratio:</small>
|
||||||
|
<small class="text-light">1:1.6</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-calculator"></i> Calculate Position Size
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-sm">
|
||||||
|
<i class="bi bi-check-circle"></i> Execute This Plan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action 2: Conservative -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge medium-probability me-2">70% Confidence</span>
|
||||||
|
Conservative Entry
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Steady growth with capital preservation focus</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-warning">Medium Risk / Medium Reward</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Buy 50 shares using dollar-cost averaging</li>
|
||||||
|
<li>Set stop loss at $173.33 (-5%)</li>
|
||||||
|
<li>Take profit at $197.05 (+8%) in phases</li>
|
||||||
|
<li>Time horizon: 4-8 weeks</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Expected Outcomes</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Best Case:</small>
|
||||||
|
<small class="text-success">+$730 profit</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Worst Case:</small>
|
||||||
|
<small class="text-danger">-$456 loss</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Expected Value:</small>
|
||||||
|
<small class="text-info">+$438</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Risk/Reward Ratio:</small>
|
||||||
|
<small class="text-light">1:1.6</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-calculator"></i> Calculate Position Size
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-sm">
|
||||||
|
<i class="bi bi-check-circle"></i> Execute This Plan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action 3: Wait & Monitor -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge low-probability me-2">40% Confidence</span>
|
||||||
|
Wait & Monitor
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Defer action until stronger confirmation signals</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-secondary">Low Risk / Low Reward</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Add AAPL to watchlist</li>
|
||||||
|
<li>Set price alert at $175 (buy opportunity)</li>
|
||||||
|
<li>Monitor earnings announcement (next 2 weeks)</li>
|
||||||
|
<li>Re-evaluate when RSI drops below 60</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Expected Outcomes</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Opportunity Cost:</small>
|
||||||
|
<small class="text-warning">-$0 to -$1,460</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Capital Preservation:</small>
|
||||||
|
<small class="text-success">100%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Information Gain:</small>
|
||||||
|
<small class="text-info">High</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Next Review:</small>
|
||||||
|
<small class="text-light">7 days</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-bell"></i> Set Alert
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-info btn-sm">
|
||||||
|
<i class="bi bi-clock"></i> Schedule Review
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-info mt-4">
|
||||||
|
<i class="bi bi-shield-check me-2"></i>
|
||||||
|
<strong>Risk Management Integration:</strong> Each action plan automatically integrates with platform risk controls including position sizing, sector limits, and circuit breakers.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 5: User Decision & Execution -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">5</div>
|
||||||
|
<h3 class="mb-0">User Decision & Automated Execution</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
The user selects their preferred course of action, and the platform handles execution with real-time monitoring.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-arrow-left-right text-accent-green fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Trade Execution Interface</h5>
|
||||||
|
<span class="badge bg-success ms-3">Paper Trading Mode</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-success rounded">
|
||||||
|
<h6 class="text-success">
|
||||||
|
<i class="bi bi-check-circle me-2"></i>
|
||||||
|
Selected Action: Conservative Entry
|
||||||
|
</h6>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Action:</small>
|
||||||
|
<small class="text-light">BUY 50 AAPL</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Order Type:</small>
|
||||||
|
<small class="text-light">Limit @ $182.00</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Total Value:</small>
|
||||||
|
<small class="text-light">$9,100.00</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Portfolio Allocation:</small>
|
||||||
|
<small class="text-light">4.5%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid mt-4">
|
||||||
|
<button class="btn btn-success">
|
||||||
|
<i class="bi bi-lightning-charge me-2"></i>
|
||||||
|
Execute Trade via Moomoo API
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-secondary-dark rounded">
|
||||||
|
<h6>Real-time Monitoring</h6>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Order Status:</small>
|
||||||
|
<small class="text-warning">Pending Execution</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Fill Progress:</small>
|
||||||
|
<small class="text-light">0/50 shares</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Current Price:</small>
|
||||||
|
<small class="text-light">$182.45</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Price vs Limit:</small>
|
||||||
|
<small class="text-danger">-$0.45 below</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress mt-4 bg-dark" style="height: 10px;">
|
||||||
|
<div class="progress-bar bg-info" style="width: 0%"></div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">Waiting for price to reach limit order level</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success mt-4">
|
||||||
|
<i class="bi bi-robot me-2"></i>
|
||||||
|
<strong>Automated Post-Trade Management:</strong> Once executed, the platform will automatically monitor the position, adjust stop losses based on volatility, and generate performance reports.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Conclusion -->
|
||||||
|
<div class="text-center mt-5 pt-4 border-top border-secondary-dark">
|
||||||
|
<h4 class="mb-3">Continuous Revenue Generation Cycle</h4>
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
This process repeats for multiple equities, creating a diversified portfolio of algorithmic trades
|
||||||
|
with controlled risk and consistent probability-based returns.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="p-4 border border-accent-blue rounded">
|
||||||
|
<h5 class="text-accent-blue mb-3">
|
||||||
|
<i class="bi bi-graph-up me-2"></i>
|
||||||
|
Expected Monthly Outcomes
|
||||||
|
</h5>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="display-6 text-success">8-12%</div>
|
||||||
|
<small class="text-muted">Target Return</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="display-6 text-warning">3-5%</div>
|
||||||
|
<small class="text-muted">Max Drawdown</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="display-6 text-info">65-75%</div>
|
||||||
|
<small class="text-muted">Win Rate</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<a href="forex-storyboard.html" class="btn btn-primary btn-lg">
|
||||||
|
<i class="bi bi-arrow-right me-2"></i>
|
||||||
|
View Forex Trading Storyboard
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap JS Bundle with Popper -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Simple interaction for the storyboard
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Add click handlers to action buttons
|
||||||
|
document.querySelectorAll('.btn-success').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
alert('Trade execution would connect to Moomoo API in production.\n\nIn this prototype, the action is simulated.');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simulate live data updates
|
||||||
|
setInterval(() => {
|
||||||
|
const priceElements = document.querySelectorAll('small:contains("$182.45")');
|
||||||
|
priceElements.forEach(el => {
|
||||||
|
const currentPrice = parseFloat(el.textContent.replace('$', ''));
|
||||||
|
const change = (Math.random() - 0.5) * 0.1;
|
||||||
|
const newPrice = currentPrice * (1 + change);
|
||||||
|
el.textContent = '$' + newPrice.toFixed(2);
|
||||||
|
});
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
877
prototype/storyboards/forex-storyboard.html
Normal file
877
prototype/storyboards/forex-storyboard.html
Normal file
@@ -0,0 +1,877 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Forex Trading Storyboard - Quantitative Trading Platform</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap 5 CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<!-- Bootstrap Icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.storyboard-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyboard-step {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 2px solid var(--accent-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--accent-purple);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mock-screen {
|
||||||
|
background: var(--secondary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mock-screen::before {
|
||||||
|
content: 'Mock Screen';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 20px;
|
||||||
|
background: var(--primary-dark);
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.probability-badge {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-probability { background: rgba(76, 175, 80, 0.2); border: 1px solid var(--accent-green); color: var(--accent-green); }
|
||||||
|
.medium-probability { background: rgba(255, 152, 0, 0.2); border: 1px solid var(--accent-orange); color: var(--accent-orange); }
|
||||||
|
.low-probability { background: rgba(244, 67, 54, 0.2); border: 1px solid var(--accent-red); color: var(--accent-red); }
|
||||||
|
|
||||||
|
.action-card {
|
||||||
|
background: var(--tertiary-dark);
|
||||||
|
border: 1px solid var(--border-dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow {
|
||||||
|
text-align: center;
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow i {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency-pair {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pip-change {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positive-pip { color: var(--accent-green); }
|
||||||
|
.negative-pip { color: var(--accent-red); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-dark text-light">
|
||||||
|
<div class="storyboard-container">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h1 class="display-4 mb-3">
|
||||||
|
<i class="bi bi-currency-exchange text-accent-purple"></i>
|
||||||
|
Forex Trading Storyboard
|
||||||
|
</h1>
|
||||||
|
<p class="lead text-muted">
|
||||||
|
How the Quantitative Trading Platform analyzes forex markets and generates high-probability trading signals
|
||||||
|
</p>
|
||||||
|
<div class="d-flex justify-content-center gap-3 mt-4">
|
||||||
|
<a href="equities-storyboard.html" class="btn btn-outline-light">
|
||||||
|
<i class="bi bi-arrow-left"></i> View Equities Storyboard
|
||||||
|
</a>
|
||||||
|
<a href="../index.html" class="btn btn-outline-light">
|
||||||
|
<i class="bi bi-house"></i> Back to Prototype
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Storyboard Steps -->
|
||||||
|
|
||||||
|
<!-- Step 1: Forex Data Sourcing -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3 class="mb-0">Forex Data Aggregation</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
The platform connects to multiple forex data sources via Moomoo API and other providers for comprehensive market coverage.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-database text-accent-purple fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Forex Data Layer - Multi-Source Integration</h5>
|
||||||
|
<span class="badge bg-success ms-3">All Systems Connected</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Monitoring Currency Pairs</small>
|
||||||
|
<div class="d-flex flex-wrap gap-2 mt-2">
|
||||||
|
<span class="badge bg-primary currency-pair">EUR/USD</span>
|
||||||
|
<span class="badge bg-primary currency-pair">GBP/USD</span>
|
||||||
|
<span class="badge bg-primary currency-pair">USD/JPY</span>
|
||||||
|
<span class="badge bg-primary currency-pair">AUD/USD</span>
|
||||||
|
<span class="badge bg-primary currency-pair">USD/CAD</span>
|
||||||
|
<span class="badge bg-primary currency-pair">NZD/USD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Data Types Collected</small>
|
||||||
|
<ul class="mt-2 mb-0">
|
||||||
|
<li>Real-time bid/ask spreads</li>
|
||||||
|
<li>Historical price data (tick, minute, hourly)</li>
|
||||||
|
<li>Central bank announcements & economic calendars</li>
|
||||||
|
<li>Order book depth and market sentiment</li>
|
||||||
|
<li>Carry trade interest rate differentials</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Forex-Specific Metrics</small>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between mb-2">
|
||||||
|
<small>Average Spread (EUR/USD):</small>
|
||||||
|
<small class="text-info">0.8 pips</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-2">
|
||||||
|
<small>Market Volatility (VIX):</small>
|
||||||
|
<small class="text-warning">18.5</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-2">
|
||||||
|
<small>Liquidity Score:</small>
|
||||||
|
<small class="text-success">94/100</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Data Latency:</small>
|
||||||
|
<small class="text-success">< 50ms</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-info mt-3 mb-0">
|
||||||
|
<i class="bi bi-globe me-2"></i>
|
||||||
|
<strong>24/5 Market Coverage:</strong> The platform continuously monitors all major, minor, and exotic currency pairs across global trading sessions.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: Forex Analysis Engine -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3 class="mb-0">Multi-Timeframe Forex Analysis</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Advanced analysis combining technical, fundamental, and sentiment factors across multiple timeframes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-cpu text-accent-purple fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Forex Analysis: EUR/USD Focus</h5>
|
||||||
|
<span class="badge bg-warning ms-3">High Impact News Expected</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="text-center p-3 border border-secondary-dark rounded">
|
||||||
|
<div class="currency-pair display-6">EUR/USD</div>
|
||||||
|
<small class="text-muted">Euro vs US Dollar</small>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Bid/Ask:</small>
|
||||||
|
<small class="text-light">1.0854 / 1.0856</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Daily Change:</small>
|
||||||
|
<small class="pip-change positive-pip">+14 pips</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Spread:</small>
|
||||||
|
<small class="text-light">0.2 pips</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Technical Analysis</small>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Trend (H4):</small>
|
||||||
|
<small class="text-success">Bullish</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>RSI (14):</small>
|
||||||
|
<small class="text-warning">62.3</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Support:</small>
|
||||||
|
<small class="text-light">1.0820</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Resistance:</small>
|
||||||
|
<small class="text-light">1.0880</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Fundamental Factors</small>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>ECB Rate:</small>
|
||||||
|
<small class="text-light">4.50%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Fed Rate:</small>
|
||||||
|
<small class="text-light">5.25%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Interest Diff:</small>
|
||||||
|
<small class="text-danger">-0.75%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>CPI (EU):</small>
|
||||||
|
<small class="text-warning">2.8%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<small class="text-muted">Market Sentiment & News</small>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Commitment of Traders:</small>
|
||||||
|
<small class="text-success">Net Long EUR</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Next Major Event:</small>
|
||||||
|
<small class="text-warning">US NFP in 2 days</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Risk Sentiment:</small>
|
||||||
|
<small class="text-info">Risk-On</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-warning mt-3">
|
||||||
|
<i class="bi bi-megaphone me-2"></i>
|
||||||
|
<strong>High Impact Event Alert:</strong> US Non-Farm Payrolls report in 48 hours - Expected volatility increase of 30-40%.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3: Forex Recommendation -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3 class="mb-0">Forex Trading Recommendation</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Probability-based forex trading signals with detailed risk/reward analysis tailored to currency pair characteristics.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-star text-accent-orange fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Forex Trading Signal: EUR/USD</h5>
|
||||||
|
<span class="badge bg-warning ms-3">Pre-NFP Strategy</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success">
|
||||||
|
<i class="bi bi-check-circle me-2"></i>
|
||||||
|
<strong>Recommended Strategy:</strong> Buy EUR/USD on dips before US NFP report with tight risk management
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6 class="mb-3">Probability Matrix</h6>
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Target: +50 pips before NFP</small>
|
||||||
|
<small class="text-success">68% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-success" style="width: 68%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Target: +100 pips post-NFP</small>
|
||||||
|
<small class="text-warning">45% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-warning" style="width: 45%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Stop Loss: -30 pips</small>
|
||||||
|
<small class="text-danger">32% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-danger" style="width: 32%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Breakeven + News Scalp</small>
|
||||||
|
<small class="text-info">55% probability</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress bg-dark" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-info" style="width: 55%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6 class="mb-3">Forex-Specific Factors</h6>
|
||||||
|
<ul class="mb-0">
|
||||||
|
<li><span class="text-success">✓</span> Bullish technical breakout on H4 chart</li>
|
||||||
|
<li><span class="text-success">✓</span> Positive EU economic data surprise</li>
|
||||||
|
<li><span class="text-warning">⚠</span> Negative interest rate differential (-0.75%)</li>
|
||||||
|
<li><span class="text-success">✓</span> Risk-on market sentiment supporting EUR</li>
|
||||||
|
<li><span class="text-warning">⚠</span> High volatility expected around NFP</li>
|
||||||
|
<li><span class="text-info">ℹ</span> Seasonal tendency for EUR strength in current period</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-info rounded">
|
||||||
|
<h6 class="text-info">Carry Trade Analysis</h6>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Daily Interest:</small>
|
||||||
|
<small class="text-danger">-$0.82 per lot</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Weekly Rollover:</small>
|
||||||
|
<small class="text-danger">-$5.74</small>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">Negative carry reduces attractiveness for long-term holds</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-warning rounded">
|
||||||
|
<h6 class="text-warning">Volatility Assessment</h6>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Current ATR (Daily):</small>
|
||||||
|
<small class="text-light">85 pips</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Expected NFP ATR:</small>
|
||||||
|
<small class="text-warning">110-130 pips</small>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">Position sizing adjusted for increased volatility</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-arrow">
|
||||||
|
<i class="bi bi-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 4: Forex Course of Action -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<h3 class="mb-0">Forex-Specific Action Plans</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Three distinct forex trading approaches accounting for leverage, pip values, and currency-specific risk factors.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Action 1: Momentum Breakout -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge high-probability me-2">75% Confidence</span>
|
||||||
|
Momentum Breakout
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Capture pre-NFP bullish momentum with tight stops</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-danger">High Frequency</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Buy 2 standard lots EUR/USD @ 1.0850</li>
|
||||||
|
<li>Stop loss: 1.0820 (-30 pips)</li>
|
||||||
|
<li>Take profit 1: 1.0900 (+50 pips) - 50% position</li>
|
||||||
|
<li>Take profit 2: 1.0950 (+100 pips) - 50% position</li>
|
||||||
|
<li>Leverage: 10:1 | Margin: $21,700</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Risk/Reward Profile</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Risk per Lot:</small>
|
||||||
|
<small class="text-danger">-$300</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Reward (TP1):</small>
|
||||||
|
<small class="text-success">+$500</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Reward (TP2):</small>
|
||||||
|
<small class="text-success">+$1,000</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Risk/Reward Ratio:</small>
|
||||||
|
<small class="text-light">1:2.5</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Expected Value:</small>
|
||||||
|
<small class="text-info">+$425</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-info mt-3 mb-0">
|
||||||
|
<i class="bi bi-clock me-2"></i>
|
||||||
|
<strong>Time-Sensitive:</strong> Entry window closes 4 hours before NFP release. Position will be reduced by 50% 1 hour before announcement.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-calculator"></i> Calculate Pip Value
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-sm">
|
||||||
|
<i class="bi bi-check-circle"></i> Execute Forex Trade
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action 2: News Scalp -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge medium-probability me-2">60% Confidence</span>
|
||||||
|
NFP News Scalp
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Quick in-and-out around news release with minimal exposure</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-warning">Medium Frequency</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Wait for NFP release (Friday 8:30 AM EST)</li>
|
||||||
|
<li>Enter on initial spike (direction agnostic)</li>
|
||||||
|
<li>Position: 1 standard lot</li>
|
||||||
|
<li>Stop loss: 20 pips from entry</li>
|
||||||
|
<li>Take profit: 40 pips from entry</li>
|
||||||
|
<li>Maximum hold time: 15 minutes</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Risk/Reward Profile</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Risk per Trade:</small>
|
||||||
|
<small class="text-danger">-$200</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Reward per Trade:</small>
|
||||||
|
<small class="text-success">+$400</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Risk/Reward Ratio:</small>
|
||||||
|
<small class="text-light">1:2</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Win Rate Required:</small>
|
||||||
|
<small class="text-info">33.3%</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Historical Win Rate:</small>
|
||||||
|
<small class="text-success">52%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-warning mt-3 mb-0">
|
||||||
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||||
|
<strong>High Execution Skill Required:</strong> This strategy requires precise timing and may experience slippage during high volatility.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-graph-up"></i> View Historical NFP Patterns
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-sm">
|
||||||
|
<i class="bi bi-alarm"></i> Set NFP Alert
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action 3: Carry Trade Adjustment -->
|
||||||
|
<div class="action-card">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1">
|
||||||
|
<span class="probability-badge low-probability me-2">40% Confidence</span>
|
||||||
|
Carry Trade Hedge
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted mb-0">Long-term position with interest rate hedge</p>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-secondary">Low Frequency</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Execution Plan</h6>
|
||||||
|
<ul>
|
||||||
|
<li>Sell EUR/USD 0.5 lots @ current</li>
|
||||||
|
<li>Buy USD/CHF 0.5 lots as hedge</li>
|
||||||
|
<li>Stop loss: 100 pips on each pair</li>
|
||||||
|
<li>Target: 200 pips over 4-6 weeks</li>
|
||||||
|
<li>Collect positive carry on USD/CHF</li>
|
||||||
|
<li>Net carry: +$1.24 daily</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h6>Risk/Reward Profile</h6>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Total Risk:</small>
|
||||||
|
<small class="text-danger">-$1,000</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Total Reward:</small>
|
||||||
|
<small class="text-success">+$2,000</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Daily Carry:</small>
|
||||||
|
<small class="text-info">+$1.24</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small>Monthly Carry:</small>
|
||||||
|
<small class="text-info">+$37.20</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Risk/Reward Ratio:</small>
|
||||||
|
<small class="text-light">1:2</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success mt-3 mb-0">
|
||||||
|
<i class="bi bi-cash-stack me-2"></i>
|
||||||
|
<strong>Positive Carry:</strong> This strategy generates daily interest income regardless of price movement.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
|
||||||
|
<button class="btn btn-outline-light btn-sm">
|
||||||
|
<i class="bi bi-calculator"></i> Calculate Carry Returns
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-info btn-sm">
|
||||||
|
<i class="bi bi-calendar"></i> Set Quarterly Review
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 5: Forex Execution & Management -->
|
||||||
|
<div class="storyboard-step">
|
||||||
|
<div class="step-header">
|
||||||
|
<div class="step-number">5</div>
|
||||||
|
<h3 class="mb-0">Forex Execution & Risk Management</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Specialized forex execution with pip-based risk controls, leverage management, and currency correlation monitoring.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mock-screen">
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<i class="bi bi-arrow-left-right text-accent-green fs-4 me-2"></i>
|
||||||
|
<h5 class="mb-0">Forex Execution Dashboard</h5>
|
||||||
|
<span class="badge bg-success ms-3">Leverage: 10:1</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-success rounded">
|
||||||
|
<h6 class="text-success">
|
||||||
|
<i class="bi bi-check-circle me-2"></i>
|
||||||
|
Selected Action: Momentum Breakout
|
||||||
|
</h6>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Action:</small>
|
||||||
|
<small class="text-light">BUY 2 lots EUR/USD</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Entry:</small>
|
||||||
|
<small class="text-light">Limit @ 1.0850</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Margin Required:</small>
|
||||||
|
<small class="text-light">$21,700</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Free Margin:</small>
|
||||||
|
<small class="text-success">$128,300</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Margin Level:</small>
|
||||||
|
<small class="text-success">590%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid mt-4">
|
||||||
|
<button class="btn btn-success">
|
||||||
|
<i class="bi bi-lightning-charge me-2"></i>
|
||||||
|
Execute Forex Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="p-3 border border-secondary-dark rounded">
|
||||||
|
<h6>Forex Risk Controls</h6>
|
||||||
|
<div class="mt-3">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Max Daily Loss:</small>
|
||||||
|
<small class="text-light">2% ($3,000)</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Position Sizing:</small>
|
||||||
|
<small class="text-light">1% risk per trade</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Currency Correlation:</small>
|
||||||
|
<small class="text-success">Within limits</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>Hedging:</small>
|
||||||
|
<small class="text-light">Active</small>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<small>News Filter:</small>
|
||||||
|
<small class="text-warning">NFP Alert Active</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress mt-4 bg-dark" style="height: 10px;">
|
||||||
|
<div class="progress-bar bg-info" style="width: 65%"></div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">Daily risk limit used: 0.65% ($975)</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="p-3 border border-warning rounded">
|
||||||
|
<h6 class="text-warning">
|
||||||
|
<i class="bi bi-clock-history me-2"></i>
|
||||||
|
Forex-Specific Considerations
|
||||||
|
</h6>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<small class="text-muted">Swap/Rollover</small>
|
||||||
|
<div class="mt-1">Calculated daily at 5 PM EST</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<small class="text-muted">Session Overlaps</small>
|
||||||
|
<div class="mt-1">London-New York: High liquidity</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<small class="text-muted">Weekend Risk</small>
|
||||||
|
<div class="mt-1">Positions held over weekend</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Conclusion -->
|
||||||
|
<div class="text-center mt-5 pt-4 border-top border-secondary-dark">
|
||||||
|
<h4 class="mb-3">Forex Trading Revenue Model</h4>
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Combining multiple forex strategies creates diversified income streams from directional trades,
|
||||||
|
carry interest, and volatility capture across different currency pairs and timeframes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<div class="p-4 border border-accent-purple rounded">
|
||||||
|
<h5 class="text-accent-purple mb-3">
|
||||||
|
<i class="bi bi-currency-exchange me-2"></i>
|
||||||
|
Monthly Forex Trading Expectations
|
||||||
|
</h5>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="display-6 text-success">5-8%</div>
|
||||||
|
<small class="text-muted">Target Return</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="display-6 text-warning">2-4%</div>
|
||||||
|
<small class="text-muted">Max Drawdown</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="display-6 text-info">55-65%</div>
|
||||||
|
<small class="text-muted">Win Rate</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="display-6 text-success">0.1-0.3%</div>
|
||||||
|
<small class="text-muted">Daily Carry</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<small class="text-muted">
|
||||||
|
Based on $100,000 capital with 10:1 leverage across 5-7 currency pairs
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<a href="equities-storyboard.html" class="btn btn-primary btn-lg">
|
||||||
|
<i class="bi bi-arrow-left me-2"></i>
|
||||||
|
View Equities Trading Storyboard
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap JS Bundle with Popper -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Forex-specific interactions
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Simulate live forex price updates
|
||||||
|
setInterval(() => {
|
||||||
|
const priceElements = document.querySelectorAll('.currency-pair.display-6');
|
||||||
|
priceElements.forEach(el => {
|
||||||
|
if (el.textContent === 'EUR/USD') {
|
||||||
|
const current = 1.0854;
|
||||||
|
const change = (Math.random() - 0.5) * 0.0005;
|
||||||
|
const newPrice = current + change;
|
||||||
|
el.nextElementSibling.nextElementSibling.querySelector('small:nth-child(2)').textContent =
|
||||||
|
newPrice.toFixed(4) + ' / ' + (newPrice + 0.0002).toFixed(4);
|
||||||
|
|
||||||
|
// Update pip change
|
||||||
|
const pipChange = Math.round(change * 10000);
|
||||||
|
const pipElement = document.querySelector('.pip-change');
|
||||||
|
if (pipElement) {
|
||||||
|
pipElement.textContent = (pipChange >= 0 ? '+' : '') + pipChange + ' pips';
|
||||||
|
pipElement.className = pipChange >= 0 ? 'pip-change positive-pip' : 'pip-change negative-pip';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
// Forex trade execution
|
||||||
|
document.querySelectorAll('.btn-success').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
if (this.textContent.includes('Forex')) {
|
||||||
|
alert('Forex trade execution would connect to Moomoo FX API in production.\n\nIncludes leverage validation, margin checks, and currency risk controls.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user