Spaces:

jsonet
/

tradeflow-pro-nexus

Running

implementa mas realismo y funcionalidad a todas las paginas y herramientas implementadas en la aplicacion actual, desarrolla cada herramienta y elemento de cada pagina hasta su maximo nivel de desarrollo posible dentro de tus capacidades maximas!

17fd0cc verified 3 months ago

raw

history blame contribute delete

33.7 kB

	<!DOCTYPE html>
	<html lang="en" class="dark">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TradeFlow Pro Nexus - Dashboard</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<script>
	tailwind.config = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	primary: '#6366f1',
	secondary: '#10b981'
	}
	}
	}
	}
	</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; }
	.glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
	.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
	.chart-container { height: 400px; }
	.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
	@media (min-width: 1024px) {
	.mobile-bottom-nav { display: none; }
	}
	</style>
	</head>
	<body class="gradient-bg min-h-screen text-white">
	<!-- Desktop Navigation -->
	<nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
	<div class="container mx-auto flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<i data-feather="trending-up" class="text-primary"></i>
	<span class="text-xl font-bold">TradeFlow Pro</span>
	</div>
	<div class="flex space-x-6">
	<a href="index.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
	<i data-feather="bar-chart-2"></i>
	<span>Dashboard</span>
	</a>
	<a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
	<i data-feather="cpu"></i>
	<span>EA Control</span>
	</a>
	<a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
	<i data-feather="activity"></i>
	<span>Trading</span>
	</a>
	<a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
	<i data-feather="shield"></i>
	<span>Protection</span>
	</a>
	<a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300">
	<i data-feather="pie-chart"></i>
	<span>Analytics</span>
	</a>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<i data-feather="bell" class="cursor-pointer"></i>
	<span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
	</div>
	<div class="flex items-center space-x-2">
	<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
	<i data-feather="user" class="w-4 h-4"></i>
	</div>
	<span>Trader</span>
	</div>
	</div>
	</div>
	</nav>

	<!-- Mobile Bottom Navigation -->
	<nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
	<div class="flex justify-around items-center py-3">
	<a href="index.html" class="flex flex-col items-center text-primary">
	<i data-feather="bar-chart-2" class="w-5 h-5"></i>
	<span class="text-xs mt-1">Dashboard</span>
	</a>
	<a href="ea-control.html" class="flex flex-col items-center text-gray-400">
	<i data-feather="cpu" class="w-5 h-5"></i>
	<span class="text-xs mt-1">EAs</span>
	</a>
	<a href="trading.html" class="flex flex-col items-center text-gray-400">
	<i data-feather="activity" class="w-5 h-5"></i>
	<span class="text-xs mt-1">Trade</span>
	</a>
	<a href="protection.html" class="flex flex-col items-center text-gray-400">
	<i data-feather="shield" class="w-5 h-5"></i>
	<span class="text-xs mt-1">Shield</span>
	</a>
	<a href="analytics.html" class="flex flex-col items-center text-gray-400">
	<i data-feather="pie-chart" class="w-5 h-5"></i>
	<span class="text-xs mt-1">Stats</span>
	</a>
	</div>
	</nav>

	<!-- Main Content -->
	<main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
	<!-- Connection Status -->
	<div class="glass-effect rounded-xl p-4 mb-6 flex items-center justify-between">
	<div class="flex items-center space-x-3">
	<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
	<span class="font-medium">Connected to MT5</span>
	<span class="text-sm text-gray-400">Account: 12345678 \| Broker: Demo Server</span>
	</div>
	<div class="flex items-center space-x-4">
	<div class="text-right">
	<div class="text-2xl font-bold">$25,847.32</div>
	<div class="text-sm text-green-500">+$324.50 (+1.27%) Today</div>
	</div>
	<button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
	<i data-feather="refresh-cw" class="w-4 h-4"></i>
	<span>Sync</span>
	</button>
	</div>
	</div>

	<!-- Dashboard Grid -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
	<!-- Account Summary -->
	<div class="glass-effect rounded-xl p-6 lg:col-span-1">
	<h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
	<i data-feather="dollar-sign" class="text-primary"></i>
	<span>Account Summary</span>
	</h2>
	<div class="space-y-3">
	<div class="flex justify-between">
	<span>Balance:</span>
	<span class="font-mono">$25,522.82</span>
	</div>
	<div class="flex justify-between">
	<span>Equity:</span>
	<span class="font-mono">$25,847.32</span>
	</div>
	<div class="flex justify-between">
	<span>Free Margin:</span>
	<span class="font-mono">$18,234.15</span>
	</div>
	<div class="flex justify-between">
	<span>Margin Level:</span>
	<span class="font-mono text-green-500">142%</span>
	</div>
	</div>
	</div>

	<!-- Active EAs -->
	<div class="glass-effect rounded-xl p-6 lg:col-span-2">
	<h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
	<i data-feather="cpu" class="text-secondary"></i>
	<span>Active Expert Advisors</span>
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="border border-gray-600 rounded-lg p-4">
	<div class="flex justify-between items-start mb-2">
	<span class="font-medium">TrendMaster Pro</span>
	<span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">Active</span>
	</div>
	<div class="text-sm text-gray-400 mb-2">EUR/USD - M15</div>
	<div class="flex justify-between text-sm">
	<span>P&L:</span>
	<span class="text-green-500">+$142.50</span>
	</div>
	<div class="flex justify-between text-sm">
	<span>Trades:</span>
	<span>3</span>
	</div>
	</div>
	<div class="border border-gray-600 rounded-lg p-4">
	<div class="flex justify-between items-start mb-2">
	<span class="font-medium">ScalperX</span>
	<span class="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded">Paused</span>
	</div>
	<div class="text-sm text-gray-400 mb-2">GBP/USD - M5</div>
	<div class="flex justify-between text-sm">
	<span>P&L:</span>
	<span class="text-red-500">-$23.80</span>
	</div>
	<div class="flex justify-between text-sm">
	<span>Trades:</span>
	<span>1</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Charts and Open Positions -->
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
	<!-- Advanced Price Chart -->
	<div class="glass-effect rounded-xl p-6">
	<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
	<div class="flex items-center space-x-4 mb-2 lg:mb-0">
	<h2 class="text-lg font-semibold">EUR/USD - Advanced Chart</h2>
	<div class="flex items-center space-x-2">
	<div class="text-green-500 font-mono text-sm">1.08745</div>
	<div class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">+0.21%</div>
	</div>
	</div>
	<div class="flex space-x-2">
	<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">1M</button>
	<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">1W</button>
	<button class="px-3 py-1 bg-primary rounded text-sm">1D</button>
	<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">4H</button>
	<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">1H</button>
	</div>
	</div>

	<div class="chart-container bg-gray-900 rounded-lg relative">
	<!-- Chart will be initialized by JavaScript -->
	<div class="absolute inset-0 flex items-center justify-center">
	<div class="text-center">
	<i data-feather="trending-up" class="w-12 h-12 text-primary mx-auto mb-2"></i>
	<p class="text-gray-400">Advanced Chart Loading</p>
	<p class="text-sm text-gray-500">Real-time technical analysis</p>
	</div>
	</div>
	</div>

	<!-- Technical Indicators -->
	<div class="grid grid-cols-3 gap-2 mt-4">
	<div class="text-center">
	<div class="text-sm text-gray-400">RSI</div>
	<div class="font-mono text-sm">58.2</div>
	</div>
	<div class="text-center">
	<div class="text-sm text-gray-400">MACD</div>
	<div class="font-mono text-sm">+0.002</div>
	</div>
	<div class="text-center">
	<div class="text-sm text-gray-400">Vol</div>
	<div class="font-mono text-sm">87.4M</div>
	</div>
	</div>
	</div>
	<!-- Open Positions -->
	<div class="glass-effect rounded-xl p-6">
	<h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
	<i data-feather="layers" class="text-primary"></i>
	<span>Open Positions</span>
	<span class="bg-primary/20 text-primary text-xs px-2 py-1 rounded">5</span>
	</h2>
	<div class="space-y-3 max-h-80 overflow-y-auto">
	<div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
	<div>
	<div class="font-medium">EUR/USD</div>
	<div class="text-sm text-gray-400">Buy 0.1 Lot</div>
	</div>
	<div class="text-right">
	<div class="text-green-500 font-mono">+$32.50</div>
	<div class="text-sm text-gray-400">1.08745</div>
	</div>
	</div>
	<div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
	<div>
	<div class="font-medium">GBP/USD</div>
	<div class="text-sm text-gray-400">Sell 0.05 Lot</div>
	</div>
	<div class="text-right">
	<div class="text-red-500 font-mono">-$12.80</div>
	<div class="text-sm text-gray-400">1.26530</div>
	</div>
	</div>
	<div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
	<div>
	<div class="font-medium">XAU/USD</div>
	<div class="text-sm text-gray-400">Buy 0.01 Lot</div>
	</div>
	<div class="text-right">
	<div class="text-green-500 font-mono">+$87.20</div>
	<div class="text-sm text-gray-400">1987.45</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Advanced Quick Actions Panel -->
	<div class="glass-effect rounded-xl p-6 mt-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-lg font-semibold">Quick Actions & Risk Management</h2>
	<div class="flex items-center space-x-2 text-sm text-gray-400">
	<i data-feather="shield" class="w-4 h-4 text-green-500"></i>
	<span>Risk Level: Medium</span>
	</div>
	</div>

	<div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
	<button class="bg-primary/20 hover:bg-primary/30 border border-primary/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-all duration-200 hover:scale-105 group" data-tooltip="Open new trade with risk management">
	<i data-feather="plus-circle" class="w-8 h-8 text-primary group-hover:scale-110 transition-transform"></i>
	<span class="text-sm font-medium">New Trade</span>
	<span class="text-xs text-gray-400">Smart Risk Calc</span>
	</button>

	<button class="bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-all duration-200 hover:scale-105 group" data-tooltip="Close all positions with confirmation">
	<i data-feather="x-circle" class="w-8 h-8 text-red-500 group-hover:scale-110 transition-transform"></i>
	<span class="text-sm font-medium">Close All</span>
	<span class="text-xs text-gray-400">Emergency Exit</span>
	</button>

	<button class="bg-green-500/20 hover:bg-green-500/30 border border-green-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-all duration-200 hover:scale-105 group" onclick="location.href='analytics.html'">
	<i data-feather="trending-up" class="w-8 h-8 text-green-500 group-hover:scale-110 transition-transform"></i>
	<span class="text-sm font-medium">Analytics</span>
	<span class="text-xs text-gray-400">Advanced Stats</span>
	</button>

	<button class="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-all duration-200 hover:scale-105 group" data-tooltip="Configure trading parameters">
	<i data-feather="settings" class="w-8 h-8 text-blue-500 group-hover:scale-110 transition-transform"></i>
	<span class="text-sm font-medium">Settings</span>
	<span class="text-xs text-gray-400">Preferences</span>
	</button>

	<button class="bg-purple-500/20 hover:bg-purple-500/30 border border-purple-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-all duration-200 hover:scale-105 group" data-tooltip="AI-powered market analysis">
	<i data-feather="brain" class="w-8 h-8 text-purple-500 group-hover:scale-110 transition-transform"></i>
	<span class="text-sm font-medium">AI Insights</span>
	<span class="text-xs text-gray-400">Market Intel</span>
	</button>
	</div>

	<!-- Risk Management Bar -->
	<div class="mt-6 pt-4 border-t border-gray-600">
	<div class="flex justify-between items-center mb-2">
	<span class="text-sm text-gray-400">Portfolio Risk Exposure</span>
	<span class="text-sm font-mono">23.4%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-gradient-to-r from-green-500 to-yellow-500 h-2 rounded-full" style="width: 23.4%"></div>
	</div>
	<div class="flex justify-between text-xs text-gray-400 mt-1">
	<span>Low Risk</span>
	<span>Medium</span>
	<span>High Risk</span>
	</div>
	</div>
	</div>

	<!-- Market Overview Widget -->
	<div class="glass-effect rounded-xl p-6 mt-6">
	<h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
	<i data-feather="globe" class="text-primary"></i>
	<span>Live Market Overview</span>
	</h2>

	<div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
	<div class="bg-gray-800/50 rounded-lg p-3">
	<div class="flex justify-between items-start mb-2">
	<span class="text-sm text-gray-400">EUR/USD</span>
	<span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">+0.21%</span>
	</div>
	<div class="font-mono text-lg">1.08745</div>
	<div class="text-xs text-gray-400">Spread: 0.6</div>
	</div>

	<div class="bg-gray-800/50 rounded-lg p-3">
	<div class="flex justify-between items-start mb-2">
	<span class="text-sm text-gray-400">GBP/USD</span>
	<span class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded">-0.15%</span>
	</div>
	<div class="font-mono text-lg">1.26530</div>
	<div class="text-xs text-gray-400">Spread: 0.8</div>
	</div>

	<div class="bg-gray-800/50 rounded-lg p-3">
	<div class="flex justify-between items-start mb-2">
	<span class="text-sm text-gray-400">XAU/USD</span>
	<span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">+0.36%</span>
	</div>
	<div class="font-mono text-lg">1987.45</div>
	<div class="text-xs text-gray-400">Spread: 0.5</div>
	</div>

	<div class="bg-gray-800/50 rounded-lg p-3">
	<div class="flex justify-between items-start mb-2">
	<span class="text-sm text-gray-400">BTC/USD</span>
	<span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">+1.24%</span>
	</div>
	<div class="font-mono text-lg">42500.50</div>
	<div class="text-xs text-gray-400">Spread: 25.0</div>
	</div>

	<div class="bg-gray-800/50 rounded-lg p-3">
	<div class="flex justify-between items-start mb-2">
	<span class="text-sm text-gray-400">USD/JPY</span>
	<span class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded">-0.08%</span>
	</div>
	<div class="font-mono text-lg">148.25</div>
	<div class="text-xs text-gray-400">Spread: 0.9</div>
	</div>
	</div>
	</div>
	</main>
	<!-- Vanta.js Background -->
	<div id="vanta-bg" class="fixed inset-0 -z-10"></div>

	<!-- TradingView Widget -->
	<div id="tradingview-widget" class="fixed inset-0 -z-20 opacity-20"></div>

	<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
	<script src="https://s3.tradingview.com/tv.js"></script>

	<script>
	// Initialize Vanta.js background
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x6366f1,
	backgroundColor: 0x0f172a
	});

	// Initialize TradingView Widget
	new TradingView.widget({
	container_id: "tradingview-widget",
	autosize: true,
	symbol: "OANDA:EURUSD",
	interval: "60",
	timezone: "exchange",
	theme: "dark",
	style: "1",
	locale: "en",
	toolbar_bg: "#f1f3f6",
	enable_publishing: false,
	hide_top_toolbar: true,
	hide_legend: true,
	save_image: false,
	studies: [
	"BB@tv-basicstudies",
	"RSI@tv-basicstudies",
	"MACD@tv-basicstudies"
	]
	});

	// Initialize Feather Icons
	feather.replace();

	// Real-time Market Data Simulation
	class MarketDataSimulator {
	constructor() {
	this.symbols = ['EUR/USD', 'GBP/USD', 'USD/JPY', 'XAU/USD', 'BTC/USD'];
	this.prices = {
	'EUR/USD': 1.08745,
	'GBP/USD': 1.26530,
	'USD/JPY': 148.25,
	'XAU/USD': 1987.45,
	'BTC/USD': 42500.50
	};
	this.volatility = {
	'EUR/USD': 0.0002,
	'GBP/USD': 0.0003,
	'USD/JPY': 0.15,
	'XAU/USD': 2.5,
	'BTC/USD': 150
	};
	}

	updatePrice(symbol) {
	const change = (Math.random() - 0.5) * this.volatility[symbol];
	this.prices[symbol] += change;
	return this.prices[symbol];
	}

	getSpread(symbol) {
	const spreads = {
	'EUR/USD': 0.6,
	'GBP/USD': 0.8,
	'USD/JPY': 0.9,
	'XAU/USD': 0.5,
	'BTC/USD': 25
	};
	return spreads[symbol];
	}
	}

	// Advanced Portfolio Manager
	class PortfolioManager {
	constructor() {
	this.balance = 25847.32;
	this.equity = 25847.32;
	this.margin = 7456.17;
	this.positions = [
	{ symbol: 'EUR/USD', type: 'BUY', volume: 0.1, openPrice: 1.08620, currentPrice: 1.08745, profit: 12.50 },
	{ symbol: 'GBP/USD', type: 'SELL', volume: 0.05, openPrice: 1.26780, currentPrice: 1.26530, profit: -8.30 },
	{ symbol: 'XAU/USD', type: 'BUY', volume: 0.01, openPrice: 1980.25, currentPrice: 1987.45, profit: 72.00 }
	];
	}

	updatePortfolio() {
	let totalProfit = 0;
	this.positions.forEach(position => {
	const priceChange = (Math.random() - 0.5) * position.volume * 100;
	position.profit += priceChange;
	totalProfit += position.profit;
	});

	this.equity = this.balance + totalProfit;
	this.margin = this.equity * 0.3; // 30% margin usage

	return {
	equity: this.equity,
	profit: totalProfit,
	marginLevel: ((this.equity / this.margin) * 100).toFixed(1)
	};
	}
	}

	const marketData = new MarketDataSimulator();
	const portfolio = new PortfolioManager();

	// Initialize Real-time Charts
	function initializeCharts() {
	// Equity Curve Chart
	const equityCtx = document.createElement('canvas');
	equityCtx.className = 'w-full h-full';
	document.querySelector('.chart-container').appendChild(equityCtx);

	new Chart(equityCtx, {
	type: 'line',
	data: {
	labels: Array.from({length: 24}, (_, i) => `${i}:00`),
	datasets: [{
	label: 'Equity',
	data: Array.from({length: 24}, () => Math.random() * 1000 + 25000),
	borderColor: '#10b981',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	tension: 0.4,
	fill: true
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: { legend: { display: false } },
	scales: {
	y: {
	grid: { color: 'rgba(255,255,255,0.1)' },
	ticks: { color: '#9ca3af' }
	},
	x: {
	grid: { color: 'rgba(255,255,255,0.1)' },
	ticks: { color: '#9ca3af' }
	}
	}
	}
	});
	}

	// Real-time Data Updates
	setInterval(() => {
	// Update portfolio values
	const portfolioData = portfolio.updatePortfolio();
	document.querySelector('.text-2xl.font-bold').textContent = `${portfolioData.equity.toFixed(2)}`;

	const changeElement = document.querySelector('.text-sm');
	const dailyChange = portfolioData.profit;
	const changePercent = (dailyChange / portfolio.balance * 100).toFixed(2);
	changeElement.textContent = `${dailyChange >= 0 ? '+' : ''}${dailyChange.toFixed(2)} (${dailyChange >= 0 ? '+' : ''}${changePercent}%) Today`;
	changeElement.className = `text-sm ${dailyChange >= 0 ? 'text-green-500' : 'text-red-500'}`;

	// Update account summary
	document.querySelectorAll('.font-mono')[0].textContent = `${portfolio.balance.toFixed(2)}`;
	document.querySelectorAll('.font-mono')[1].textContent = `${portfolioData.equity.toFixed(2)}`;
	document.querySelectorAll('.font-mono')[2].textContent = `${portfolioData.margin.toFixed(2)}`;
	document.querySelectorAll('.font-mono')[3].textContent = `${portfolioData.marginLevel}%`;

	// Update EA performance
	const eaProfits = document.querySelectorAll('.text-green-500.font-mono');
	eaProfits.forEach((element, index) => {
	const change = (Math.random() - 0.3) * 50;
	const current = parseFloat(element.textContent.replace('+</body>
	</html>
	, '').replace('-</body>
	</html>
	, ''));
	const newValue = Math.max(-500, Math.min(500, current + change));
	element.textContent = `${newValue >= 0 ? '+' : '-'}${Math.abs(newValue).toFixed(2)}`;
	element.className = `font-mono ${newValue >= 0 ? 'text-green-500' : 'text-red-500'}`;
	});

	// Update open positions
	const positionElements = document.querySelectorAll('.bg-gray-800\\/50');
	portfolio.positions.forEach((position, index) => {
	if (positionElements[index]) {
	const priceChange = (Math.random() - 0.5) * position.volume * 10;
	position.profit += priceChange;

	const profitElement = positionElements[index].querySelector('.font-mono');
	profitElement.textContent = `${position.profit >= 0 ? '+' : ''}${position.profit.toFixed(2)}`;
	profitElement.className = `font-mono ${position.profit >= 0 ? 'text-green-500' : 'text-red-500'}`;
	}
	});

	}, 2000);

	// Initialize everything when DOM is loaded
	document.addEventListener('DOMContentLoaded', function() {
	initializeCharts();

	// Add advanced tooltips
	const tooltips = document.querySelectorAll('[data-tooltip]');
	tooltips.forEach(element => {
	element.addEventListener('mouseenter', function(e) {
	const tooltip = document.createElement('div');
	tooltip.className = 'absolute z-50 px-3 py-2 text-sm bg-gray-900 rounded-lg shadow-lg';
	tooltip.textContent = this.getAttribute('data-tooltip');
	tooltip.style.left = e.pageX + 'px';
	tooltip.style.top = (e.pageY - 40) + 'px';
	document.body.appendChild(tooltip);

	this._tooltip = tooltip;
	});

	element.addEventListener('mouseleave', function() {
	if (this._tooltip) {
	this._tooltip.remove();
	}
	});
	});

	// Market news ticker
	const news = [
	"ECB maintains interest rates at 4.5%",
	"US Non-Farm Payrolls exceed expectations",
	"Gold reaches 2-month high amid geopolitical tensions",
	"Bitcoin volatility increases ahead of halving",
	"UK inflation data shows unexpected decline"
	];

	setInterval(() => {
	const randomNews = news[Math.floor(Math.random() * news.length)];
	console.log(`Market News: ${randomNews}`);
	}, 10000);
	});

	// Risk Management Alerts
	setInterval(() => {
	const marginLevel = parseFloat(document.querySelectorAll('.font-mono')[3].textContent);
	if (marginLevel < 100) {
	// Show warning alert
	if (!document.getElementById('margin-alert')) {
	const alert = document.createElement('div');
	alert.id = 'margin-alert';
	alert.className = 'fixed top-4 right-4 bg-red-500 text-white p-4 rounded-lg shadow-lg z-50';
	alert.innerHTML = `
	<div class="flex items-center space-x-2">
	<i data-feather="alert-triangle" class="w-5 h-5"></i>
	<span>Margin Level Critical: ${marginLevel}%</span>
	<button onclick="this.parentElement.parentElement.remove()" class="ml-4">×</button>
	</div>
	`;
	document.body.appendChild(alert);
	feather.replace();
	}
	}
	}, 5000);
	</script>
	</body>
	</html>