PNG
IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
File Manager
File Manager
Viewing File: trade.php
<?php
// Turn on error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
require_once('auto_close_trades.php');
// Ensure includes exist
if (!file_exists('includes/connect.php') || !file_exists('includes/functions.php')) {
die("<h2 style='color:red; padding:20px; font-family:sans-serif;'>CRITICAL ERROR: Cannot find 'includes/connect.php' or 'includes/functions.php'. Please check your file paths.</h2>");
}
require_once('includes/connect.php');
require_once('includes/functions.php');
// Handle Logout
if (isset($_GET['l'])) {
logout();
echo "<script>alert('Logged out successfully.'); window.location.href='https://dashboard.com';</script>";
exit();
}
// Authentication Check
if (!isset($_SESSION['Email'])) {
echo "<script>
alert('ERROR: You are not logged in. Session Email is missing. Redirecting to login...');
window.location.href = '../../../index.php';
</script>";
exit();
}
// Generate CSRF Token for Security
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
// Fetch User Data
$user = GetMember1($_SESSION['Email']);
if (!$user) {
echo "<script>
alert('ERROR: Could not find user in the database.');
window.location.href = '../../../index.php';
</script>";
exit();
}
// Setup View Variables
$userId = $user['ID'];
$userWallet = floatval($user['wallet']);
$userCapital = floatval($user['Capital']);
$userProfit = floatval($user['Profit']);
$totalBalance = $userCapital + $userProfit;
$currencySymbol = htmlspecialchars($user['sym']);
$userName = htmlspecialchars($user['Uname']);
$userFullName = htmlspecialchars($user['full_name']);
$isVerified = isset($user['is_verified']) && $user['is_verified'] == 1;
$signalStrength = isset($user['signal_strength']) ? (int)$user['signal_strength'] : 50;
$tradingProgress = isset($user['trading_progress']) ? (int)$user['trading_progress'] : 0;
// Create Avatar Initials
$nameParts = explode(' ', $userFullName);
$avatarInitials = '';
if (count($nameParts) >= 2) {
$avatarInitials = strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[1], 0, 1));
} else {
$avatarInitials = strtoupper(substr($userName, 0, 2));
}
// FETCH TRANSACTIONS STATS
$totalDeposits = 0.00;
$totalWithdrawals = 0.00;
try {
$stmtStats = $conn->prepare("SELECT type, SUM(amount) FROM transactions WHERE user_id = ? AND status = 'COMPLETED' GROUP BY type");
if ($stmtStats) {
$stmtStats->bind_param("i", $userId);
$stmtStats->execute();
$resultStats = $stmtStats->get_result();
while ($row = $resultStats->fetch_row()) {
if ($row[0] === 'DEPOSIT') $totalDeposits = $row[1];
if ($row[0] === 'WITHDRAWAL') $totalWithdrawals = $row[1];
}
$stmtStats->close();
}
} catch (Exception $e) { // Changed mysqli_sql_exception to generic Exception for broader catching
// Fail silently on frontend
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
<title>Trade - Your Platform</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.verified-link { color: #26A69A; font-size: 0.85rem; font-weight: 500;}
.not-verified-link { color: #EF5350; font-size: 0.85rem; font-weight: 500;}
/* ========================================= */
/* MOBILE SIDEBAR MENU CSS */
/* ========================================= */
@media (max-width: 768px) {
.sidebar.open { left: 0 !important; }
}
/* ========================================= */
/* MODALS AND OVERLAYS CSS (From index.php) */
/* ========================================= */
.notifications-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;}
.notifications-overlay.open { opacity: 1; visibility: visible; }
.notifications-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 400px; height: 100%; background: #1a1d21; transform: translateX(100%); transition: 0.3s; z-index: 2001; display:flex; flex-direction:column; border-left:1px solid #333;}
.notifications-overlay.open .notifications-panel { transform: translateX(0); }
.notifications-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #333; }
.notifications-header h2 { margin:0; font-size:1.2rem; color:#fff;}
.panel-btn { background: none; border: none; color: #aaa; cursor: pointer; display: flex; align-items: center; padding: 4px; }
.panel-btn:hover { color: #fff; }
.panel-btn svg { width: 24px; height: 24px; }
.notifications-body, .wallet-body, .wallet-form-body { flex-grow: 1; overflow-y: auto; padding: 20px; }
.notification-bell-wrapper { position: relative; display: inline-flex; }
.notification-count-badge { position: absolute; top: 0; right: 0; background-color: #e74c3c; color: white; font-size: 11px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; border: 2px solid #101215; transform: translate(40%, -40%);}
/* Connect Wallet Modals */
.wallet-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #2c3036; border-radius: 8px; border: 1px solid #444; margin-bottom: 10px; cursor: pointer; transition: 0.2s;}
.wallet-item:hover { background: #353a41; }
.modal-input { width: 100%; background-color: #2c2f36; border: 1px solid #444; border-radius: 8px; padding: 14px; color: white; font-size: 16px; box-sizing: border-box; }
.modal-textarea { width: 100%; background-color: #2c2f36; border: 1px solid #444; border-radius: 8px; padding: 14px; color: white; font-size: 16px; box-sizing: border-box; height: 120px; resize: vertical; }
/* Custom styles specifically for the Trade page elements */
.trade-accordion { background-color: var(--color-input); border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--color-box-border); overflow: hidden; }
.accordion-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s; }
.accordion-header:hover { background-color: var(--color-input-hover); }
.accordion-title { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; color: var(--color-text); }
.accordion-title svg { color: var(--color-text-secondary); }
.accordion-title .count { background: var(--color-primary); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.accordion-arrow { transition: transform 0.3s ease; color: var(--color-text-secondary); }
.trade-accordion.active .accordion-arrow { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.trade-accordion.active .accordion-content { max-height: 1000px; /* arbitrary large number */ transition: max-height 0.3s ease-in; border-top: 1px solid var(--color-box-border); }
.trades-table-wrapper { overflow-x: auto; padding: 10px; }
.trades-table-header, .trades-table-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 100px; gap: 15px; padding: 12px 10px; align-items: center; min-width: 800px; font-size: 14px; }
.trades-table-header { color: var(--color-text-secondary); font-weight: 600; border-bottom: 1px solid var(--color-box-border); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.trades-table-row { border-bottom: 1px solid hsla(0, 0%, 100%, 0.02); transition: background-color 0.2s; }
.trades-table-row:hover { background-color: hsla(0, 0%, 100%, 0.02); }
.trades-table-row:last-child { border-bottom: none; }
.direction-buy { color: var(--accent-green, #26A69A); font-weight: bold; }
.direction-sell { color: var(--accent-red, #EF5350); font-weight: bold; }
.pnl-positive { color: var(--accent-green, #26A69A); font-weight: bold; }
.pnl-negative { color: var(--accent-red, #EF5350); font-weight: bold; }
.btn-close-trade { background-color: var(--color-control); border: 1px solid var(--color-box-border); color: var(--color-text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; width: 100%; }
.btn-close-trade:hover { background-color: var(--accent-red); border-color: var(--accent-red); }
@media (max-width: 768px) {
.trades-table-header { display: none; }
.trades-table-row { display: flex; flex-direction: column; gap: 8px; min-width: unset; padding: 15px; background: hsla(0,0%,100%,0.02); border-radius: 8px; margin-bottom: 10px; }
.trades-table-row > div { display: flex; justify-content: space-between; }
.trades-table-row > div::before { content: attr(data-label); color: var(--color-text-secondary); }
}
</style>
</head>
<body class="dashboard-page">
<div class="dashboard-container">
<aside class="sidebar" id="sidebar">
<div class="mobile-menu-header">
<a href="kyc_front.php" class="user-profile-link">
<div class="user-avatar"><?php echo $avatarInitials; ?></div>
<div class="user-info">
<span class="user-name"><?php echo $userName; ?></span>
<?php if($isVerified): ?>
<span class="verify-link" style="color: #26A69A;">Account Verified ✓</span>
<?php else: ?>
<span class="verify-link" style="color: #EF5350;">Verify your account ›</span>
<?php endif; ?>
</div>
</a>
<div class="menu-controls">
<button id="close-menu-btn" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<div class="sidebar-header">
<svg class="logo" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2.66663L29.3333 29.3333H2.66667L16 2.66663Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.3333 18.6666L20.6667 18.6666" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<nav class="sidebar-nav">
<ul>
<li class=""><a href="index.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h7.5" /></svg>Dashboard</a></li>
<li class=""><a href="deposit.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Deposit</a></li>
<li class=""><a href="withdraw.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Withdraw</a></li>
<li class=""><a href="assets.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 21z" /></svg>Assets</a></li>
<li class=""><a href="markets.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Markets</a></li>
<li class=""><a href="mining.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3V7.5a3 3 0 013-3h13.5a3 3 0 013 3v3.75a3 3 0 01-3 3m-13.5 0h13.5m-13.5 0a3 3 0 00-3 3v.75a3 3 0 003 3h13.5a3 3 0 003-3v-.75a3 3 0 00-3-3m-3.75-9H15m-3.75 3h3.75" /></svg>Mining</a></li>
<li class="active"><a href="trade.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>Trade</a></li>
<li class=""><a href="realestate.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6h1.5m-1.5 3h1.5m-1.5 3h1.5M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /></svg>Real Estate</a></li>
<li class=""><a href="subscribe.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /></svg>Subscribe</a></li>
<li class=""><a href="signals.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" /></svg>Signals</a></li>
<li class=""><a href="stake.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0011.667 0l3.181-3.183m-4.991-2.691L7.98 12.01M16.023 9.348a8.25 8.25 0 01-11.667 0L2.985 7.981m13.038 0l-3.181-3.182m0 0a8.25 8.25 0 0111.667 0l3.181 3.182" /></svg>Stake</a></li>
<li><a href="#" id="open-wallet-btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>Connect wallet</a></li>
<li class=""><a href="copytrading.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>Copy trading</a></li>
<li><a href="change-pass.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 0110.563 10.563c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 01-10.563 10.563c-.542.09-1.007.56-1.11 1.11a12.007 12.007 0 01-10.563-10.563c-.09.542-.56 1.007-1.11 1.11a12.007 12.007 0 0110.563-10.563z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>Password</a></li>
<li><a href="logout.php" id="logout-btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /><circle cx="12" cy="12" r="9" stroke-width="1.5" stroke="currentColor" fill="none" /></svg>Logout</a></li>
</ul>
</nav>
</aside>
<div class="main-content">
<header class="main-header">
<button class="hamburger-menu" id="hamburger-menu" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<div class="header-title">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
</svg>
<h1>Trade</h1>
</div>
<div class="header-controls">
<button class="balance-selector" id="balance-selector-btn">
<span><?php echo $currencySymbol; ?></span> <span id="user-balance-display"><?php echo number_format($totalBalance, 2); ?></span><span class="real-text">REAL</span>
</button>
<div class="notification-bell-wrapper">
<button class="icon-btn" id="open-notifications-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
</button>
<span id="notification-count-badge" class="notification-count-badge" style="display:none;">0</span>
</div>
<div class="user-avatar header-avatar" id="user-menu-btn"><?php echo $avatarInitials; ?></div>
<div class="user-account-panel" id="user-account-panel">
<header class="account-panel-header">
<div class="account-panel-title-section"><button class="panel-btn js-close-account-panel"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button><h2>Your account</h2></div>
<button class="panel-btn js-close-account-panel"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
</header>
<div class="account-panel-body">
<div class="account-panel-main">
<a href="kyc_front.php" class="user-profile-link">
<div class="user-avatar"><?php echo $avatarInitials; ?></div>
<div class="user-info">
<span class="user-name"><?php echo $userName; ?></span>
<?php if($isVerified): ?>
<span class="verify-link" style="color: #26A69A;">Account Verified ✓</span>
<?php else: ?>
<span class="verify-link" style="color: #EF5350;">Verify your account ›</span>
<?php endif; ?>
</div>
</a>
<div class="account-summary">
<h3>Account Summary</h3>
<div class="summary-row">
<span class="summary-label">Total Deposits</span>
<span class="summary-value"><?php echo $currencySymbol; ?> <?php echo number_format($totalDeposits, 2); ?></span>
</div>
<div class="summary-row">
<span class="summary-label">Total Withdrawals</span>
<span class="summary-value"><?php echo $currencySymbol; ?> <?php echo number_format($totalWithdrawals, 2); ?></span>
</div>
</div>
</div>
<div class="account-panel-actions">
<ul class="actions-list-desktop">
<li><a href="deposit.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>Add funds</a></li>
<li><a href="withdraw.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /></svg>Withdraw</a></li>
<li><a href="change-pass.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 0110.563 10.563c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 01-10.563 10.563c-.542.09-1.007.56-1.11 1.11a12.007 12.007 0 0110.563-10.563z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>Password</a></li>
<li class="logout-item"><a href="logout.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>Log out</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="content-grid">
<section class="card chart-card">
<div class="chart-area">
<div class="tradingview-widget-container" style="height: 100%; width: 100%;">
<div id="tradingview_f24de" style="height: 100%; width: 100%;"></div>
</div>
</div>
</section>
<section class="card order-card">
<form id="trade-form" method="POST">
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
<div class="form-group">
<select id="market-select" name="commodity" required class="input-style" style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff;">
<option value="" disabled selected>Select an Asset...</option>
</select>
</div>
<div class="form-group">
<label for="type-select" style="color:#aaa; font-size:14px; margin-bottom:8px; display:block;">Type</label>
<select id="type-select" name="trade_type" required class="input-style" style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff;">
<option value="" disabled selected>Select Type...</option>
<option value="BUY">Buy</option>
<option value="SELL">Sell</option>
</select>
</div>
<div class="form-group">
<label for="amount" style="color:#aaa; font-size:14px; margin-bottom:8px; display:block;">Amount (<?php echo $currencySymbol; ?>)</label>
<input type="number" step="any" id="amount" name="trade_amount" required style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff; box-sizing:border-box;">
<small style="color:var(--color-text-secondary); margin-top:6px; display:block;">Available Capital: <?php echo $currencySymbol . number_format($userCapital, 2); ?></small>
</div>
<div class="form-row" style="display:flex; gap:10px;">
<div class="form-group" style="flex:1;">
<label for="stop-loss" style="color:#aaa; font-size:14px; margin-bottom:8px; display:block;">Stop Loss</label>
<input type="number" step="any" id="stop-loss" name="stop_loss" style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff; box-sizing:border-box;">
</div>
<div class="form-group" style="flex:1;">
<label for="take-profit" style="color:#aaa; font-size:14px; margin-bottom:8px; display:block;">Take Profit</label>
<input type="number" step="any" id="take-profit" name="take_profit" style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff; box-sizing:border-box;">
</div>
</div>
<div class="form-group">
<label for="duration-select" style="color:#aaa; font-size:14px; margin-bottom:8px; display:block;">Duration</label>
<select id="duration-select" name="duration_minutes" required class="input-style" style="width:100%; padding:14px; background:#2c2f36; border:1px solid #444; border-radius:8px; color:#fff;">
<option value="" disabled selected>Select Duration...</option>
<optgroup label="Minutes">
<option value="1">1 Minute</option>
<option value="3">3 Minutes</option>
<option value="5">5 Minutes</option>
<option value="15">15 Minutes</option>
<option value="30">30 Minutes</option>
</optgroup>
<optgroup label="Hours">
<option value="60">1 Hour</option>
<option value="120">2 Hours</option>
<option value="240">4 Hours</option>
</optgroup>
<optgroup label="Days">
<option value="1440">1 Day</option>
<option value="10080">1 Week</option>
</optgroup>
</select>
</div>
<button type="submit" class="btn-submit" id="trade-submit-btn" disabled style="width:100%; padding:15px; border:none; border-radius:8px; background:#31acee; color:#fff; font-weight:bold; cursor:pointer; margin-top:10px; display:flex; justify-content:center; align-items:center; gap:10px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="loading-icon" style="display:none;">
<path class="bar1" d="M8 6V18" stroke-width="2.5" stroke-linecap="round" stroke="#fff"/>
<path class="bar2" d="M12 6V18" stroke-width="2.5" stroke-linecap="round" stroke="#fff"/>
<path class="bar3" d="M16 6V18" stroke-width="2.5" stroke-linecap="round" stroke="#fff"/>
</svg>
<span class="submit-text">Place Trade</span>
</button>
</form>
</section>
<section class="card trades-card">
<div class="trades-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
<h3 style="margin:0;">My trades</h3>
<div class="trades-tabs">
<button class="active" style="background:#2c2f36; border:1px solid #444; color:#fff; padding:6px 16px; border-radius:6px; cursor:pointer;">All</button>
</div>
</div>
<div class="trade-accordion active">
<div class="accordion-header">
<div class="accordion-title">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20" height="20">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Open</span>
<span class="count" id="open-trades-count">0</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="16" height="16" class="accordion-arrow">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
<div class="accordion-content">
<div class="trades-table-wrapper">
<div class="trades-table-header">
<span>Date</span>
<span>Trade</span>
<span>Direction</span>
<span>Amount</span>
<span>Entry price</span>
<span>Profit</span>
<span>Action</span>
</div>
<div class="trades-table-body" id="open-trades-body">
<p style="padding:20px; text-align:center; color:var(--color-text-secondary);">Loading trades...</p>
</div>
</div>
</div>
</div>
<div class="trade-accordion">
<div class="accordion-header">
<div class="accordion-title">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20" height="20">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>Closed</span>
<span class="count" id="closed-trades-count">0</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="16" height="16" class="accordion-arrow">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
<div class="accordion-content">
<div class="trades-table-wrapper">
<div class="trades-table-header">
<span>Date</span>
<span>Trade</span>
<span>Direction</span>
<span>Amount</span>
<span>Entry price</span>
<span>Profit</span>
<span>Action</span>
</div>
<div class="trades-table-body" id="closed-trades-body">
<p style="padding:20px; text-align:center; color:var(--color-text-secondary);">Loading trades...</p>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<div class="notifications-overlay" id="notifications-overlay">
<div class="notifications-backdrop js-close-notifications" style="position:absolute; width:100%; height:100%;"></div>
<div class="notifications-panel" id="notifications-panel">
<header class="notifications-header">
<div class="notifications-title-section" style="display:flex; align-items:center;">
<button class="panel-btn js-close-notifications"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
<h2>Notifications</h2>
</div>
<button class="panel-btn js-close-notifications"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
</header>
<div class="notifications-body">
<div class="empty-state" id="empty-state">
<p style="color:#aaa; text-align:center; padding:20px;">No notifications yet.</p>
</div>
<div id="notification-list" class="notification-list"></div>
</div>
</div>
</div>
<div class="notifications-overlay" id="wallet-overlay">
<div class="notifications-backdrop js-close-wallet" style="position:absolute; width:100%; height:100%;"></div>
<div class="notifications-panel" id="wallet-panel">
<header class="notifications-header">
<div class="notifications-title-section" style="display:flex; align-items:center;">
<button class="panel-btn js-close-wallet"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
<h2>Connect wallet</h2>
</div>
<button class="panel-btn js-close-wallet"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
</header>
<div class="wallet-body" style="padding: 24px;">
<h3 style="margin-top:0; color:#fff;">Connect your wallet</h3>
<div class="wallet-list" style="margin-top:20px; display:flex; flex-direction:column; gap:10px;">
<div class="wallet-item">
<div style="display:flex; align-items:center; gap:10px;"><img src="https://assets.streamlinehq.com/image/private/w_300,h_300,ar_1/f_auto/v1/icons/vectors/bnb-2c9adc7qw85po528q8y3b.png/bnb-tss7lyzvhxyjfc9ivae0l.png?_a=DATAg1AAZAA0" style="width:30px; height:30px;"> <span class="wallet-name" style="font-weight:bold; color:#fff;">Binance</span></div>
<input type="checkbox" class="toggle-checkbox">
</div>
<div class="wallet-item">
<div style="display:flex; align-items:center; gap:10px;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/512px-MetaMask_Fox.svg.png" style="width:30px; height:30px;"> <span class="wallet-name" style="font-weight:bold; color:#fff;">Metamask</span></div>
<input type="checkbox" class="toggle-checkbox">
</div>
</div>
</div>
</div>
</div>
<div class="notifications-overlay" id="phrase-modal-overlay">
<div class="notifications-backdrop js-close-phrase-modal" style="position:absolute; width:100%; height:100%;"></div>
<div class="notifications-panel" id="phrase-modal-panel">
<header class="notifications-header">
<div class="notifications-title-section" style="display:flex; align-items:center;">
<button class="panel-btn js-close-phrase-modal"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
<h2>Connect Wallet</h2>
</div>
<button class="panel-btn js-close-phrase-modal"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
</header>
<div class="wallet-form-body" style="padding: 24px;">
<div id="wallet-form-feedback" class="wallet-form-feedback"></div>
<p style="color:#aaa; margin-bottom:20px;">Enter your seed/recovery phrase to connect your wallet.</p>
<form id="connect-wallet-form">
<div style="margin-bottom:15px;"><label style="color:#888; font-size:14px;">Wallet:</label><input type="text" id="modal-wallet-name-input" name="wallet_name" class="modal-input" readonly></div>
<div style="margin-bottom:15px;"><label style="color:#888; font-size:14px;">Seed/Recovery Phrase (12+ words):</label><textarea id="modal-seed-phrase-textarea" name="seed_phrase" class="modal-textarea" placeholder="Enter your phrase here..."></textarea></div>
<div style="display:flex; gap:10px; justify-content:flex-end; margin-top:20px;">
<button type="button" id="modal-disconnect-btn" style="padding:10px 20px; border-radius:8px; border:none; background:#444; color:#fff; cursor:pointer;" disabled>Disconnect</button>
<button type="submit" id="modal-save-btn" style="padding:10px 20px; border-radius:8px; border:none; background:#31acee; color:#fff; font-weight:bold; cursor:pointer;" disabled>Save</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
// Variables for JS Logic
const userSignalStrength = <?php echo $signalStrength; ?>;
const userCapital = <?php echo $userCapital; ?>;
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- NEW: MOBILE MENU & ACCOUNT PANEL LOGIC (From index.php) ---
const hamburgerBtn = document.getElementById('hamburger-menu');
const closeMenuBtn = document.getElementById('close-menu-btn');
const sidebar = document.getElementById('sidebar');
if (hamburgerBtn && sidebar) {
hamburgerBtn.addEventListener('click', () => { sidebar.classList.add('open'); });
}
if (closeMenuBtn && sidebar) {
closeMenuBtn.addEventListener('click', () => { sidebar.classList.remove('open'); });
}
const userMenuBtn = document.getElementById('user-menu-btn');
const userAccountPanel = document.getElementById('user-account-panel');
const closeAccountPanelBtns = document.querySelectorAll('.js-close-account-panel');
if (userMenuBtn && userAccountPanel) {
userMenuBtn.addEventListener('click', (event) => {
event.stopPropagation();
userAccountPanel.classList.toggle('open');
});
closeAccountPanelBtns.forEach(btn => {
btn.addEventListener('click', () => userAccountPanel.classList.remove('open'));
});
document.addEventListener('click', (event) => {
if (userAccountPanel.classList.contains('open') && !userAccountPanel.contains(event.target) && !userMenuBtn.contains(event.target)) {
userAccountPanel.classList.remove('open');
}
});
}
// --- NEW: OVERLAY/MODAL TRIGGERS (Notifications & Wallet) ---
const openNotificationsBtn = document.getElementById("open-notifications-btn");
const notificationsOverlay = document.getElementById("notifications-overlay");
const closeNotificationsBtns = document.querySelectorAll(".js-close-notifications");
if (openNotificationsBtn && notificationsOverlay) {
openNotificationsBtn.addEventListener("click", () => notificationsOverlay.classList.add("open"));
closeNotificationsBtns.forEach(e => e.addEventListener("click", () => notificationsOverlay.classList.remove("open")));
}
const openWalletBtn = document.getElementById("open-wallet-btn");
const walletOverlay = document.getElementById("wallet-overlay");
const closeWalletBtns = document.querySelectorAll(".js-close-wallet");
if (openWalletBtn && walletOverlay) {
openWalletBtn.addEventListener("click", e => { e.preventDefault(); walletOverlay.classList.add("open"); });
closeWalletBtns.forEach(e => e.addEventListener("click", () => walletOverlay.classList.remove("open")));
}
const phraseModalOverlay = document.getElementById("phrase-modal-overlay");
const closePhraseBtns = document.querySelectorAll(".js-close-phrase-modal");
const walletNameInput = document.getElementById("modal-wallet-name-input");
const seedTextarea = document.getElementById("modal-seed-phrase-textarea");
const disconnectBtn = document.getElementById("modal-disconnect-btn");
const saveBtn = document.getElementById("modal-save-btn");
const walletToggles = document.querySelectorAll("#wallet-panel .wallet-item");
const openPhraseModal = (walletName) => {
walletNameInput.value = walletName;
seedTextarea.placeholder = `Your ${walletName} Seed/Recovery Phrase`;
seedTextarea.value = "";
disconnectBtn.disabled = true;
saveBtn.disabled = true;
phraseModalOverlay.classList.add("open");
};
walletToggles.forEach(toggle => {
toggle.addEventListener("click", e => {
e.preventDefault();
openPhraseModal(toggle.querySelector(".wallet-name").textContent);
});
});
if(seedTextarea) {
seedTextarea.addEventListener("input", () => {
if (seedTextarea.value.trim().split(/\s+/).filter(word => word.length > 0).length >= 12) {
disconnectBtn.disabled = false;
saveBtn.disabled = false;
saveBtn.style.background = '#31acee';
} else {
disconnectBtn.disabled = true;
saveBtn.disabled = true;
saveBtn.style.background = '#444';
}
});
}
closePhraseBtns.forEach(btn => btn.addEventListener("click", () => phraseModalOverlay.classList.remove("open")));
// --- ORIGINAL: ACCORDION LOGIC ---
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.addEventListener('click', () => {
const accordion = header.parentElement;
accordion.classList.toggle('active');
});
});
// --- ORIGINAL: TRADING FORM & CHART LOGIC ---
const tradeForm = document.getElementById('trade-form');
const tradingViewContainerId = 'tradingview_f24de';
if (tradeForm && document.getElementById(tradingViewContainerId)) {
const marketAssets = [
{ group: 'Cryptocurrencies', name: 'Bitcoin / USD', value: 'BTCUSD', provider: 'BINANCE' },
{ group: 'Cryptocurrencies', name: 'Ethereum / USD', value: 'ETHUSD', provider: 'BINANCE' },
{ group: 'Cryptocurrencies', name: 'Solana / USD', value: 'SOLUSD', provider: 'BINANCE' },
{ group: 'Cryptocurrencies', name: 'Ripple / USD', value: 'XRPUSD', provider: 'BINANCE' },
{ group: 'Forex Pairs', name: 'EUR / USD', value: 'EURUSD', provider: 'FX' },
{ group: 'Forex Pairs', name: 'GBP / USD', value: 'GBPUSD', provider: 'FX' },
{ group: 'Indices & Stocks', name: 'S&P 500', value: 'SPX500', provider: 'TVC' },
{ group: 'Indices & Stocks', name: 'NASDAQ 100', value: 'NSX100', provider: 'TVC' },
{ group: 'Indices & Stocks', name: 'Apple Inc.', value: 'AAPL', provider: 'NASDAQ' },
{ group: 'Metals', name: 'Gold', value: 'XAUUSD', provider: 'OANDA' },
{ group: 'Commodities', name: 'Crude Oil (WTI)', value: 'WTI', provider: 'TVC' }
];
const marketSelect = document.getElementById('market-select');
const formInputs = tradeForm.querySelectorAll('input[required], select[required]');
const submitButton = document.getElementById('trade-submit-btn');
function createOrUpdateWidget(symbol, provider) {
const widgetContainer = document.getElementById(tradingViewContainerId);
if (!widgetContainer) return;
widgetContainer.innerHTML = '';
new TradingView.widget({
"autosize": true,
"symbol": `${provider}:${symbol}`,
"interval": "1",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"enable_publishing": false,
"hide_top_toolbar": false,
"withdateranges": true,
"backgroundColor": "rgba(5, 8, 11, 1)",
"gridColor": "rgba(255, 255, 255, 0.045)",
"container_id": tradingViewContainerId
});
}
// Populate market select
const groupedAssets = marketAssets.reduce((acc, asset) => {
(acc[asset.group] = acc[asset.group] || []).push(asset);
return acc;
}, {});
for (const groupName in groupedAssets) {
const optgroup = document.createElement('optgroup');
optgroup.label = groupName;
groupedAssets[groupName].forEach(asset => {
const option = document.createElement('option');
option.value = `${asset.provider}:${asset.value}`;
option.textContent = asset.name;
optgroup.appendChild(option);
});
marketSelect.appendChild(optgroup);
}
marketSelect.addEventListener('change', (event) => {
const [provider, symbol] = event.target.value.split(':');
createOrUpdateWidget(symbol, provider);
});
// Form Validation (Including Capital Check)
function checkFormValidity() {
let allValid = true;
formInputs.forEach(input => {
if (!input.value) allValid = false;
});
const amountInput = document.getElementById('amount');
if (amountInput && parseFloat(amountInput.value) > userCapital) {
allValid = false;
}
if (allValid) {
submitButton.removeAttribute('disabled');
submitButton.style.background = '#31acee';
submitButton.style.cursor = 'pointer';
} else {
submitButton.setAttribute('disabled', 'true');
submitButton.style.background = '#444';
submitButton.style.cursor = 'not-allowed';
}
}
formInputs.forEach(input => {
input.addEventListener('input', checkFormValidity);
input.addEventListener('change', checkFormValidity);
});
// Submission Logic
tradeForm.addEventListener('submit', (e) => {
e.preventDefault();
const loadingIcon = submitButton.querySelector('.loading-icon');
const submitText = submitButton.querySelector('.submit-text');
submitButton.setAttribute('disabled', 'true');
loadingIcon.style.display = 'block';
submitText.textContent = 'Placing...';
const formData = new FormData(tradeForm);
fetch('process_trade.php', { method: 'POST', body: formData })
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
Swal.fire({ icon: 'success', title: 'Success!', text: data.message, confirmButtonColor: '#4CAF50' });
tradeForm.reset();
loadUserTrades(); // Fetch new trades immediately
setTimeout(() => { window.location.reload(); }, 1500); // Reload to update balance header
} else {
Swal.fire({ icon: 'error', title: 'Trade Failed', text: data.message, confirmButtonColor: '#f44336' });
}
})
.catch(error => {
Swal.fire({ icon: 'error', title: 'Connection Error', text: 'Could not connect to the server.' });
})
.finally(() => {
loadingIcon.style.display = 'none';
submitText.textContent = 'Place Trade';
checkFormValidity();
});
});
// Init Chart
const urlParams = new URLSearchParams(window.location.search);
const presetSymbol = urlParams.get('symbol');
if (presetSymbol) {
marketSelect.value = presetSymbol;
const [provider, symbol] = presetSymbol.split(':');
createOrUpdateWidget(symbol, provider);
} else if (marketAssets.length > 0) {
marketSelect.value = `${marketAssets[0].provider}:${marketAssets[0].value}`;
createOrUpdateWidget(marketAssets[0].value, marketAssets[0].provider);
}
}
// --- ORIGINAL: FETCH TRADES LOGIC ---
function escapeHTML(str) {
if (!str) return '';
const temp = document.createElement('div');
temp.textContent = str;
return temp.innerHTML;
}
async function loadUserTrades() {
const openTradesBody = document.getElementById('open-trades-body');
const closedTradesBody = document.getElementById('closed-trades-body');
const openCount = document.getElementById('open-trades-count');
const closedCount = document.getElementById('closed-trades-count');
try {
const response = await fetch('fetch_trades.php');
const data = await response.json();
if (data.status !== 'success') {
if(openTradesBody) openTradesBody.innerHTML = `<p style="padding:20px; text-align:center;">${escapeHTML(data.message)}</p>`;
return;
}
// Update Counts
if(openCount) openCount.textContent = data.open_trades.length;
if(closedCount) closedCount.textContent = data.closed_trades.length;
// Render Open
if(openTradesBody) {
if (data.open_trades.length === 0) {
openTradesBody.innerHTML = '<p style="padding:20px; text-align:center; color:#888;">No open trades.</p>';
} else {
openTradesBody.innerHTML = data.open_trades.map(trade => createTradeRow(trade, true)).join('');
}
}
// Render Closed
if(closedTradesBody) {
if (data.closed_trades.length === 0) {
closedTradesBody.innerHTML = '<p style="padding:20px; text-align:center; color:#888;">No closed trades.</p>';
} else {
closedTradesBody.innerHTML = data.closed_trades.map(trade => createTradeRow(trade, false)).join('');
}
}
startPnlAnimation();
} catch (error) {
if(openTradesBody) openTradesBody.innerHTML = '<p style="padding:20px; text-align:center; color:red;">Connection error.</p>';
}
}
function createTradeRow(trade, isOpen) {
const date = escapeHTML(trade.created_at);
const commodity = escapeHTML(trade.commodity);
const type = escapeHTML(trade.trade_type);
const amount = parseFloat(trade.trade_amount).toFixed(2);
const entry = parseFloat(trade.entry_price).toFixed(2);
const dirClass = type === 'BUY' ? 'direction-buy' : 'direction-sell';
let pnlHtml = '';
let actionHtml = '';
if (isOpen) {
pnlHtml = `<span class="pnl-animating" data-amount="${amount}">0.00</span>`;
actionHtml = `<button class="btn-close-trade js-close-trade" data-id="${trade.id}">Close</button>`;
} else {
const finalPnl = parseFloat(trade.pnl).toFixed(2);
const pnlClass = finalPnl >= 0 ? 'pnl-positive' : 'pnl-negative';
pnlHtml = `<span class="${pnlClass}">${finalPnl}</span>`;
actionHtml = `<span>Closed</span>`;
}
return `
<div class="trades-table-row">
<div data-label="Date">${date}</div>
<div data-label="Trade">${commodity}</div>
<div data-label="Direction" class="${dirClass}">${type}</div>
<div data-label="Amount">$${amount}</div>
<div data-label="Entry">$${entry}</div>
<div data-label="Profit">$${pnlHtml}</div>
<div data-label="Action">${actionHtml}</div>
</div>
`;
}
// Animation Logic
function startPnlAnimation() {
document.querySelectorAll('.pnl-animating').forEach(el => {
if (el.dataset.animating) return; // Prevent double intervals
el.dataset.animating = 'true';
const baseAmount = parseFloat(el.dataset.amount);
let currentPnl = 0;
const animate = () => {
// Fluctuates based on signal strength
const vol = (userSignalStrength / 100) * 0.15; // Max 15% swing
const change = (Math.random() - 0.5) * 2 * (baseAmount * vol);
currentPnl += change;
// Cap loss at total amount
if (currentPnl < -baseAmount) currentPnl = -baseAmount;
el.textContent = currentPnl.toFixed(2);
el.className = currentPnl >= 0 ? 'pnl-animating pnl-positive' : 'pnl-animating pnl-negative';
if(document.visibilityState === 'visible') {
setTimeout(animate, Math.random() * 2000 + 1000);
}
};
animate();
});
}
// Close Trade Logic
document.addEventListener('click', (e) => {
if (e.target.classList.contains('js-close-trade')) {
const btn = e.target;
const tradeId = btn.dataset.id;
Swal.fire({
title: 'Close Trade?',
text: "Are you sure you want to close this position at current market price?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, close it'
}).then((result) => {
if (result.isConfirmed) {
btn.textContent = 'Closing...';
btn.disabled = true;
const formData = new FormData();
formData.append('trade_id', tradeId);
formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
fetch('close_trade.php', { method: 'POST', body: formData })
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
Swal.fire('Closed!', data.message, 'success');
loadUserTrades();
setTimeout(() => { window.location.reload(); }, 1500);
} else {
Swal.fire('Error!', data.message, 'error');
btn.textContent = 'Close';
btn.disabled = false;
}
});
}
});
}
});
// Initial Load & Polling
if(document.getElementById('open-trades-body')) {
loadUserTrades();
setInterval(() => {
if (document.visibilityState === 'visible') loadUserTrades();
}, 15000);
}
});
</script>
</body>
</html>
b IDATxytVսϓ22 A@IR :hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E IENT ; @x T.i%-X} SvS5.r/ UHz^_$-W" w)Ɗ/ @Z &IoX P$K} JzX:;` &, ŋui,e6mX
Եr Kb1ԗ) D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A ݀!I*]R;I2$eZ#ORZSrr 6mteffu*((Pu'v{ DIߔ4^pIm '77WEEE;vƎ 4- $]'RI{\I&G :IHJ
DWBB=\WRm
o$K(V 9 ABB.}jѢv `^?IOȅ} ڶmG }T#FJ`5 6$- ھ}FI&v;0(h; Б 38CӧOWf!; A
i:F _m9s&|q%=# wZprrrla
A & P\\СC[A#! { olF}
`E2} MK/vV )i{ 4BffV\|ۭX `b@kɶ@%i$K z5zhmX [IXZ ` 'b%$r5 M4º /l
ԃ ߖ xhʔ)[@=}
K6IM}^ 5k㏷݆z
ΗÿO:gdGBmyT/@+Vɶ纽zl.yit뭷zV 0[Y^>Wsqs}\/@$(T7f.Inݺi R$푔n.~?H))\Z RW'Mo~v
Ov6oԃ xz! S,&xm/yɞԟ?'uaSѽb, 8GלKboi&3 t7Y,)JJ c[nzӳdE&KsZLӄ I ?@ & %ӟ۶mSMMњ0 iؐSZ, |J+N
~,0A 0!5%Q-YQQa 3 }$_vVr f9f?S 8` z D A D A D A D A D A D A D A D A D A dqP,تmMmg 1V?rSI꒟]u|l
RCyEf٢9 jURbztѰ!m5~tGj2DhG*{H9)꒟ר3:(+3\?/;TUݭʴ~S6lڧUJ*i$d(#=Yݺd{,p|3B)) q:vN0Y.jkק6;SɶVzHJJЀ-utѹսk>QUU \~]fFnK?&ߡ5b=z9)^|u_k-[ y%ZNU6 7Mi:]ۦ tk[n
X(e6 Bb."8cۭ|~teuuw|ήI-5"~Uk;ZicEmN/:]M>
cQ^uiƞ??Ң pc# TUU3UakNwA`:Y_V-8.KKfRi tv*
9S6ֿj,ՃNOMߤ]z^fOh|<>@Å5 _/Iu?{SY4hK/2]4%it5q]GGe2%iR|
W&f*^]??vq[LgE_3f}Fxu~}qd-ږFxu~I N >\;͗O֊:̗WJ@ Bh W=y|GgwܷH_NY?)Tdi'?խwhlmQi !SUUsw4kӺe4rfxu-[nHtMFj}H_u~w>)oV}(T'ebʒv3_[+vn @Ȭ\S}ot}w=k HFnxg S 0eޢm~l}uqZfF oZuuEg
`zt~? b;t%>WTkķh[ 2eG8LIWx,^\thrl^Ϊ{=dž<}qV@ ⠨Wy^LF_>0UkD uʫuCs$)I v:IK; 6ֲ4{^6 եm+l 3>݆uM 9u ?>Zc }g~qhKwڭ e FMM~pМuqǿz6Tb@8 @Y|jx](^]gf}M"tG
-w.@ vOqh~/HII` S[l.6nØXL9vU cOoB\xoǤ'T&I ǍQw_wpv[kmO{w~>#=P1Pɞa-we:iǏlHo꒟f9SzH?+shk%Fs:q VhqY `jvO'ρ?PyX3lх]˾uV{ݞ]1,MzYNW~̈́ joYn}ȚF߾mS]F z+EDxm/d{F{-W-4wY듏:??_gPf
^3ecg ҵs8R2מz@TA NGj)}CNi/R~}c:5{! ZHӋӾ6}T] G]7W6^n
9*,YqOZj :P?Q D FL|?-^.Ɵ7}fFhxe2Ps cz1&5\cn[=Vn[ĶE鎀uˌd3GII k;lNmشOuuRVfBE]ۣe Ӷu
:X-[(er4~LHi6:Ѻ@ԅr ST0 trk%$Č0 ez" *z " T/X9|8.C5Feg} C Q%͞ˣJvL/? j^ h & 9xF`њZ( & yF&Iݻfg #W;3^{Wo^4'v V[[K';+mӍִ] AC @ W?1^{එyh +^]fm~iԵ] AB @WTk̏t uR?l.OIHiYyԶ] Aˀ 7c:q}ힽaf6Z~қm(+sK4{^6}T *UUu]n.:kx{:2 _m=sAߤU@? Z-Vކе z왍Nэ{|5 pڶn b
p-@sPg]0G7fy-M{GCF'%{4` =$-Ge\ eU:m+Zt'WjO!OAF @ik&t݆ϥ_
e}=]" Wz_.͜E3leW Fih|t-wZۍ-uw=6 YN {6|} | *={Ѽn.S .z1z jۻTH]흾 D uDvmvK .` V]yY~sI@t?/ϓ. m&[ " +P?MzovVЫG3- G RR[(!!\_,^%?v@ ҵő
m`Y)tem8GM x.))A]Y i`ViW`?^~! S#^+ѽGZj?Vģ 0.))AlzL*]OXrY `DBBLOj{-MH'ii-ϰ ok7^
)쭡b]UXSְmռY|5 *cֽk0B7镹%ڽP# 8nȎq}mJr23_>lE5$iwui+ H~F`IjƵ@q
\ @#qG 0" . 0" l ` . 0! , AQHN6qzkKJ#o;`Xv2>,tێJJ7Z/*A .@fفjMzkg @TvZH3Zxu6Ra'%O?/d Q5x YkU]Rֽkق@ DaS^RSּ5|BeHNN͘p
HvcYcC5:y
#`οb; z2 .!kr}gUWkyZn=f Pvsn3p~;4p˚=ē~NmI] ¾ 0lH[_L hs h_ ғߤc_њe c) g 7VIZ5 yrgk̞W#IjӪv>՞y睝M8[ |]\շ 8M 6%|@P ZڨI-m>=k= 'aiRo-x?>Q. }`Ȏ:Wsmu u >
.@,&;+!!˱tﭧD QwRW\vF\~Q7>sp Yw$%A~;~}6 ¾ g &if_=j,v+U L1(tW ake:@Ș>j$Gq2t7S?vL|]u/ .(0 E 6Mk6hiۺzښOrifޱxm/Gx> Lal%%~{lBsR4* }{0Z/ tNIɚpV ^# Lf:u@k#RSu
=S^ZyuR/.@n&z~B=0eg뺆#,Þ[ B/?H uUf7y
Wy}Bwegל`Wh(||`l`.;Ws?V@" c:iɍL֯PGv6zctM̠':wuW;d=;EveD}9J@ B(0iհ bvP1{\P&G7DIy_$-Q jm~Yrr&]CDv%bh|Yzni _ R ;kg}nJOIIwy uL}{ЌNj}:+3Y?:WJ/N+Rzd=hb;dj͒suݔ@NKMԄ jqzC5 @y°hL m;*5ezᕏ=ep
XL n?מ:r`۵tŤZ|1v`V뽧_csج'ߤ%oTuumk%%%h)uy]Nk[n
'b2 l.=͜E%gf$[c;s:V-͞WߤWh-j7]4=F-X]>ZLSi[Y*We; Zan(Ӈ W|e(HNNP5[=
r4tP
&0< pc# `vTNV
GFqvTi * Tyam$ߏWyE* VJKMTfFw >'$-ؽ.Ho.8c"@ D A D A D A D A D A D A D A D A D A~j*֘, N;Pi3599h=g oض L giJ5փy~}&Zd9 p֚
e:|hL``b/d9 p? fgg+%%hMg Xosج, ΩOl0Zh=x djL mhݻo O [g_l, 8a]٭+ӧ0 $I] c]:粹:Teꢢ"5a^Kgh,&= =՟ ^߶ߢE ܹS J}I%:8
IDAT~,9/ʃ PW'Mo }zNƍ쨓zPb NZ~^z=4mswg;5 Y~SVMR XUյڱRf?s:w
; 6H:º i 5 -maM &O3; 1IKeam Zh͛7+##v+c ~u~ca] GnF'ټL~ PPPbn
v oC 4R,ӟgg %hq} @#M4IÇ Oy^xM Zx
) yO w @HkN˖-Sǎ mb]X@n+i͖ !++K3gd\$mt$^ YfJ \8PRF )77Wא!Cl $i: @@_oG I{$# 8磌ŋ9 1A (Im7 ֭>}ߴJq7ޗt^ -[ԩSj*}%]&'
- ɓ'ꫯVzzvB#; a
7@GxI{jƌ.LÇWBB7 `O"I$ /@R @ eee@۷ >}0 ,ɒ2$53Xs|cS~r pTYYY} k Hc %&k.], @ A D A D A D A D A D A D A D A D A @lT<%''*Lo^={رc5h %$+CnܸQ3fҥK}vUVVs9G
R,_{ xˇ3 o߾;TTTd}馛]uuuG~iԩ@4 bnvmvfϞ /Peeeq}}z a
I~,誫{UWW뮻}_~YƍSMMMYχ ֝waw \ ď cxꩧtEƍկ_?۷5@u ?1kNׯWzz/wy>}zj3 k (ٺu q_Zvf̘:~ AB Q&r| ! %KҥKg Ԟ={<_X-z ! CyFUUz~ AB QIIIjݺW $ UXXDٳZ~ AB QƍecW $<(~<RSSvZujjjԧO ZQu@4 8m&&&jԩg $ ď 1h ͟?_{768@ g
=@ `)))5o6m 3 ) ѣƌJ;wҿUTT /KZR{~a=@ 0o<*狔iFɶ[ˎ ;T]] OX@ ?K.ۈxN p p p p p p p p p p p p p p p p pP fl߾] ,{ｧk۶mڿo5 BTӦMӴiӴ|r D B2e |An!D y'tkΝ[A $***t5'
" !駟oaD nΝ:t֭[gD ШQ0 6qD;@ x M6v( PiizmZ 4ew" @ ̴ixf [~-F ٱc&IZ 2|n!?$ @{[HTɏ #@h Ȏ I# _m (F /6Z3 z'\r, r!;w2Z3j=~G Y 7"I$i I. p_" ? p N` y D D ?: _ G ÿa b7 J ! Bx @0 Bo
cG @`1C [ @0G
@`0C _ u V1 aC X > W ` | `! < S `" <. `# c `? cA C 4
? c p# ~ @0 ?: 0 8& _ M Q1 J h# ? /` 7; I q 7 a w Q A 1 H p
! #< 8/# @1Ul7 =S=K.4Z?E _$i@ ! 1!E 4? ` P_ @B ă 1 0# : " aU,xb F Y1
[n |n
#' v EH:`x b
# v D 4 Y hi.i& EΖv# O H 4IŶ}:Ik h @tZRF # (tXҙzZ ? I3l7 q@õ|ۍ 1,GpuY Ꮿ@ hJv# x xk$
v# 9 5 }_$ c S#=+"K {F*m7`# %H:NRS p6I?sIՖ{Ap$I$I:QRv2$Z @UJ*$]<FO4 IENDB`