Hugging Face's logo

Spaces:
Abel222
/
fx
Running

App Files Community
fx / index.html
Abel222's picture
Abel222
Use https://twelvedata.com API key cc9af226f2dd41b9af948da524333bd5 for real time data - Initial Deployment
c1b01fe verified
Raw
History Blame Contribute Delete
44.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Forex Signal Dashboard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://s3.tradingview.com/tv.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .tradingview-widget-container {
 height: 500px;
 }
 .signal-card.buy {
 border-left: 4px solid #10B981;
 }
 .signal-card.sell {
 border-left: 4px solid #EF4444;
 }
 .chart-container {
 height: 500px;
 position: relative;
 }
 .auth-container {
 background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
 }
 .blurred {
 filter: blur(5px);
 pointer-events: none;
 }
 </style>
</head>
<body class="bg-gray-100">
 <!-- Auth Modal -->
 <div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center auth-container">
 <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold text-gray-800">Welcome to Forex Signals</h2>
 <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="tabs flex mb-6 border-b">
 <button id="loginTab" class="tab-btn active px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600">Login</button>
 <button id="signupTab" class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700">Sign Up</button>
 </div>
<div id="loginForm" class="auth-form">
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="loginEmail">Email</label>
 <input type="email" id="loginEmail" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 mb-2" for="loginPassword">Password</label>
 <input type="password" id="loginPassword" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <button id="loginBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">Login</button>
<div class="mt-4 text-center">
 <p class="text-gray-600">Or login with</p>
 <div class="flex justify-center mt-2 space-x-4">
 <button class="p-2 bg-red-100 rounded-full text-red-600 hover:bg-red-200">
 <i class="fab fa-google"></i>
 </button>
 <button class="p-2 bg-gray-100 rounded-full text-gray-800 hover:bg-gray-200">
 <i class="fab fa-apple"></i>
 </button>
 </div>
 </div>
 </div>
<div id="signupForm" class="auth-form hidden">
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="signupName">Full Name</label>
 <input type="text" id="signupName" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="signupEmail">Email</label>
 <input type="email" id="signupEmail" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 mb-2" for="signupPassword">Password</label>
 <input type="password" id="signupPassword" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 mb-2">Preferred Currency Pairs</label>
 <div class="flex flex-wrap gap-2">
 <label class="inline-flex items-center">
 <input type="checkbox" class="form-checkbox text-blue-600" value="EUR/USD">
 <span class="ml-2">EUR/USD</span>
 </label>
 <label class="inline-flex items-center">
 <input type="checkbox" class="form-checkbox text-blue-600" value="GBP/USD">
 <span class="ml-2">GBP/USD</span>
 </label>
 <label class="inline-flex items-center">
 <input type="checkbox" class="form-checkbox text-blue-600" value="USD/JPY">
 <span class="ml-2">USD/JPY</span>
 </label>
 <label class="inline-flex items-center">
 <input type="checkbox" class="form-checkbox text-blue-600" value="AUD/USD">
 <span class="ml-2">AUD/USD</span>
 </label>
 <label class="inline-flex items-center">
 <input type="checkbox" class="form-checkbox text-blue-600" value="XAU/USD">
 <span class="ml-2">XAU/USD</span>
 </label>
 </div>
 </div>
 <button id="signupBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">Sign Up</button>
 </div>
 </div>
 </div>
<!-- Main App -->
 <div id="appContainer" class="blurred">
 <!-- Header -->
 <header class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between items-center py-4">
 <div class="flex items-center">
 <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">FS</div>
 <h1 class="ml-3 text-xl font-semibold text-gray-900">Forex Signals</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button id="notificationBtn" class="relative p-2 text-gray-500 hover:text-gray-700">
 <i class="fas fa-bell"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 <div class="relative">
 <button id="userMenuBtn" class="flex items-center space-x-2 focus:outline-none">
 <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
 <i class="fas fa-user"></i>
 </div>
 <span class="hidden md:inline text-gray-700">User</span>
 </button>
 <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
 <a href="#" id="logoutBtn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Left Column - Signals -->
 <div class="lg:col-span-1 space-y-4">
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold">Active Signals</h2>
 <button class="text-blue-600 hover:text-blue-800">
 <i class="fas fa-sync-alt"></i>
 </button>
 </div>
 <div id="activeSignals" class="space-y-3">
 <!-- Signal cards will be added here by JavaScript -->
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-4">
 <h2 class="text-lg font-semibold mb-4">Signal History</h2>
 <div id="signalHistory" class="space-y-3">
 <!-- History cards will be added here by JavaScript -->
 </div>
 </div>
 </div>
<!-- Right Column - Chart and Details -->
 <div class="lg:col-span-2 space-y-4">
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold">Market Analysis</h2>
 <div class="flex space-x-2">
 <select id="timeframeSelect" class="border rounded px-2 py-1 text-sm">
 <option value="1">1m</option>
 <option value="5">5m</option>
 <option value="15">15m</option>
 <option value="60">1h</option>
 <option value="240" selected>4h</option>
 <option value="1D">1D</option>
 </select>
 <select id="pairSelect" class="border rounded px-2 py-1 text-sm">
 <option value="XAUUSDT">XAU/USDT</option>
 <option value="EURUSD">EUR/USD</option>
 <option value="GBPUSD">GBP/USD</option>
 <option value="USDJPY">USD/JPY</option>
 <option value="AUDUSD">AUD/USD</option>
 <option value="USDCAD">USD/CAD</option>
 <option value="XAUUSD">XAU/USD</option>
 </select>
 </div>
 </div>
 <div class="chart-container">
 <div id="tradingview-chart"></div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-4">
 <h2 class="text-lg font-semibold mb-4">Signal Details</h2>
 <div id="signalDetails" class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <h3 class="font-medium text-gray-700 mb-2">ICT Analysis</h3>
 <p class="text-gray-600">This signal is based on ICT concepts including FVG, liquidity grabs, and market structure shifts.</p>
 </div>
 <div>
 <h3 class="font-medium text-gray-700 mb-2">Key Levels</h3>
 <div class="space-y-2">
 <div class="flex justify-between">
 <span class="text-gray-600">Entry:</span>
 <span class="font-medium" id="detailEntry">1.0850</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">Stop Loss:</span>
 <span class="font-medium text-red-500" id="detailSL">1.0820</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">Take Profit 1:</span>
 <span class="font-medium text-green-500" id="detailTP1">1.0880</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">Take Profit 2:</span>
 <span class="font-medium text-green-500" id="detailTP2">1.0920</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Admin Panel (hidden by default) -->
 <div id="adminPanel" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
 <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold">Admin Panel</h2>
 <button id="closeAdminPanel" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <h3 class="text-lg font-semibold mb-3">Create New Signal</h3>
 <form id="signalForm" class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <label class="block text-gray-700 mb-1">Currency Pair</label>
 <select id="signalPair" class="w-full border rounded px-3 py-2">
 <option value="EUR/USD">EUR/USD</option>
 <option value="GBP/USD">GBP/USD</option>
 <option value="USD/JPY">USD/JPY</option>
 <option value="AUD/USD">AUD/USD</option>
 <option value="XAU/USD">XAU/USD</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Direction</label>
 <select id="signalDirection" class="w-full border rounded px-3 py-2">
 <option value="buy">Buy</option>
 <option value="sell">Sell</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Entry Price</label>
 <input type="number" step="0.0001" id="signalEntry" class="w-full border rounded px-3 py-2">
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Stop Loss</label>
 <input type="number" step="0.0001" id="signalSL" class="w-full border rounded px-3 py-2">
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Take Profit 1</label>
 <input type="number" step="0.0001" id="signalTP1" class="w-full border rounded px-3 py-2">
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Take Profit 2</label>
 <input type="number" step="0.0001" id="signalTP2" class="w-full border rounded px-3 py-2">
 </div>
 <div class="md:col-span-2">
 <label class="block text-gray-700 mb-1">Analysis Notes</label>
 <textarea id="signalNotes" rows="3" class="w-full border rounded px-3 py-2"></textarea>
 </div>
 <div class="md:col-span-2 flex justify-end space-x-3">
 <button type="button" id="cancelSignal" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-100">Cancel</button>
 <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Publish Signal</button>
 </div>
 </form>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-3">Manage Signals</h3>
 <div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pair</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Direction</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 </tr>
 </thead>
 <tbody id="adminSignalList" class="bg-white divide-y divide-gray-200">
 <!-- Admin signal list will be populated here -->
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Sample data
 const activeSignals = [
 {
 id: 1,
 pair: 'XAU/USDT',
 direction: 'buy',
 entry: 2035.50,
 sl: 2020.00,
 tp1: 2050.00,
 tp2: 2075.00,
 timestamp: new Date(),
 notes: 'Bullish engulfing pattern at key support level with RSI divergence'
 },
 {
 id: 2,
 pair: 'EUR/USD',
 direction: 'buy',
 entry: 1.0850,
 sl: 1.0820,
 tp1: 1.0880,
 tp2: 1.0920,
 timestamp: new Date(),
 notes: 'ICT FVG with liquidity grab below previous low'
 },
 {
 id: 3,
 pair: 'GBP/USD',
 direction: 'sell',
 entry: 1.2650,
 sl: 1.2685,
 tp1: 1.2600,
 tp2: 1.2550,
 timestamp: new Date(Date.now() - 3600000),
 notes: 'Bearish order block with premium array'
 }
 ];
 const signalHistory = [
 {
 id: 3,
 pair: 'USD/JPY',
 direction: 'buy',
 entry: 150.80,
 sl: 150.50,
 tp1: 151.20,
 tp2: 151.80,
 timestamp: new Date(Date.now() - 86400000),
 closedAt: new Date(Date.now() - 82800000),
 outcome: 'win',
 closedPrice: 151.25,
 notes: 'Liquidity sweep of previous low'
 },
 {
 id: 4,
 pair: 'AUD/USD',
 direction: 'sell',
 entry: 0.6580,
 sl: 0.6610,
 tp1: 0.6550,
 tp2: 0.6520,
 timestamp: new Date(Date.now() - 172800000),
 closedAt: new Date(Date.now() - 169200000),
 outcome: 'loss',
 closedPrice: 0.6615,
 notes: 'Failed breakdown of support'
 }
 ];
 // DOM Elements
 const authModal = document.getElementById('authModal');
 const appContainer = document.getElementById('appContainer');
 const loginTab = document.getElementById('loginTab');
 const signupTab = document.getElementById('signupTab');
 const loginForm = document.getElementById('loginForm');
 const signupForm = document.getElementById('signupForm');
 const loginBtn = document.getElementById('loginBtn');
 const signupBtn = document.getElementById('signupBtn');
 const closeAuthModal = document.getElementById('closeAuthModal');
 const logoutBtn = document.getElementById('logoutBtn');
 const userMenuBtn = document.getElementById('userMenuBtn');
 const userMenu = document.getElementById('userMenu');
 const adminPanel = document.getElementById('adminPanel');
 const closeAdminPanel = document.getElementById('closeAdminPanel');
 const activeSignalsContainer = document.getElementById('activeSignals');
 const signalHistoryContainer = document.getElementById('signalHistory');
 const pairSelect = document.getElementById('pairSelect');
 const timeframeSelect = document.getElementById('timeframeSelect');
 const signalForm = document.getElementById('signalForm');
 const adminSignalList = document.getElementById('adminSignalList');
 const detailEntry = document.getElementById('detailEntry');
 const detailSL = document.getElementById('detailSL');
 const detailTP1 = document.getElementById('detailTP1');
 const detailTP2 = document.getElementById('detailTP2');
 // Chart variables
 let tvWidget = null;
 // Current user state
 let currentUser = null;
 let isAdmin = false;
 // Initialize the app
 function initApp() {
 // Check if user is logged in (in a real app, this would check localStorage or cookies)
 const loggedIn = localStorage.getItem('forexUserLoggedIn');
if (loggedIn) {
 // Simulate getting user data
 currentUser = {
 name: 'John Doe',
 email: 'john@example.com',
 isAdmin: localStorage.getItem('forexUserIsAdmin') === 'true'
 };
 isAdmin = currentUser.isAdmin;
// Hide auth modal and show app
 authModal.classList.add('hidden');
 appContainer.classList.remove('blurred');
// Load data
 loadSignals();
 initChart();
 } else {
 // Show auth modal
 authModal.classList.remove('hidden');
 appContainer.classList.add('blurred');
 }
// Setup event listeners
 setupEventListeners();
 }
 // Setup all event listeners
 function setupEventListeners() {
 // Auth modal tabs
 loginTab.addEventListener('click', () => {
 loginTab.classList.add('active', 'text-blue-600', 'border-blue-600');
 loginTab.classList.remove('text-gray-500');
 signupTab.classList.add('text-gray-500');
 signupTab.classList.remove('active', 'text-blue-600', 'border-blue-600');
 loginForm.classList.remove('hidden');
 signupForm.classList.add('hidden');
 });
signupTab.addEventListener('click', () => {
 signupTab.classList.add('active', 'text-blue-600', 'border-blue-600');
 signupTab.classList.remove('text-gray-500');
 loginTab.classList.add('text-gray-500');
 loginTab.classList.remove('active', 'text-blue-600', 'border-blue-600');
 signupForm.classList.remove('hidden');
 loginForm.classList.add('hidden');
 });
// Login button
 loginBtn.addEventListener('click', (e) => {
 e.preventDefault();
 const email = document.getElementById('loginEmail').value;
 const password = document.getElementById('loginPassword').value;
// Simple validation
 if (email && password) {
 // In a real app, this would call your authentication API
 currentUser = {
 name: 'John Doe',
 email: email,
 isAdmin: email.includes('admin')
 };
 isAdmin = currentUser.isAdmin;
// Store login state
 localStorage.setItem('forexUserLoggedIn', 'true');
 localStorage.setItem('forexUserIsAdmin', isAdmin.toString());
// Hide auth modal and show app
 authModal.classList.add('hidden');
 appContainer.classList.remove('blurred');
// Load data
 loadSignals();
 initChart();
// Show welcome notification
 showNotification('Welcome back! Signals loaded successfully.');
 } else {
 alert('Please enter both email and password');
 }
 });
// Signup button
 signupBtn.addEventListener('click', (e) => {
 e.preventDefault();
 const name = document.getElementById('signupName').value;
 const email = document.getElementById('signupEmail').value;
 const password = document.getElementById('signupPassword').value;
// Simple validation
 if (name && email && password) {
 // In a real app, this would call your registration API
 currentUser = {
 name: name,
 email: email,
 isAdmin: false
 };
 isAdmin = false;
// Store login state
 localStorage.setItem('forexUserLoggedIn', 'true');
 localStorage.setItem('forexUserIsAdmin', 'false');
// Hide auth modal and show app
 authModal.classList.add('hidden');
 appContainer.classList.remove('blurred');
// Load data
 loadSignals();
 initChart();
// Show welcome notification
 showNotification('Welcome to Forex Signals! Your account has been created.');
 } else {
 alert('Please fill in all fields');
 }
 });
// Close auth modal
 closeAuthModal.addEventListener('click', () => {
 // In a real app, you might not want to allow closing if not logged in
 if (!localStorage.getItem('forexUserLoggedIn')) {
 alert('Please login or sign up to continue');
 } else {
 authModal.classList.add('hidden');
 }
 });
// User menu
 userMenuBtn.addEventListener('click', () => {
 userMenu.classList.toggle('hidden');
// Close when clicking outside
 document.addEventListener('click', (e) => {
 if (!userMenu.contains(e.target) && e.target !== userMenuBtn) {
 userMenu.classList.add('hidden');
 }
 }, { once: true });
 });
// Logout
 logoutBtn.addEventListener('click', () => {
 localStorage.removeItem('forexUserLoggedIn');
 localStorage.removeItem('forexUserIsAdmin');
 currentUser = null;
 isAdmin = false;
// Show auth modal and blur app
 authModal.classList.remove('hidden');
 appContainer.classList.add('blurred');
// Reset forms
 document.getElementById('loginEmail').value = '';
 document.getElementById('loginPassword').value = '';
 document.getElementById('signupName').value = '';
 document.getElementById('signupEmail').value = '';
 document.getElementById('signupPassword').value = '';
// Switch to login tab
 loginTab.click();
 });
// Notification button
 document.getElementById('notificationBtn').addEventListener('click', () => {
 showNotification('You have no new notifications');
 });
// Pair and timeframe select changes
 pairSelect.addEventListener('change', reloadChart);
 timeframeSelect.addEventListener('change', reloadChart);
// Signal form
 signalForm.addEventListener('submit', (e) => {
 e.preventDefault();
 createNewSignal();
 });
document.getElementById('cancelSignal').addEventListener('click', () => {
 signalForm.reset();
 });
// Close admin panel
 closeAdminPanel.addEventListener('click', () => {
 adminPanel.classList.add('hidden');
 });
// Check if user is admin (for demo purposes)
 if (isAdmin) {
 // Add admin button to header
 const header = document.querySelector('header .flex.items-center.space-x-4');
 const adminBtn = document.createElement('button');
 adminBtn.className = 'p-2 text-gray-500 hover:text-gray-700';
 adminBtn.innerHTML = '<i class="fas fa-cog"></i>';
 adminBtn.addEventListener('click', () => {
 adminPanel.classList.remove('hidden');
 loadAdminSignals();
 });
 header.insertBefore(adminBtn, header.firstChild);
 }
 }
 // Load signals into the UI
 function loadSignals() {
 // Clear existing signals
 activeSignalsContainer.innerHTML = '';
 signalHistoryContainer.innerHTML = '';
// Add active signals
 activeSignals.forEach(signal => {
 const signalCard = createSignalCard(signal, false);
 activeSignalsContainer.appendChild(signalCard);
 });
// Add historical signals
 signalHistory.forEach(signal => {
 const historyCard = createSignalCard(signal, true);
 signalHistoryContainer.appendChild(historyCard);
 });
// If there are active signals, show the first one's details
 if (activeSignals.length > 0) {
 showSignalDetails(activeSignals[0]);
 }
 }
 // Create a signal card element
 function createSignalCard(signal, isHistory) {
 const card = document.createElement('div');
 card.className = `signal-card ${signal.direction} bg-white rounded shadow p-3 cursor-pointer hover:shadow-md transition duration-200`;
 card.dataset.id = signal.id;
const directionClass = signal.direction === 'buy' ? 'text-green-500' : 'text-red-500';
 const directionIcon = signal.direction === 'buy' ? 'fa-arrow-up' : 'fa-arrow-down';
let outcomeBadge = '';
 if (isHistory) {
 const outcomeClass = signal.outcome === 'win' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
 outcomeBadge = `<span class="text-xs px-2 py-1 rounded-full ${outcomeClass} ml-2">${signal.outcome}</span>`;
 }
card.innerHTML = `
 <div class="flex justify-between items-start">
 <div>
 <h3 class="font-semibold">${signal.pair}</h3>
 <p class="text-sm text-gray-500">${formatDate(signal.timestamp)}</p>
 </div>
 <div class="flex items-center">
 <i class="fas ${directionIcon} ${directionClass}"></i>
 ${outcomeBadge}
 </div>
 </div>
 <div class="mt-2 grid grid-cols-3 gap-2 text-sm">
 <div>
 <p class="text-gray-500">Entry</p>
 <p>${signal.entry}</p>
 </div>
 <div>
 <p class="text-gray-500">SL</p>
 <p class="text-red-500">${signal.sl}</p>
 </div>
 <div>
 <p class="text-gray-500">TP</p>
 <p class="text-green-500">${signal.tp1}</p>
 </div>
 </div>
 `;
// Add click event to show details
 card.addEventListener('click', () => {
 showSignalDetails(signal);
// Highlight selected card
 document.querySelectorAll('.signal-card').forEach(c => {
 c.classList.remove('ring-2', 'ring-blue-500');
 });
 card.classList.add('ring-2', 'ring-blue-500');
 });
return card;
 }
 // Show signal details in the right panel
 function showSignalDetails(signal) {
 detailEntry.textContent = signal.entry;
 detailSL.textContent = signal.sl;
 detailTP1.textContent = signal.tp1;
 detailTP2.textContent = signal.tp2 || 'N/A';
// Update chart with this pair
 pairSelect.value = signal.pair.replace('/', '');
 reloadChart();
 }
 // Format date for display
 function formatDate(date) {
 return new Date(date).toLocaleString('en-US', {
 month: 'short',
 day: 'numeric',
 hour: '2-digit',
 minute: '2-digit'
 });
 }
 // Initialize TradingView chart
 function initChart() {
 if (tvWidget !== null) {
 tvWidget.remove();
 tvWidget = null;
 }
const widgetOptions = {
 symbol: pairSelect.value,
 interval: timeframeSelect.value,
 theme: 'light',
 container_id: 'tradingview-chart',
 datafeed: new Datafeeds.UDFCompatibleDatafeed(`https://api.twelvedata.com/time_series?symbol=${pairSelect.value}&interval=${timeframeSelect.value}&apikey=cc9af226f2dd41b9af948da524333bd5`),
 library_path: 'https://s3.tradingview.com/tv.js',
 locale: 'en',
 disabled_features: ['header_widget', 'header_compare', 'header_screenshot', 'header_undo_redo', 'header_interval_dialog_button'],
 enabled_features: ['study_templates'],
 charts_storage_url: 'https://saveload.tradingview.com',
 charts_storage_api_version: '1.1',
 client_id: 'tradingview.com',
 user_id: 'public_user_id',
 fullscreen: false,
 autosize: true,
 studies_overrides: {},
 overrides: {
 'paneProperties.background': '#ffffff',
 'paneProperties.vertGridProperties.color': '#f0f0f0',
 'paneProperties.horzGridProperties.color': '#f0f0f0',
 'mainSeriesProperties.candleStyle.upColor': '#388e3c',
 'mainSeriesProperties.candleStyle.downColor': '#d32f2f',
 'mainSeriesProperties.candleStyle.borderUpColor': '#388e3c',
 'mainSeriesProperties.candleStyle.borderDownColor': '#d32f2f',
 'mainSeriesProperties.candleStyle.wickUpColor': '#388e3c',
 'mainSeriesProperties.candleStyle.wickDownColor': '#d32f2f',
 'mainSeriesProperties.priceAxisProperties.autoScale': false,
 'mainSeriesProperties.priceAxisProperties.percentage': false,
 'mainSeriesProperties.priceAxisProperties.log': false
 }
 };
tvWidget = new TradingView.widget(widgetOptions);
tvWidget.onChartReady(() => {
 console.log('Chart has loaded!');
 });
 }
 // Reload chart with new symbol/interval
 function reloadChart() {
 initChart();
 }
 // Show notification
 function showNotification(message) {
 alert(message); // In a real app, you'd use a more elegant notification system
 }
 // Load signals for admin panel
 function loadAdminSignals() {
 adminSignalList.innerHTML = '';
const allSignals = [...activeSignals, ...signalHistory];
allSignals.forEach(signal => {
 const row = document.createElement('tr');
const directionClass = signal.direction === 'buy' ? 'text-green-500' : 'text-red-500';
 const directionText = signal.direction === 'buy' ? 'BUY' : 'SELL';
let statusBadge = '';
 if (signalHistory.find(s => s.id === signal.id)) {
 statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Closed</span>`;
 } else {
 statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Active</span>`;
 }
row.innerHTML = `
 <td class="px-6 py-4 whitespace-nowrap">${signal.pair}</td>
 <td class="px-6 py-4 whitespace-nowrap"><span class="${directionClass}">${directionText}</span></td>
 <td class="px-6 py-4 whitespace-nowrap">${signal.entry}</td>
 <td class="px-6 py-4 whitespace-nowrap">${statusBadge}</td>
 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
 <button class="text-blue-600 hover:text-blue-900 mr-2 edit-signal" data-id="${signal.id}">Edit</button>
 <button class="text-red-600 hover:text-red-900 delete-signal" data-id="${signal.id}">Delete</button>
 </td>
 `;
adminSignalList.appendChild(row);
 });
// Add event listeners to edit/delete buttons
 document.querySelectorAll('.edit-signal').forEach(btn => {
 btn.addEventListener('click', (e) => {
 const signalId = parseInt(e.target.dataset.id);
 editSignal(signalId);
 });
 });
document.querySelectorAll('.delete-signal').forEach(btn => {
 btn.addEventListener('click', (e) => {
 const signalId = parseInt(e.target.dataset.id);
 if (confirm('Are you sure you want to delete this signal?')) {
 deleteSignal(signalId);
 }
 });
 });
 }
 // Edit signal
 function editSignal(signalId) {
 const allSignals = [...activeSignals, ...signalHistory];
 const signal = allSignals.find(s => s.id === signalId);
if (signal) {
 document.getElementById('signalPair').value = signal.pair;
 document.getElementById('signalDirection').value = signal.direction;
 document.getElementById('signalEntry').value = signal.entry;
 document.getElementById('signalSL').value = signal.sl;
 document.getElementById('signalTP1').value = signal.tp1;
 document.getElementById('signalTP2').value = signal.tp2 || '';
 document.getElementById('signalNotes').value = signal.notes;
// Scroll to form
 document.getElementById('signalForm').scrollIntoView();
 }
 }
 // Delete signal
 function deleteSignal(signalId) {
 // In a real app, this would call your API to delete the signal
 console.log(`Signal ${signalId} deleted`);
 showNotification('Signal deleted successfully');
 loadAdminSignals();
 }
 // Create new signal
 function createNewSignal() {
 const pair = document.getElementById('signalPair').value;
 const direction = document.getElementById('signalDirection').value;
 const entry = parseFloat(document.getElementById('signalEntry').value);
 const sl = parseFloat(document.getElementById('signalSL').value);
 const tp1 = parseFloat(document.getElementById('signalTP1').value);
 const tp2 = parseFloat(document.getElementById('signalTP2').value) || null;
 const notes = document.getElementById('signalNotes').value;
// Simple validation
 if (!pair || !direction || isNaN(entry) || isNaN(sl) || isNaN(tp1)) {
 alert('Please fill in all required fields');
 return;
 }
// Create new signal object
 const newSignal = {
 id: Math.max(...activeSignals.map(s => s.id), ...signalHistory.map(s => s.id)) + 1,
 pair,
 direction,
 entry,
 sl,
 tp1,
 tp2,
 timestamp: new Date(),
 notes
 };
// Add to active signals (in a real app, this would call your API)
 activeSignals.push(newSignal);
// Reset form
 signalForm.reset();
// Show success message
 showNotification('New signal published successfully!');
// Reload signals
 loadSignals();
 loadAdminSignals();
 }
 // Initialize the app when DOM is loaded
 document.addEventListener('DOMContentLoaded', initApp);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Abel222/fx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>