Hugging Face's logo

Spaces:
jsonet
/
metatrader-command-center
Running

App Files Community
metatrader-command-center / calculator.html
jsonet's picture
jsonet
Crea una nueva pagina, que integre todas las caracteristicas para conectar la app con la cuenta de Metatrader 5 para que se vinculen los datos en tiempo real
43435d6 verified
raw
history blame contribute delete
27.8 kB
<!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 styles */
 .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">
 <!-- Main Container -->
 <div class="flex flex-col md:flex-row min-h-screen">
 <!-- Sidebar -->
 <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>
<!-- Mobile Menu Toggle -->
 <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>
<!-- Desktop Menu -->
 <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>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <!-- Header -->
 <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>
<!-- Calculator -->
 <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">
 <!-- Input Section -->
 <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>
<!-- Results Section -->
 <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>
<!-- Advanced Calculator -->
 <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>
<!-- Saved Templates -->
 <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>
 // Initialize Feather Icons
 feather.replace();
// Mobile menu toggle
 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();
 });
 }
 });
// Position size calculation
 function calculatePositionSize() {
 // Get input values
const accountBalance = parseFloat(document.getElementById('accountBalance').value) || 0;
 const riskPercentage = parseFloat(document.getElementById('riskPercentage').value) || 0;
 const stopLossPips = parseFloat(document.getElementById('stopLossPips').value) || 0;
// Calculate risk amount
 const riskAmount = accountBalance * (riskPercentage / 100);
// Calculate pip value (simplified - assumes standard lot and USD account)
 let pipValue = 10; // Default for USD pairs
 const currencyPair = document.getElementById('currencyPair').value;
 const accountCurrency = document.getElementById('accountCurrency').value;
// Adjust pip value based on currency pair and account currency
 if (currencyPair === 'USDJPY') {
 pipValue = 9.2; // Approximate value
 } else if (currencyPair === 'EURUSD' && accountCurrency !== 'USD') {
 pipValue = 10 * 0.85; // Approximate EUR conversion
 }
// Calculate position size
 const positionSize = riskAmount / (stopLossPips * pipValue);
// Calculate take profit for 1:2 reward:risk
 const takeProfitPips = stopLossPips * 2;
// Update UI
 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);
 }
// Apply to chart function
 function applyToChart() {
 alert('Position parameters applied to chart!');
 }
// Initial calculation
 calculatePositionSize();
 </script>
</body>
</html>