Spaces:

jsonet
/

desarrolle-e-implemente-completamente-un

Running

desarrolle-e-implemente-completamente-un / signals.html

Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia y futurista de máximo rendimiento, full responsive para todo tipo de dispositivos, implementando el código en diferentes paginas independientes interconectadas, para la aplicación detallada en los siguientes diagramas, cumpliendo con los siguientes requisitos técnicos y de diseño:

0cec5eb verified 6 months ago

raw

history blame contribute delete

20.6 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>Señales - QuantumTrading Nexus</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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

	* {
	font-family: 'Inter', sans-serif;
	}

	.dark {
	background: #0a0a0a;
	}

	.gradient-bg {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.glass-effect {
	background: rgba(17, 25, 40, 0.75);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.125);
	}

	.neon-glow {
	box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
	0 0 40px rgba(102, 126, 234, 0.3),
	0 0 60px rgba(102, 126, 234, 0.1);
	}

	.cyber-grid {
	background-image:
	linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
	linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	}

	.pulse-animation {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}

	.hover-scale {
	transition: transform 0.3s ease;
	}

	.hover-scale:hover {
	transform: scale(1.05);
	}

	.text-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	}

	::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	}

	::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 4px;
	}
	</style>
	</head>
	<body class="bg-gray-950 text-gray-100 min-h-screen cyber-grid">
	<!-- Navigation Header -->
	<nav class="glass-effect fixed top-0 w-full z-50 px-6 py-4">
	<div class="max-w-7xl mx-auto flex justify-between items-center">
	<div class="flex items-center space-x-4">
	<div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center">
	<i data-feather="trending-up" class="w-6 h-6 text-white"></i>
	</div>
	<h1 class="text-2xl font-bold text-gradient">QuantumTrading Nexus</h1>
	</div>

	<div class="hidden md:flex items-center space-x-6">
	<a href="index.html" class="text-gray-300 hover:text-white transition-colors">Dashboard</a>
	<a href="signals.html" class="text-white">Señales</a>
	<a href="strategies.html" class="text-gray-300 hover:text-white transition-colors">Estrategias</a>
	<a href="analytics.html" class="text-gray-300 hover:text-white transition-colors">Análisis</a>
	<a href="settings.html" class="text-gray-300 hover:text-white transition-colors">Configuración</a>
	</div>

	<div class="flex items-center space-x-4">
	<button class="relative p-2 glass-effect rounded-lg hover-scale">
	<i data-feather="bell" class="w-5 h-5"></i>
	<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full pulse-animation"></span>
	</button>
	<button class="p-2 glass-effect rounded-lg hover-scale">
	<i data-feather="settings" class="w-5 h-5"></i>
	</button>
	<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500"></div>
	</div>
	</div>
	</nav>

	<!-- Main Content -->
	<main class="pt-20 px-6 pb-10">
	<div class="max-w-7xl mx-auto">
	<!-- Page Header -->
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
	<div>
	<h1 class="text-3xl font-bold mb-2">Centro de Señales</h1>
	<p class="text-gray-400">Monitoreo y gestión de señales de trading en tiempo real</p>
	</div>
	<div class="flex space-x-3 mt-4 md:mt-0">
	<button class="px-4 py-2 glass-effect rounded-lg hover-scale flex items-center space-x-2">
	<i data-feather="filter" class="w-4 h-4"></i>
	<span>Filtrar</span>
	</button>
	<button class="px-4 py-2 gradient-bg rounded-lg hover-scale flex items-center space-x-2">
	<i data-feather="plus" class="w-4 h-4"></i>
	<span>Nueva Señal</span>
	</button>
	</div>
	</div>

	<!-- Signal Statistics -->
	<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
	<div class="glass-effect rounded-xl p-4">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm">Señales Hoy</p>
	<p class="text-2xl font-bold">127</p>
	</div>
	<div class="p-3 bg-blue-500/20 rounded-lg">
	<i data-feather="zap" class="w-6 h-6 text-blue-400"></i>
	</div>
	</div>
	</div>

	<div class="glass-effect rounded-xl p-4">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm">Tasa de Éxito</p>
	<p class="text-2xl font-bold">94.7%</p>
	</div>
	<div class="p-3 bg-green-500/20 rounded-lg">
	<i data-feather="check-circle" class="w-6 h-6 text-green-400"></i>
	</div>
	</div>
	</div>

	<div class="glass-effect rounded-xl p-4">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm">Prom. Confianza</p>
	<p class="text-2xl font-bold">89.3%</p>
	</div>
	<div class="p-3 bg-purple-500/20 rounded-lg">
	<i data-feather="target" class="w-6 h-6 text-purple-400"></i>
	</div>
	</div>
	</div>

	<div class="glass-effect rounded-xl p-4">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm">P&L del Día</p>
	<p class="text-2xl font-bold text-green-400">+$2,847</p>
	</div>
	<div class="p-3 bg-orange-500/20 rounded-lg">
	<i data-feather="trending-up" class="w-6 h-6 text-orange-400"></i>
	</div>
	</div>
	</div>
	</div>

	<!-- Active Signals -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
	<div class="lg:col-span-2">
	<div class="glass-effect rounded-xl p-6">
	<h2 class="text-xl font-semibold mb-4">Señales Activas</h2>
	<div class="space-y-4" id="activeSignals">
	<!-- Dynamic signals will be inserted here -->
	</div>
	</div>
	</div>

	<!-- Signal Performance Chart -->
	<div class="glass-effect rounded-xl p-6">
	<h2 class="text-xl font-semibold mb-4">Rendimiento por Hora</h2>
	<canvas id="performanceChart" width="400" height="200"></canvas>
	</div>
	</div>

	<!-- Signal History -->
	<div class="glass-effect rounded-xl p-6">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-xl font-semibold">Historial de Señales</h2>
	<div class="flex space-x-2">
	<select class="glass-effect rounded-lg px-3 py-2 text-sm bg-transparent outline-none">
	<option>Todos los Símbolos</option>
	<option>EURUSD</option>
	<option>GBPUSD</option>
	<option>USDJPY</option>
	</select>
	<select class="glass-effect rounded-lg px-3 py-2 text-sm bg-transparent outline-none">
	<option>Últimas 24h</option>
	<option>Últimos 7 días</option>
	<option>Últimos 30 días</option>
	</select>
	</div>
	</div>

	<div class="overflow-x-auto">
	<table class="w-full">
	<thead>
	<tr class="border-b border-gray-800">
	<th class="text-left py-3 px-4 text-gray-400 font-medium">ID</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Símbolo</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Tipo</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Entrada</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Salida</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">P&L</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Confianza</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Estado</th>
	<th class="text-left py-3 px-4 text-gray-400 font-medium">Tiempo</th>
	</tr>
	</thead>
	<tbody id="signalHistory">
	<!-- Dynamic content -->
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</main>

	<script>
	// Initialize Feather Icons
	feather.replace();

	// Generate active signals
	const activeSignals = [
	{ symbol: 'EURUSD', type: 'BUY', price: 1.0845, target: 1.0895, stop: 1.0815, confidence: 92, pl: '+$125', time: '2 min' },
	{ symbol: 'GBPUSD', type: 'SELL', price: 1.2723, target: 1.2673, stop: 1.2753, confidence: 88, pl: '+$87', time: '5 min' },
	{ symbol: 'USDJPY', type: 'BUY', price: 148.56, target: 149.06, stop: 148.26, confidence: 95, pl: '+$203', time: '8 min' },
	{ symbol: 'AUDUSD', type: 'SELL', price: 0.6543, target: 0.6493, stop: 0.6573, confidence: 76, pl: '-$45', time: '12 min' }
	];

	const activeSignalsContainer = document.getElementById('activeSignals');
	activeSignals.forEach((signal, index) => {
	const signalCard = document.createElement('div');
	signalCard.className = 'glass-effect rounded-lg p-4 hover-scale';
	signalCard.style.animationDelay = `${index * 0.1}s`;
	signalCard.classList.add('fade-in');

	const typeColor = signal.type === 'BUY' ? 'text-green-400 bg-green-500/20' : 'text-red-400 bg-red-500/20';
	const plColor = signal.pl.startsWith('+') ? 'text-green-400' : 'text-red-400';

	signalCard.innerHTML = `
	<div class="flex items-center justify-between mb-3">
	<div class="flex items-center space-x-3">
	<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
	<span class="text-sm font-bold">${signal.symbol.substring(0, 3)}</span>
	</div>
	<div>
	<h3 class="font-semibold">${signal.symbol}</h3>
	<p class="text-xs text-gray-400">ID: #${Math.floor(Math.random() * 10000)}</p>
	</div>
	</div>
	<span class="px-3 py-1 text-xs rounded-full ${typeColor}">${signal.type}</span>
	</div>

	<div class="grid grid-cols-3 gap-3 mb-3">
	<div>
	<p class="text-xs text-gray-400">Entrada</p>
	<p class="font-mono font-semibold">${signal.price}</p>
	</div>
	<div>
	<p class="text-xs text-gray-400">Objetivo</p>
	<p class="font-mono font-semibold">${signal.target}</p>
	</div>
	<div>
	<p class="text-xs text-gray-400">Stop Loss</p>
	<p class="font-mono font-semibold">${signal.stop}</p>
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-4">
	<div>
	<p class="text-xs text-gray-400">Confianza</p>
	<div class="flex items-center space-x-2">
	<div class="w-20 bg-gray-800 rounded-full h-2">
	<div class="h-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: ${signal.confidence}%"></div>
	</div>
	<span class="text-sm">${signal.confidence}%</span>
	</div>
	</div>
	<div>
	<p class="text-xs text-gray-400">P&L</p>
	<p class="font-semibold ${plColor}">${signal.pl}</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<button class="p-2 glass-effect rounded-lg hover-scale">
	<i data-feather="eye" class="w-4 h-4"></i>
	</button>
	<button class="p-2 glass-effect rounded-lg hover-scale">
	<i data-feather="x-circle" class="w-4 h-4"></i>
	</button>
	</div>
	</div>
	`;

	activeSignalsContainer.appendChild(signalCard);
	});

	// Performance Chart
	const ctx = document.getElementById('performanceChart').getContext('2d');
	const performanceChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
	datasets: [{
	label: 'Señales Exitosas',
	data: [12, 19, 15, 25, 22, 30],
	borderColor: '#10b981',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	tension: 0.4
	}, {
	label: 'Señales Fallidas',
	data: [3, 5, 2, 3, 4, 2],
	borderColor: '#ef4444',
	backgroundColor: 'rgba(239, 68, 68, 0.1)',
	tension: 0.4
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	display: true,
	labels: { color: '#9ca3af' }
	}
	},
	scales: {
	x: {
	grid: { color: 'rgba(255, 255, 255, 0.05)' },
	ticks: { color: '#9ca3af' }
	},
	y: {
	grid: { color: 'rgba(255, 255, 255, 0.05)' },
	ticks: { color: '#9ca3af' }
	}
	}
	}
	});

	// Generate signal history
	const signalHistory = [
	{ id: '#8472', symbol: 'EURUSD', type: 'BUY', entry: 1.0832, exit: 1.0856, pl: '+$240', confidence: 91, status: 'CLOSED', time: '15 min ago' },
	{ id: '#8471', symbol: 'GBPUSD', type: 'SELL', entry: 1.2745, exit: 1.2723, pl: '+$220', confidence: 87, status: 'CLOSED', time: '22 min ago' },
	{ id: '#8470', symbol: 'USDJPY', type: 'BUY', entry: 148.32, exit: 148.15, pl: '-$170', confidence: 78, status: 'CLOSED', time: '35 min ago' },
	{ id: '#8469', symbol: 'AUDUSD', type: 'SELL', entry: 0.6567, exit: 0.6543, pl: '+$240', confidence: 83, status: 'CLOSED', time: '48 min ago' },
	{ id: '#8468', symbol: 'USDCAD', type: 'BUY', entry: 1.3654, exit: 1.3678, pl: '+$240', confidence: 89, status: 'CLOSED', time: '1 hour ago' }
	];

	const historyTable = document.getElementById('signalHistory');
	signalHistory.forEach(signal => {
	const row = document.createElement('tr');
	row.className = 'border-b border-gray-800 hover:bg-gray-900/50 transition-colors';

	const typeColor = signal.type === 'BUY' ? 'text-green-400' : 'text-red-400';
	const plColor = signal.pl.startsWith('+') ? 'text-green-400' : 'text-red-400';
	const statusColor = signal.status === 'CLOSED' ? 'bg-blue-500/20 text-blue-400' : 'bg-yellow-500/20 text-yellow-400';

	row.innerHTML = `
	<td class="py-3 px-4 font-mono text-sm">${signal.id}</td>
	<td class="py-3 px-4 font-semibold">${signal.symbol}</td>
	<td class="py-3 px-4">
	<span class="${typeColor} font-medium">${signal.type}</span>
	</td>
	<td class="py-3 px-4 font-mono">${signal.entry}</td>
	<td class="py-3 px-4 font-mono">${signal.exit}</td>
	<td class="py-3 px-4">
	<span class="${plColor} font-semibold">${signal.pl}</span>
	</td>
	<td class="py-3 px-4">
	<div class="flex items-center space-x-2">
	<div class="w-16 bg-gray-800 rounded-full h-2">
	<div class="h-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: ${signal.confidence}%"></div>
	</div>
	<span class="text-sm">${signal.confidence}%</span>
	</div>
	</td>
	<td class="py-3 px-4">
	<span class="px-2 py-1 text-xs rounded-full ${statusColor}">${signal.status}</span>
	</td>
	<td class="py-3 px-4 text-gray-400 text-sm">${signal.time}</td>
	`;

	historyTable.appendChild(row);
	});

	// Add animations
	anime({
	targets: '.fade-in',
	translateY: [20, 0],
	opacity: [0, 1],
	delay: anime.stagger(100),
	duration: 600,
	easing: 'easeOutQuad'
	});
	</script>
	</body>
	</html>