|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Position Calculator - MetaTrader Command Center</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#fdf2f8', |
|
|
100: '#fce7f3', |
|
|
200: '#fbcfe8', |
|
|
300: '#f9a8d4', |
|
|
400: '#f472b6', |
|
|
500: '#ec4899', |
|
|
600: '#db2777', |
|
|
700: '#be185d', |
|
|
800: '#9d174d', |
|
|
900: '#831843', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #e2e8f0; |
|
|
} |
|
|
.glass-effect { |
|
|
background: rgba(30, 41, 59, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(148, 163, 184, 0.2); |
|
|
} |
|
|
.calculator-input:focus { |
|
|
border-color: #0ea5e9; |
|
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3); |
|
|
} |
|
|
.result-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.result-card:hover { |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
display: none; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.desktop-menu { |
|
|
display: none; |
|
|
} |
|
|
.mobile-menu { |
|
|
display: block; |
|
|
} |
|
|
.mobile-menu-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
.mobile-menu-content.open { |
|
|
max-height: 500px; |
|
|
transition: max-height 0.5s ease-in; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-slate-900 text-slate-100 min-h-screen"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row min-h-screen"> |
|
|
|
|
|
<div class="w-full md:w-64 glass-effect p-4 flex flex-col"> |
|
|
<div class="mb-8"> |
|
|
<h1 class="text-2xl font-bold text-primary-400 flex items-center"> |
|
|
<i data-feather="activity" class="mr-2"></i> |
|
|
MT5 Command |
|
|
</h1> |
|
|
<p class="text-xs text-slate-400 mt-1">Trading Control Panel</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mobile-menu mb-4"> |
|
|
<button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700"> |
|
|
<span>Menu</span> |
|
|
<i data-feather="menu" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2"> |
|
|
<ul class="py-2"> |
|
|
<li> |
|
|
<a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="home" class="mr-3 w-5 h-5"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i> |
|
|
<span>Trading View</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="settings" class="mr-3 w-5 h-5"></i> |
|
|
<span>Expert Advisors</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="calculator.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white"> |
|
|
<i data-feather="calculator" class="mr-3 w-5 h-5"></i> |
|
|
<span>Position Calculator</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="layers" class="mr-3 w-5 h-5"></i> |
|
|
<span>Strategies</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="shield" class="mr-3 w-5 h-5"></i> |
|
|
<span>Risk Management</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="file-text" class="mr-3 w-5 h-5"></i> |
|
|
<span>Reports</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
|
|
<i data-feather="link" class="mr-3 w-5 h-5"></i> |
|
|
<span>Account Connection</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 desktop-menu"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="home" class="mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="bar-chart-2" class="mr-3"></i> |
|
|
Trading View |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="settings" class="mr-3"></i> |
|
|
Expert Advisors |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="calculator.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white"> |
|
|
<i data-feather="calculator" class="mr-3"></i> |
|
|
Position Calculator |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="layers" class="mr-3"></i> |
|
|
Strategies |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="shield" class="mr-3"></i> |
|
|
Risk Management |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="file-text" class="mr-3"></i> |
|
|
Reports |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
|
|
<i data-feather="link" class="mr-3"></i> |
|
|
Account Connection |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-slate-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-slate-700 rounded-full p-2 mr-3"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Trader Pro</p> |
|
|
<p class="text-xs text-slate-400">Active Session</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="glass-effect p-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold">Position Calculator</h2> |
|
|
<p class="text-sm text-slate-400">Calculate optimal position sizes and risk parameters</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i data-feather="save" class="mr-2"></i> |
|
|
Save Template |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="glass-effect rounded-xl p-6 max-w-4xl mx-auto"> |
|
|
<h3 class="font-bold text-lg mb-6">Position Size Calculator</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div> |
|
|
<div class="space-y-5"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Account Balance ($)</label> |
|
|
<input |
|
|
type="number" |
|
|
id="accountBalance" |
|
|
value="25000" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
oninput="calculatePositionSize()" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Risk Percentage (%)</label> |
|
|
<input |
|
|
type="number" |
|
|
id="riskPercentage" |
|
|
value="2" |
|
|
step="0.1" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
oninput="calculatePositionSize()" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Stop Loss (pips)</label> |
|
|
<input |
|
|
type="number" |
|
|
id="stopLossPips" |
|
|
value="50" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
oninput="calculatePositionSize()" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Currency Pair</label> |
|
|
<select |
|
|
id="currencyPair" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
onchange="calculatePositionSize()" |
|
|
> |
|
|
<option value="EURUSD">EURUSD</option> |
|
|
<option value="GBPUSD">GBPUSD</option> |
|
|
<option value="USDJPY">USDJPY</option> |
|
|
<option value="AUDUSD">AUDUSD</option> |
|
|
<option value="USDCAD">USDCAD</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Account Currency</label> |
|
|
<select |
|
|
id="accountCurrency" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
onchange="calculatePositionSize()" |
|
|
> |
|
|
<option value="USD">USD</option> |
|
|
<option value="EUR">EUR</option> |
|
|
<option value="GBP">GBP</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="space-y-5"> |
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Position Size</span> |
|
|
<span id="positionSize" class="text-2xl font-bold">0.25</span> |
|
|
</div> |
|
|
<p class="text-sm text-slate-500 mt-1">Standard lots</p> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Risk Amount</span> |
|
|
<span id="riskAmount" class="text-2xl font-bold">$500.00</span> |
|
|
</div> |
|
|
<p class="text-sm text-slate-500 mt-1">In account currency</p> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Pip Value</span> |
|
|
<span id="pipValue" class="text-2xl font-bold">$10.00</span> |
|
|
</div> |
|
|
<p class="text-sm text-slate-500 mt-1">Per standard lot</p> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Take Profit (1:2 RR)</span> |
|
|
<span id="takeProfit" class="text-2xl font-bold">100</span> |
|
|
</div> |
|
|
<p class="text-sm text-slate-500 mt-1">Pips for 2:1 reward:risk</p> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
onclick="applyToChart()" |
|
|
class="w-full bg-primary-600 hover:bg-primary-700 py-3 rounded-lg font-medium mt-4" |
|
|
> |
|
|
Apply to Chart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="glass-effect rounded-xl p-6 max-w-4xl mx-auto"> |
|
|
<h3 class="font-bold text-lg mb-6">Advanced Risk Calculator</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="space-y-5"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Entry Price</label> |
|
|
<input |
|
|
type="number" |
|
|
id="entryPrice" |
|
|
value="1.0850" |
|
|
step="0.0001" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Stop Loss Price</label> |
|
|
<input |
|
|
type="number" |
|
|
id="stopLossPrice" |
|
|
value="1.0800" |
|
|
step="0.0001" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">Take Profit Price</label> |
|
|
<input |
|
|
type="number" |
|
|
id="takeProfitPrice" |
|
|
value="1.0950" |
|
|
step="0.0001" |
|
|
class="calculator-input w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="space-y-5"> |
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Risk (pips)</span> |
|
|
<span id="riskPips" class="text-xl font-bold">50</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Reward (pips)</span> |
|
|
<span id="rewardPips" class="text-xl font-bold">100</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Reward:Risk Ratio</span> |
|
|
<span id="rrRatio" class="text-xl font-bold">2.0</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="result-card bg-slate-800 rounded-xl p-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-slate-400">Win Rate Required</span> |
|
|
<span id="winRateRequired" class="text-xl font-bold">33.3%</span> |
|
|
</div> |
|
|
<p class="text-sm text-slate-500 mt-1">To break even</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="glass-effect rounded-xl p-6 max-w-4xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="font-bold text-lg">Saved Templates</h3> |
|
|
<button class="text-primary-400 flex items-center"> |
|
|
<i data-feather="plus" class="mr-1"></i> New Template |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
|
|
<h4 class="font-medium">Conservative</h4> |
|
|
<p class="text-sm text-slate-400 mt-1">1% risk, 50 pip SL</p> |
|
|
</div> |
|
|
<div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
|
|
<h4 class="font-medium">Moderate</h4> |
|
|
<p class="text-sm text-slate-400 mt-1">2% risk, 75 pip SL</p> |
|
|
</div> |
|
|
<div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
|
|
<h4 class="font-medium">Aggressive</h4> |
|
|
<p class="text-sm text-slate-400 mt-1">3% risk, 100 pip SL</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const menuToggle = document.getElementById('mobile-menu-toggle'); |
|
|
const menuContent = document.getElementById('mobile-menu-content'); |
|
|
|
|
|
if (menuToggle && menuContent) { |
|
|
menuToggle.addEventListener('click', function() { |
|
|
const icon = this.querySelector('[data-feather]'); |
|
|
if (menuContent.classList.contains('open')) { |
|
|
menuContent.classList.remove('open'); |
|
|
icon.setAttribute('data-feather', 'menu'); |
|
|
} else { |
|
|
menuContent.classList.add('open'); |
|
|
icon.setAttribute('data-feather', 'x'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function calculatePositionSize() { |
|
|
|
|
|
const accountBalance = parseFloat(document.getElementById('accountBalance').value) || 0; |
|
|
const riskPercentage = parseFloat(document.getElementById('riskPercentage').value) || 0; |
|
|
const stopLossPips = parseFloat(document.getElementById('stopLossPips').value) || 0; |
|
|
|
|
|
|
|
|
const riskAmount = accountBalance * (riskPercentage / 100); |
|
|
|
|
|
|
|
|
let pipValue = 10; |
|
|
const currencyPair = document.getElementById('currencyPair').value; |
|
|
const accountCurrency = document.getElementById('accountCurrency').value; |
|
|
|
|
|
|
|
|
if (currencyPair === 'USDJPY') { |
|
|
pipValue = 9.2; |
|
|
} else if (currencyPair === 'EURUSD' && accountCurrency !== 'USD') { |
|
|
pipValue = 10 * 0.85; |
|
|
} |
|
|
|
|
|
|
|
|
const positionSize = riskAmount / (stopLossPips * pipValue); |
|
|
|
|
|
|
|
|
const takeProfitPips = stopLossPips * 2; |
|
|
|
|
|
|
|
|
document.getElementById('positionSize').textContent = positionSize.toFixed(2); |
|
|
document.getElementById('riskAmount').textContent = '$' + riskAmount.toFixed(2); |
|
|
document.getElementById('pipValue').textContent = '$' + pipValue.toFixed(2); |
|
|
document.getElementById('takeProfit').textContent = takeProfitPips.toFixed(0); |
|
|
} |
|
|
|
|
|
|
|
|
function applyToChart() { |
|
|
alert('Position parameters applied to chart!'); |
|
|
} |
|
|
|
|
|
|
|
|
calculatePositionSize(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
