Hugging Face's logo

Spaces:
alterzick
/
tradingver2
Running

App Files Community
tradingver2 / index.html
alterzick's picture
alterzick
Add 3 files
b2a6b0b verified
raw
history blame contribute delete
92.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Advanced Trading 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>
.tab {
transition: all 0.3s ease;
}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to { opacity: 0.5; }
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 12px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#economic-calendar::-webkit-scrollbar {
width: 6px;
}
#economic-calendar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#economic-calendar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
<!-- Header -->
<header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
<div class="container mx-auto px-4 py-3 md:py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-chart-line text-xl"></i>
<h1 class="text-2xl md:text-3xl font-bold">AlphaTrader Pro</h1>
</div>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-2 bg-blue-700 px-3 py-1 rounded-full">
<div class="h-2 w-2 bg-green-400 rounded-full animate-pulse"></div>
<span class="text-sm">Live</span>
</div>
<div class="flex items-center space-x-1">
<i class="fas fa-bell text-white"></i>
<span class="hidden md:inline text-xs bg-red-500 rounded-full px-1.5 py-0.5 -ml-2 -mt-4">3</span>
</div>
</div>
</div>
</header>
<!-- Main Container -->
<div class="container mx-auto px-4 py-6">
<!-- Tab Navigation -->
<div class="flex justify-center space-x-2 mb-6 bg-white rounded-lg shadow-sm p-1 max-w-2xl mx-auto">
<button onclick="showTab('dashboard')" class="tab-button active px-6 py-2 rounded-md text-sm font-medium focus:outline-none flex items-center justify-center">
<i class="fas fa-tachometer-alt mr-2"></i>
Dashboard
</button>
<button onclick="showTab('trading-journal')" class="tab-button px-6 py-2 rounded-md text-sm font-medium focus:outline-none flex items-center justify-center">
<i class="fas fa-book mr-2"></i>
Journal
</button>
<button onclick="showTab('portfolio')" class="tab-button px-6 py-2 rounded-md text-sm font-medium focus:outline-none flex items-center justify-center">
<i class="fas fa-wallet mr-2"></i>
Portfolio
</button>
<button onclick="showTab('settings')" class="tab-button px-6 py-2 rounded-md text-sm font-medium focus:outline-none flex items-center justify-center">
<i class="fas fa-cog mr-2"></i>
Settings
</button>
</div>
<!-- Dashboard Tab -->
<div id="dashboard" class="tab-content">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
<!-- Market Overview -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Market Overview</h2>
<i class="fas fa-globe text-blue-500"></i>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<div>
<div class="text-gray-500 text-sm">S&P 500</div>
<div class="font-bold">4,300.21</div>
</div>
<div class="text-green-500">+1.23% <i class="fas fa-arrow-up"></i></div>
</div>
<div class="flex justify-between">
<div>
<div class="text-gray-500 text-sm">NASDAQ</div>
<div class="font-bold">12,830.45</div>
</div>
<div class="text-red-500">-0.75% <i class="fas fa-arrow-down"></i></div>
</div>
<div class="flex justify-between">
<div>
<div class="text-gray-500 text-sm">DOW</div>
<div class="font-bold">33,420.78</div>
</div>
<div class="text-green-500">+0.45% <i class="fas fa-arrow-up"></i></div>
</div>
</div>
</div>
<!-- Trading Signals -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Trading Signals</h2>
<i class="fas fa-bolt text-yellow-500"></i>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
<span class="text-sm">Strong Buy (NVDA)</span>
</div>
<span class="text-xs text-gray-500">2 min ago</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="h-2 w-2 bg-red-500 rounded-full mr-2"></div>
<span class="text-sm">Bearish Divergence (BTC)</span>
</div>
<span class="text-xs text-gray-500">15 min ago</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
<span class="text-sm">Golden Cross (GOLD)</span>
</div>
<span class="text-xs text-gray-500">1 hr ago</span>
</div>
</div>
</div>
<!-- Risk Management -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Risk Management</h2>
<i class="fas fa-shield-alt text-red-500"></i>
</div>
<div class="mb-3">
<div class="flex justify-between text-sm mb-1">
<span>Risk Score</span>
<span>3/10 (Low)</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 30%"></div>
</div>
</div>
<div class="text-sm space-y-2">
<div class="flex justify-between">
<span>Max Position</span>
<span class="font-medium">$25,000</span>
</div>
<div class="flex justify-between">
<span>Stop Loss</span>
<span class="font-medium">2%</span>
</div>
<div class="flex justify-between">
<span>Take Profit</span>
<span class="font-medium">4%</span>
</div>
</div>
</div>
<!-- Performance -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Performance</h2>
<i class="fas fa-trophy text-purple-500"></i>
</div>
<div class="flex items-end justify-between">
<div>
<div class="text-3xl font-bold text-green-600">+28.4%</div>
<div class="text-sm text-gray-500">3 Months</div>
</div>
<div class="w-24 h-16">
<canvas id="performanceChart"></canvas>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-4 text-center text-xs">
<div class="bg-gray-100 p-2 rounded">
<div class="font-bold">76%</div>
<div class="text-gray-500">Win Rate</div>
</div>
<div class="bg-gray-100 p-2 rounded">
<div class="font-bold">1.83</div>
<div class="text-gray-500">Profit Factor</div>
</div>
<div class="bg-gray-100 p-2 rounded">
<div class="font-bold">12.5</div>
<div class="text-gray-500">Avg Trade (Days)</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Trading Chart Section -->
<div class="lg:col-span-2">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex flex-wrap justify-between items-center mb-4 gap-2">
<div class="flex items-center space-x-4">
<select id="commodity" onchange="updateChart()" class="bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option value="OANDA:WTICOUSD">Crude Oil (WTI)</option>
<option value="OANDA:XAGUSD">Silver</option>
<option value="OANDA:XAUUSD">Gold</option>
<option value="NASDAQ:AAPL">Apple (AAPL)</option>
<option value="NASDAQ:TSLA">Tesla (TSLA)</option>
<option value="BINANCE:BTCUSD">Bitcoin (BTC)</option>
</select>
<select id="timeframe" onchange="updateChart()" class="bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option value="1">1M</option>
<option value="5">5M</option>
<option value="15">15M</option>
<option value="60">1H</option>
<option value="240">4H</option>
<option value="D">1D</option>
<option value="W">1W</option>
</select>
</div>
<div class="flex space-x-2">
<button onclick="drawSupportResistance()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
<i class="fas fa-ruler-combined"></i>
</button>
<button onclick="toggleFullScreenChart()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
<i class="fas fa-expand"></i>
</button>
<button onclick="saveChartImage()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
<i class="fas fa-camera"></i>
</button>
</div>
</div>
<div id="tradingview-chart" style="height: 500px;"></div>
<div class="flex justify-between mt-4 text-sm">
<div>
<span class="text-gray-500">Last Price:</span>
<span id="last-price" class="font-bold ml-2 blink text-blue-600">Loading...</span>
</div>
<div>
<span class="text-gray-500">Change:</span>
<span id="price-change" class="font-bold ml-2">Loading...</span>
</div>
<div>
<span class="text-gray-500">Volume:</span>
<span id="trade-volume" class="font-bold ml-2">Loading...</span>
</div>
<div>
<span class="text-gray-500">Time:</span>
<span id="current-time" class="font-bold ml-2">Loading...</span>
</div>
</div>
</div>
</div>
<!-- Indicators and Analysis -->
<div class="space-y-6">
<!-- Technical Indicators -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Technical Indicators</h2>
<div class="tooltip">
<i class="fas fa-info-circle text-gray-400"></i>
<span class="tooltiptext">Indicator parameters can be adjusted below</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="rsi-period" class="block text-xs font-medium text-gray-700 mb-1">RSI Period</label>
<div class="relative">
<input type="number" id="rsi-period" value="14" min="1" max="50" onchange="updateIndicators()" class="w-full pl-2 pr-8 py-1 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-xs text-gray-500">days</div>
</div>
</div>
<div>
<label for="macd-fast" class="block text-xs font-medium text-gray-700 mb-1">MACD Fast</label>
<input type="number" id="macd-fast" value="12" min="1" max="50" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="macd-slow" class="block text-xs font-medium text-gray-700 mb-1">MACD Slow</label>
<input type="number" id="macd-slow" value="26" min="1" max="100" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="macd-signal" class="block text-xs font-medium text-gray-700 mb-1">MACD Signal</label>
<input type="number" id="macd-signal" value="9" min="1" max="50" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="stochastic-k" class="block text-xs font-medium text-gray-700 mb-1">Stochastic %K</label>
<input type="number" id="stochastic-k" value="14" min="1" max="50" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="stochastic-d" class="block text-xs font-medium text-gray-700 mb-1">Stochastic %D</label>
<input type="number" id="stochastic-d" value="3" min="1" max="50" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="bollinger-period" class="block text-xs font-medium text-gray-700 mb-1">Bollinger Period</label>
<input type="number" id="bollinger-period" value="20" min="1" max="50" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="bollinger-deviation" class="block text-xs font-medium text-gray-700 mb-1">Bollinger Deviations</label>
<input type="number" id="bollinger-deviation" value="2" min="1" max="5" step="0.5" onchange="updateIndicators()" class="w-full py-1 px-2 text-sm border rounded focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
</div>
<!-- Indicator Values -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h2 class="text-lg font-semibold mb-3">Current Values</h2>
<div class="grid grid-cols-2 gap-3">
<div class="border-b pb-2">
<div class="text-xs text-gray-500">RSI</div>
<div class="flex justify-between items-center">
<span id="rsi-value" class="font-bold">58.42</span>
<span id="rsi-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">Neutral</span>
</div>
</div>
<div class="border-b pb-2">
<div class="text-xs text-gray-500">MACD</div>
<div class="flex justify-between items-center">
<span id="macd-value" class="font-bold">1.23</span>
<span id="macd-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800">Buy</span>
</div>
</div>
<div class="border-b pb-2">
<div class="text-xs text-gray-500">Stochastic</div>
<div class="flex justify-between items-center">
<span id="stochastic-value" class="font-bold">64.56</span>
<span id="stochastic-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">Neutral</span>
</div>
</div>
<div class="border-b pb-2">
<div class="text-xs text-gray-500">Bollinger</div>
<div class="flex justify-between items-center">
<span id="bollinger-value" class="font-bold">Mid</span>
<span id="bollinger-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">Neutral</span>
</div>
</div>
<div>
<div class="text-xs text-gray-500">Awesome Osc.</div>
<div class="flex justify-between items-center">
<span id="ao-value" class="font-bold">-0.42</span>
<span id="ao-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-800">Sell</span>
</div>
</div>
<div>
<div class="text-xs text-gray-500">Momentum</div>
<div class="flex justify-between items-center">
<span id="momentum-value" class="font-bold">1.15</span>
<span id="momentum-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800">Buy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Order Panel -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h2 class="text-lg font-semibold mb-3">Order Panel</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Type</label>
<select class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option>Market</option>
<option>Limit</option>
<option>Stop</option>
<option>Stop Limit</option>
</select>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Side</label>
<div class="flex">
<button class="flex-1 bg-green-500 hover:bg-green-600 text-white text-sm py-1 rounded-l-lg focus:outline-none">
Buy
</button>
<button class="flex-1 bg-red-500 hover:bg-red-600 text-white text-sm py-1 rounded-r-lg focus:outline-none">
Sell
</button>
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Quantity</label>
<input type="number" value="1" min="1" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Price</label>
<input type="number" placeholder="Market" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none">
Place Order
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg focus:outline-none">
Cancel
</button>
</div>
</div>
<!-- Position Summary -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Active Positions</h2>
<button class="text-xs text-blue-600 hover:underline">View All (3)</button>
</div>
<div class="overflow-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium">AAPL</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">Long</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">100</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$145.23</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$152.76</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$753.00</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium">TSLA</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">Long</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">20</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$680.50</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$692.35</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$237.00</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium">XAUUSD</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-red-600">Short</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">0.5</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$1,832.45</td>
<td class="px-3 py-2 whitespace-nowrap text-sm">$1,828.90</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$17.75</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Economic Calendar -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Economic Calendar</h2>
<div class="flex items-center space-x-2">
<button class="text-xs text-blue-600 hover:underline" onclick="showMoreEconomicEvents()">View More</button>
<div class="relative inline-block text-left">
<button onclick="toggleCalendarFilter()" class="inline-flex justify-center w-full px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md border border-gray-200 focus:outline-none">
Filter
</button>
<div id="calendar-filter" class="hidden origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('all')">All Events</a>
<a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('high')">High Impact</a>
<a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('medium')">Medium Impact</a>
</div>
</div>
</div>
</div>
</div>
<div id="economic-calendar" class="overflow-auto max-h-64">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forecast</th>
</tr>
</thead>
<tbody id="calendar-body" class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">10:00 ET</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 bg-red-500 rounded-full mr-1"></span>
US Non-Farm Payrolls
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs font-bold">263K</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">200K</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">10:00 ET</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 bg-red-500 rounded-full mr-1"></span>
Unemployment Rate
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs font-bold">3.6%</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">3.7%</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">08:30 ET</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
Average Hourly Earnings
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs font-bold">0.3%</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">0.3%</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">Tomorrow 10:00 ET</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
ISM Manufacturing PMI
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">51.5</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">Tomorrow 14:00 ET</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
Fed Chair Powell Speaks
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Market Sentiment -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Market Sentiment</h2>
<div class="flex items-center">
<span class="text-xs text-gray-500 mr-2">Updated 2 mins ago</span>
<button onclick="refreshSentimentData()" class="text-blue-600 hover:text-blue-800">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span>Retail Traders</span>
<span id="retail-position">78% Long</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 78%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">Retail traders are buying, which is often a contrarian indicator.</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Institutional</span>
<span id="institutional-position">63% Short</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 37%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">Large institutions are increasing short positions.</div>
</div>
<div>
<div class="text-sm mb-2">News Sentiment Analysis</div>
<div class="flex items-center">
<div class="flex-1 bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>
</div>
<span class="ml-2 text-xs font-bold text-green-600">65% Positive</span>
</div>
<div class="text-xs text-gray-500 mt-1">Recent news headlines show mostly positive sentiment.</div>
</div>
</div>
</div>
</div>
<!-- Trading Ideas -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Trading Ideas</h2>
<div class="flex items-center space-x-2">
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">AI Generated</span>
<button onclick="generateNewIdeas()" class="text-sm text-blue-600 hover:underline">New Ideas</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-2">
<div class="flex items-center">
<span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
<span class="font-medium">AAPL</span>
</div>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Technical</span>
</div>
<div class="text-sm mb-3">Potential breakout above $155 resistance with supporting volume and RSI confirming upward momentum.</div>
<div class="flex justify-between text-xs text-gray-500">
<span>Target: $162.50</span>
<span>Stop: $152.20</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-2">
<div class="flex items-center">
<span class="h-3 w-3 bg-red-500 rounded-full mr-2"></span>
<span class="font-medium">GOLD</span>
</div>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full">Fundamental</span>
</div>
<div class="text-sm mb-3">Fed rate hike expectations putting pressure on gold prices. Potential short opportunity at resistance.</div>
<div class="flex justify-between text-xs text-gray-500">
<span>Target: $1,815</span>
<span>Stop: $1,850</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-2">
<div class="flex items-center">
<span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
<span class="font-medium">TSLA</span>
</div>
<span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Earnings</span>
</div>
<div class="text-sm mb-3">Earnings beat last quarter with guidance upgrade. Bullish pressure expected post-earnings.</div>
<div class="flex justify-between text-xs text-gray-500">
<span>Target: $725</span>
<span>Stop: $672</span>
</div>
</div>
</div>
</div>
</div>
<!-- Trading Journal Tab -->
<div id="trading-journal" class="tab-content hidden">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
<h2 class="text-xl font-bold mb-4">Trading Journal</h2>
<div class="flex flex-col md:flex-row gap-4 mb-6">
<div class="w-full md:w-1/4">
<label for="journal-symbol" class="block text-sm font-medium text-gray-700 mb-1">Symbol</label>
<select id="journal-symbol" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option value="">All Symbols</option>
<option value="AAPL">AAPL</option>
<option value="TSLA">TSLA</option>
<option value="XAUUSD">GOLD</option>
<option value="WTICOUSD">OIL</option>
</select>
</div>
<div class="w-full md:w-1/4">
<label for="journal-start-date" class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
<input type="date" id="journal-start-date" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div class="w-full md:w-1/4">
<label for="journal-end-date" class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
<input type="date" id="journal-end-date" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div class="w-full md:w-1/4 flex items-end">
<button onclick="filterJournalEntries()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none flex items-center justify-center">
<i class="fas fa-filter mr-2"></i> Filter
</button>
</div>
</div>
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">Recent Trades</h3>
<button onclick="exportJournal()" class="text-sm text-blue-600 hover:underline flex items-center">
<i class="fas fa-file-export mr-1"></i> Export
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border rounded-lg shadow-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exit</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L (%)</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="journal-body" class="divide-y divide-gray-200">
<!-- Journal entries will be dynamically inserted here -->
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Add New Trade -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 class="text-lg font-medium mb-4">Add New Trade</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="trade-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
<input type="date" id="trade-date" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label for="trade-symbol" class="block text-sm font-medium text-gray-700 mb-1">Symbol</label>
<input type="text" id="trade-symbol" placeholder="AAPL" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label for="trade-side" class="block text-sm font-medium text-gray-700 mb-1">Side</label>
<select id="trade-side" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option value="long">Long</option>
<option value="short">Short</option>
</select>
</div>
<div>
<label for="trade-size" class="block text-sm font-medium text-gray-700 mb-1">Size</label>
<input type="number" id="trade-size" placeholder="100" step="1" min="1" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label for="entry-price" class="block text-sm font-medium text-gray-700 mb-1">Entry Price</label>
<input type="number" id="entry-price" placeholder="150.25" step="0.01" min="0" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label for="exit-price" class="block text-sm font-medium text-gray-700 mb-1">Exit Price</label>
<input type="number" id="exit-price" placeholder="156.80" step="0.01" min="0" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
</div>
<div class="mb-4">
<label for="trade-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
<textarea id="trade-notes" rows="3" placeholder="Enter your trade notes here..." class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2"></textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<button onclick="saveTrade()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none flex items-center justify-center">
<i class="fas fa-save mr-2"></i> Save Trade
</button>
<button onclick="clearTradeForm()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg focus:outline-none flex items-center justify-center">
<i class="fas fa-times mr-2"></i> Clear
</button>
</div>
</div>
<!-- Trade Statistics -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 class="text-lg font-medium mb-4">Trade Statistics</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Total Trades</div>
<div class="text-2xl font-bold">28</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Win Rate</div>
<div class="text-2xl font-bold text-green-600">71%</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Avg. P/L %</div>
<div class="text-2xl font-bold text-green-600">2.8%</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Profit Factor</div>
<div class="text-2xl font-bold">1.83</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Max Drawdown</div>
<div class="text-2xl font-bold text-red-600">-12.5%</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-xs text-gray-500 mb-1">Avg. Trade Days</div>
<div class="text-2xl font-bold">5.2</div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between text-sm mb-1">
<span>Performance Over Time</span>
<span>Last 30 Trades</span>
</div>
<div class="h-40">
<canvas id="journalChart"></canvas>
</div>
</div>
<div>
<div class="text-sm font-medium mb-2">Best Performing Trades</div>
<div class="overflow-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
<th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
<th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
<th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L %</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-2 py-1 whitespace-nowrap text-xs font-medium">AMD</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">Long</td>
<td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$1,245</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+32.5%</td>
</tr>
<tr>
<td class="px-2 py-1 whitespace-nowrap text-xs font-medium">TSLA</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">Long</td>
<td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$872</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+18.4%</td>
</tr>
<tr>
<td class="px-2 py-1 whitespace-nowrap text-xs font-medium">XAUUSD</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-red-600">Short</td>
<td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$498</td>
<td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+15.2%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Tab -->
<div id="portfolio" class="tab-content hidden">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
<h2 class="text-xl font-bold mb-6">Portfolio Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
<div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
<div class="text-xs text-blue-800 mb-1">Total Portfolio Value</div>
<div class="text-2xl font-bold">$42,876.34</div>
</div>
<div class="bg-green-50 p-4 rounded-xl border border-green-100">
<div class="text-xs text-green-800 mb-1">Today's P/L ($)</div>
<div class="text-2xl font-bold text-green-600">+$287.45</div>
</div>
<div class="bg-green-50 p-4 rounded-xl border border-green-100">
<div class="text-xs text-green-800 mb-1">Today's P/L (%)</div>
<div class="text-2xl font-bold text-green-600">+0.67%</div>
</div>
<div class="bg-purple-50 p-4 rounded-xl border border-purple-100">
<div class="text-xs text-purple-800 mb-1">All Time P/L (%)</div>
<div class="text-2xl font-bold text-purple-600">+29.4%</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h3 class="text-lg font-medium">Current Holdings</h3>
<button onclick="refreshHoldings()" class="text-blue-600 hover:text-blue-800">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="overflow-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shares</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Cost</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody id="holdings-body">
<tr>
<td class="px-3 py-2 whitespace-nowrap">
<div class="flex items-center">
<div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
<span class="font-medium">AAPL</span>
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap">100</td>
<td class="px-3 py-2 whitespace-nowrap">$145.23</td>
<td class="px-3 py-2 whitespace-nowrap">$152.76</td>
<td class="px-3 py-2 whitespace-nowrap text-green-600 font-medium">+$753.00</td>
<td class="px-3 py-2 whitespace-nowrap">
<button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded hover:bg-red-200">Sell</button>
</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap">
<div class="flex items-center">
<div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
<span class="font-medium">TSLA</span>
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap">20</td>
<td class="px-3 py-2 whitespace-nowrap">$680.50</td>
<td class="px-3 py-2 whitespace-nowrap">$692.35</td>
<td class="px-3 py-2 whitespace-nowrap text-green-600 font-medium">+$237.00</td>
<td class="px-3 py-2 whitespace-nowrap">
<button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded hover:bg-red-200">Sell</button>
</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap">
<div class="flex items-center">
<div class="h-2 w-2 bg-blue-500 rounded-full mr-2"></div>
<span class="font-medium">SPY</span>
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap">50</td>
<td class="px-3 py-2 whitespace-nowrap">$415.70</td>
<td class="px-3 py-2 whitespace-nowrap">$412.25</td>
<td class="px-3 py-2 whitespace-nowrap text-red-600 font-medium">-$172.50</td>
<td class="px-3 py-2 whitespace-nowrap">
<button class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded hover:bg-blue-200">Buy More</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h3 class="text-lg font-medium">Allocation & Diversification</h3>
<div class="flex items-center">
<span class="text-xs text-gray-500">By Value</span>
<button class="ml-2 text-blue-600 hover:text-blue-800">
<i class="fas fa-filter"></i>
</button>
</div>
</div>
<div class="h-64">
<canvas id="portfolioChart"></canvas>
</div>
<div class="flex justify-center mt-4">
<div class="flex items-center mr-4">
<div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
<span class="text-xs">Stocks (75%)</span>
</div>
<div class="flex items-center mr-4">
<div class="h-3 w-3 bg-yellow-500 rounded-full mr-1"></div>
<span class="text-xs">ETFs (15%)</span>
</div>
<div class="flex items-center">
<div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
<span class="text-xs">Commodities (10%)</span>
</div>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<div class="flex justify-between items-center mb-3">
<h3 class="text-lg font-medium">Performance Over Time</h3>
<div class="flex items-center space-x-2">
<button class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">1M</button>
<button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">3M</button>
<button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">1Y</button>
<button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">All</button>
</div>
</div>
<div class="h-64">
<canvas id="portfolioPerformanceChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div id="settings" class="tab-content hidden">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
<h2 class="text-xl font-bold mb-6">Account Settings</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Profile Settings -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 class="text-lg font-medium mb-4">Profile Information</h3>
<div class="flex items-center mb-6">
<div class="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">
<i class="fas fa-user text-2xl"></i>
</div>
<div class="ml-4">
<button class="text-sm text-blue-600 hover:underline">Upload New Photo</button>
<div class="text-xs text-gray-500 mt-1">JPG, GIF or PNG. Max size 2MB</div>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" value="John Trader" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" value="john.trader@example.com" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
<input type="tel" value="+1 (555) 123-4567" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
Save Changes
</button>
</div>
</div>
<!-- Security Settings -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 class="text-lg font-medium mb-4">Security Settings</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
<input type="password" placeholder="Enter current password" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
<input type="password" placeholder="Enter new password" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
<input type="password" placeholder="Confirm new password" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div class="flex items-center">
<input id="2fa-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="2fa-checkbox" class="ml-2 text-sm font-medium text-gray-900">Enable Two-Factor Authentication</label>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
Update Security
</button>
</div>
</div>
<!-- Trading Preferences -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h3 class="text-lg font-medium mb-4">Trading Preferences</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Default Risk per Trade (%)</label>
<input type="number" value="2" min="0.1" max="10" step="0.1" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Default Take Profit (%)</label>
<input type="number" value="4" min="0.1" max="50" step="0.1" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Default Stop Loss (%)</label>
<input type="number" value="2" min="0.1" max="50" step="0.1" class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Preferred Trading Session</label>
<select class="w-full bg-gray-50 border border-gray-300 text-gray-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2">
<option>London Open</option>
<option>New York Open</option>
<option>Asian Session</option>
<option selected>All Sessions</option>
</select>
</div>
<div class="flex items-center">
<input id="email-alerts" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="email-alerts" class="ml-2 text-sm font-medium text-gray-900">Receive Email Alerts</label>
</div>
<div class="flex items-center">
<input id="push-alerts" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="push-alerts" class="ml-2 text-sm font-medium text-gray-900">Receive Push Notifications</label>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
Save Preferences
</button>
</div>
</div>
</div>
</div>
<!-- Integration Settings -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
<h2 class="text-xl font-bold mb-4">Integrations</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="border rounded-lg p-4 flex items-center">
<div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3">
<i class="fab fa-google"></i>
</div>
<div>
<div class="font-medium">Google Sheets</div>
<div class="text-xs text-gray-500">Sync trade data</div>
</div>
<div class="ml-auto">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
<div class="border rounded-lg p-4 flex items-center">
<div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
<i class="fab fa-telegram"></i>
</div>
<div>
<div class="font-medium">Telegram</div>
<div class="text-xs text-gray-500">Trade alerts</div>
</div>
<div class="ml-auto">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
<div class="border rounded-lg p-4 flex items-center">
<div class="h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 mr-3">
<i class="fab fa-slack"></i>
</div>
<div>
<div class="font-medium">Slack</div>
<div class="text-xs text-gray-500">Team notifications</div>
</div>
<div class="ml-auto">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
</div>
<h2 class="text-xl font-bold mb-4">API Connections</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<div class="font-medium">Broker API</div>
<span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Connected</span>
</div>
<div class="text-xs text-gray-500 mb-3">Connect to your broker for automated trading</div>
<button class="text-sm bg-red-100 text-red-800 px-3 py-1 rounded">Disconnect</button>
</div>
<div class="border rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<div class="font-medium">TradingView Webhooks</div>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full">Not Connected</span>
</div>
<div class="text-xs text-gray-500 mb-3">Receive alerts directly from your TradingView scripts</div>
<button class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded">Connect</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab management
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
button.classList.add('active');
const tabName = button.getAttribute('onclick').match(/'([^']+)'/)[1];
document.getElementById(tabName).classList.remove('hidden');
});
});
let journalEntries = [];
let tradeApi = null;
function showTab(tabName) {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
document.getElementById(tabName).classList.remove('hidden');
}
function updateChart() {
const commodity = document.getElementById("commodity").value;
const timeframe = document.getElementById("timeframe").value;
// Destroy previous widget if exists
const container = document.getElementById("tradingview-chart");
container.innerHTML = "";
tradeApi = new TradingView.widget({
"container_id": "tradingview-chart",
"width": "100%",
"height": "100%",
"symbol": commodity,
"interval": timeframe,
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": false,
"details": true,
"hotlist": true,
"calendar": true,
"news": ["headlines"],
"studies": ["RSI@tv-basicstudies", "MACD@tv-basicstudies", "StochasticRSI@tv-basicstudies",
"AwesomeOscillator@tv-basicstudies", "Momentum@tv-basicstudies", "BollingerBands@tv-basicstudies"],
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
});
simulateMarketData(commodity);
fetchIndicatorsAndSentiment(commodity, timeframe);
fetchEconomicCalendar();
}
function drawSupportResistance() {
alert("Support & Resistance tools activated. These would be drawn on the chart in a real implementation.");
}
function toggleFullScreenChart() {
const element = document.getElementById('tradingview-chart');
if (!document.fullscreenElement) {
element.requestFullscreen().catch(err => {
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
function saveChartImage() {
alert("Chart image saved to your device. In a real implementation, this would download the chart.");
}
function updateLastPrice() {
const prices = {
"OANDA:WTICOUSD": (Math.random() * 10 + 70).toFixed(2),
"OANDA:XAGUSD": (Math.random() * 2 + 22).toFixed(2),
"OANDA:XAUUSD": (Math.random() * 50 + 1800).toFixed(2),
"NASDAQ:AAPL": (Math.random() * 5 + 148).toFixed(2),
"NASDAQ:TSLA": (Math.random() * 20 + 670).toFixed(2),
"BINANCE:BTCUSD": (Math.random() * 1000 + 28000).toFixed(0)
};
const commodity = document.getElementById("commodity").value;
const lastPrice = prices[commodity] || "0.00";
document.getElementById("last-price").textContent = `$${lastPrice}`;
// Simulate change
const change = (Math.random() * 2 - 1).toFixed(2);
const percent = (Math.random() * 3 - 1.5).toFixed(2);
const changeElement = document.getElementById("price-change");
if (change >= 0) {
changeElement.textContent = `+$${change} (+${percent}%)`;
changeElement.className = "font-bold ml-2 text-green-600";
} else {
changeElement.textContent = `-$${Math.abs(change)} (${percent}%)`;
changeElement.className = "font-bold ml-2 text-red-600";
}
// Simulate volume
const volume = Math.floor(Math.random() * 10000000).toLocaleString();
document.getElementById("trade-volume").textContent = volume;
// Update time
const now = new Date();
document.getElementById("current-time").textContent = now.toLocaleTimeString();
}
function simulateMarketData(commodity) {
updateLastPrice();
setInterval(updateLastPrice, 3000);
}
function updateIndicators() {
const rsiPeriod = parseInt(document.getElementById("rsi-period").value);
const macdFast = parseInt(document.getElementById("macd-fast").value);
const macdSlow = parseInt(document.getElementById("macd-slow").value);
const macdSignal = parseInt(document.getElementById("macd-signal").value);
const stochasticK = parseInt(document.getElementById("stochastic-k").value);
const stochasticD = parseInt(document.getElementById("stochastic-d").value);
const timeframe = document.getElementById("timeframe").value;
const commodity = document.getElementById("commodity").value;
fetchIndicatorsAndSentiment(commodity, timeframe);
}
function fetchIndicatorsAndSentiment(commodity, timeframe) {
const base = getIndicatorsBasedOnTimeframe(timeframe);
document.getElementById("rsi-value").textContent = base.rsi.toFixed(2);
document.getElementById("macd-value").textContent = base.macd.toFixed(2);
document.getElementById("stochastic-value").textContent = base.stochastic.toFixed(2);
document.getElementById("ao-value").textContent = base.ao.toFixed(2);
document.getElementById("momentum-value").textContent = base.momentum.toFixed(2);
document.getElementById("bollinger-value").textContent = base.bollinger;
updateRecommendation("rsi", base.rsi);
updateRecommendation("macd", base.macd);
updateRecommendation("stochastic", base.stochastic);
updateRecommendation("ao", base.ao);
updateRecommendation("momentum", base.momentum);
updateRecommendation("bollinger", base.bollingerPos);
updateMarketSentiment(commodity);
}
function updateMarketSentiment(commodity) {
// Retail position (often contrarian)
const retailLong = Math.floor(Math.random() * 30 + 50);
const retailShort = 100 - retailLong;
document.getElementById("retail-position").textContent = retailLong > 50
? `${retailLong}% Long`
: `${retailShort}% Short`;
// Institutional position (more accurate)
const instLong = Math.floor(Math.random() * 30 + 35);
const instShort = 100 - instLong;
document.getElementById("institutional-position").textContent = instLong > 60
? `${instLong}% Long`
: `${instShort}% Short`;
}
function updateRecommendation(id, value) {
let recommendation = "";
let className = "";
if (id === "rsi") {
recommendation = getRSIRecommendation(value);
className = recommendation.includes("Buy") ? "bg-green-100 text-green-800" :
recommendation.includes("Sell") ? "bg-red-100 text-red-800" : "bg-blue-100 text-blue-800";
}
else if (id === "macd") {
recommendation = getMACDRecommendation(value);
className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
}
else if (id === "stochastic") {
recommendation = getStochasticRecommendation(value);
className = value < 30 ? "bg-green-100 text-green-800" :
value > 70 ? "bg-red-100 text-red-800" : "bg-blue-100 text-blue-800";
}
else if (id === "ao") {
recommendation = getAORecommendation(value);
className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
}
else if (id === "momentum") {
recommendation = getMomentumRecommendation(value);
className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
}
else if (id === "bollinger") {
recommendation = getBollingerRecommendation(value);
className = value === "Upper" ? "bg-red-100 text-red-800" :
value === "Lower" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800";
}
document.getElementById(`${id}-recommendation`).textContent = recommendation;
document.getElementById(`${id}-recommendation`).className = `text-xs px-2 py-0.5 rounded-full ${className}`;
}
function getIndicatorsBasedOnTimeframe(timeframe) {
const base = {
rsi: Math.random() * 40 + 30,
macd: Math.random() * 2 - 1,
stochastic: Math.random() * 100,
ao: Math.random() * 2 - 1,
momentum: Math.random() * 100 - 50,
bollingerPos: ["Upper", "Mid", "Lower"][Math.floor(Math.random() * 3)],
bollinger: ""
};
// Add some variation based on timeframe
switch (timeframe) {
case "1": base.rsi += 5; break;
case "5": base.macd += 0.1; break;
case "15": base.stochastic += 10; break;
case "60": base.ao += 0.5; break;
case "240": base.momentum += 15; break;
case "D": base.rsi -= 10; break;
case "W": base.stochastic -= 15; break;
}
base.bollinger = base.bollingerPos === "Upper" ? "Upper Band" :
base.bollingerPos === "Lower" ? "Lower Band" : "Mid Band";
return base;
}
function getRSIRecommendation(rsi) {
if (rsi < 30) return "Buy (Oversold)";
if (rsi > 70) return "Sell (Overbought)";
return "Neutral";
}
function getMACDRecommendation(macd) {
return macd > 0 ? "Buy" : "Sell";
}
function getStochasticRecommendation(stochastic) {
if (stochastic < 20) return "Buy (Oversold)";
if (stochastic > 80) return "Sell (Overbought)";
return "Neutral";
}
function getAORecommendation(ao) {
return ao > 0 ? "Buy" : "Sell";
}
function getMomentumRecommendation(momentum) {
return momentum > 0 ? "Buy" : "Sell";
}
function getBollingerRecommendation(position) {
if (position === "Upper") return "Overbought";
if (position === "Lower") return "Oversold";
return "Neutral";
}
function fetchEconomicCalendar() {
const events = [
{ date: "10:00 ET", event: "US Non-Farm Payrolls", impact: "High", actual: "263K", forecast: "200K" },
{ date: "10:00 ET", event: "Unemployment Rate", impact: "High", actual: "3.6%", forecast: "3.7%" },
{ date: "08:30 ET", event: "Average Hourly Earnings", impact: "Medium", actual: "0.3%", forecast: "0.3%" },
{ date: "Tomorrow 10:00 ET", event: "ISM Manufacturing PMI", impact: "Medium", actual: "-", forecast: "51.5" },
{ date: "Tomorrow 14:00 ET", event: "Fed Chair Powell Speaks", impact: "Medium", actual: "-", forecast: "-" },
{ date: "Jun 12 10:00 AM", event: "CPI m/m", impact: "High", actual: "-", forecast: "0.2%" },
{ date: "Jun 12 10:00 AM", event: "Core CPI m/m", impact: "High", actual: "-", forecast: "0.3%" },
{ date: "Jun 14 08:30 AM", event: "Retail Sales m/m", impact: "Medium", actual: "-", forecast: "0.4%" }
];
const calendarBody = document.getElementById("calendar-body");
calendarBody.innerHTML = "";
events.forEach(event => {
const row = document.createElement("tr");
const impactClass = event.impact === "High" ? "bg-red-500" : "bg-yellow-500";
row.innerHTML = `
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">${event.date}</td>
<td class="px-3 py-2 text-xs">
<div class="flex items-center">
<span class="h-2 w-2 ${impactClass} rounded-full mr-1"></span>
${event.event}
</div>
</td>
<td class="px-3 py-2 whitespace-nowrap text-xs ${event.actual !== "-" ? "font-bold" : "text-gray-500"}">${event.actual}</td>
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">${event.forecast}</td>
`;
calendarBody.appendChild(row);
});
// Initialize charts
initCharts();
}
function showMoreEconomicEvents() {
alert("In a real implementation, this would load more economic calendar events.");
}
function toggleCalendarFilter() {
const filterElement = document.getElementById("calendar-filter");
filterElement.classList.toggle("hidden");
}
function filterCalendar(type) {
alert(`Filtering economic calendar for ${type} impact events.`);
toggleCalendarFilter();
}
function refreshSentimentData() {
const commodity = document.getElementById("commodity").value;
updateMarketSentiment(commodity);
// Show refresh animation
const refreshBtn = document.querySelector("#dashboard button[onclick='refreshSentimentData()'] i");
refreshBtn.classList.add("fa-spin");
setTimeout(() => refreshBtn.classList.remove("fa-spin"), 1000);
}
function generateNewIdeas() {
alert("Generating new AI-powered trading ideas based on current market conditions.");
}
function filterJournalEntries() {
const symbol = document.getElementById("journal-symbol").value;
const startDate = document.getElementById("journal-start-date").value;
const endDate = document.getElementById("journal-end-date").value;
let filtered = journalEntries;
if (symbol) {
filtered = filtered.filter(entry => entry.symbol === symbol);
}
if (startDate) {
filtered = filtered.filter(entry => entry.date >= startDate);
}
if (endDate) {
filtered = filtered.filter(entry => entry.date <= endDate);
}
renderJournalEntries(filtered);
}
function saveTrade() {
const date = document.getElementById("trade-date").value;
const symbol = document.getElementById("trade-symbol").value.toUpperCase();
const side = document.getElementById("trade-side").value;
const size = parseFloat(document.getElementById("trade-size").value);
const entryPrice = parseFloat(document.getElementById("entry-price").value);
const exitPrice = parseFloat(document.getElementById("exit-price").value);
const notes = document.getElementById("trade-notes").value;
if (!date || !symbol || isNaN(size) || isNaN(entryPrice) || isNaN(exitPrice)) {
alert("Please fill in all required fields with valid values.");
return;
}
const pl = side === "long" ? (exitPrice - entryPrice) * size : (entryPrice - exitPrice) * size;
const plPercent = side === "long"
? ((exitPrice - entryPrice) / entryPrice * 100).toFixed(2)
: ((entryPrice - exitPrice) / entryPrice * 100).toFixed(2);
const newEntry = {
id: Date.now(),
date,
symbol,
side,
size,
entryPrice,
exitPrice,
pl,
plPercent,
notes
};
journalEntries.push(newEntry);
renderJournalEntries();
clearTradeForm();
// Show success message
alert("Trade successfully saved to your journal!");
}
function clearTradeForm() {
document.getElementById("trade-date").value = "";
document.getElementById("trade-symbol").value = "";
document.getElementById("trade-side").value = "long";
document.getElementById("trade-size").value = "";
document.getElementById("entry-price").value = "";
document.getElementById("exit-price").value = "";
document.getElementById("trade-notes").value = "";
}
function renderJournalEntries(entries = journalEntries) {
const journalBody = document.getElementById("journal-body");
journalBody.innerHTML = "";
if (entries.length === 0) {
journalBody.innerHTML = `
<tr>
<td colspan="8" class="px-4 py-4 text-center text-sm text-gray-500">
No journal entries found. Add your first trade record.
</td>
</tr>
`;
return;
}
entries.forEach(entry => {
const row = document.createElement("tr");
row.className = "hover:bg-gray-50";
const plClass = entry.pl >= 0 ? "text-green-600" : "text-red-600";
const sideClass = entry.side === "long" ? "text-green-600" : "text-red-600";
row.innerHTML = `
<td class="px-4 py-2 whitespace-nowrap text-sm">${entry.date}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">${entry.symbol}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm ${sideClass}">${entry.side.charAt(0).toUpperCase() + entry.side.slice(1)}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm">${entry.size}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm">$${entry.entryPrice.toFixed(2)}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm">$${entry.exitPrice.toFixed(2)}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm ${plClass}">$${entry.pl.toFixed(2)} (${entry.plPercent}%)</td>
<td class="px-4 py-2 whitespace-nowrap text-sm">
<button onclick="editTrade('${entry.id}')" class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-edit"></i>
</button>
<button onclick="deleteTrade('${entry.id}')" class="text-red-600 hover:text-red-800">
<i class="fas fa-trash-alt"></i>
</button>
</td>
`;
journalBody.appendChild(row);
});
}
function editTrade(id) {
const entry = journalEntries.find(entry => entry.id === parseInt(id));
if (!entry) return;
// Populate form
document.getElementById("trade-date").value = entry.date;
document.getElementById("trade-symbol").value = entry.symbol;
document.getElementById("trade-side").value = entry.side;
document.getElementById("trade-size").value = entry.size;
document.getElementById("entry-price").value = entry.entryPrice;
document.getElementById("exit-price").value = entry.exitPrice;
document.getElementById("trade-notes").value = entry.notes || "";
// Remove from journal
journalEntries = journalEntries.filter(e => e.id !== parseInt(id));
// Scroll to form
document.getElementById("journal").scrollIntoView({ behavior: "smooth" });
}
function deleteTrade(id) {
if (confirm("Are you sure you want to delete this trade record? This cannot be undone.")) {
journalEntries = journalEntries.filter(entry => entry.id !== parseInt(id));
renderJournalEntries();
}
}
function exportJournal() {
if (journalEntries.length === 0) {
alert("No journal entries to export.");
return;
}
// Add sample data if empty
if (journalEntries.length === 0) {
addSampleJournalData();
}
// Generate CSV
const headers = ["Date", "Symbol", "Side", "Size", "Entry Price", "Exit Price", "P/L (%)", "Notes"];
const rows = journalEntries.map(entry => [
entry.date,
entry.symbol,
entry.side,
entry.size,
entry.entryPrice,
entry.exitPrice,
entry.plPercent,
entry.notes || ""
]);
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += headers.join(",") + "\n";
rows.forEach(rowArray => {
csvContent += rowArray.join(",") + "\n";
});
// Download
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "trading_journal_export.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function addSampleJournalData() {
const sampleEntries = [
{
id: 1,
date: "2023-05-15",
symbol: "AAPL",
side: "long",
size: 100,
entryPrice: 145.23,
exitPrice: 152.76,
pl: (152.76 - 145.23) * 100,
plPercent: ((152.76 - 145.23) / 145.23 * 100).toFixed(2),
notes: "Breakout above resistance with high volume"
},
{
id: 2,
date: "2023-05-18",
symbol: "TSLA",
side: "long",
size: 20,
entryPrice: 680.50,
exitPrice: 692.35,
pl: (692.35 - 680.50) * 20,
plPercent: ((692.35 - 680.50) / 680.50 * 100).toFixed(2),
notes: "Earnings play, sold after initial pop"
},
{
id: 3,
date: "2023-05-20",
symbol: "XAUUSD",
side: "short",
size: 0.5,
entryPrice: 1832.45,
exitPrice: 1828.90,
pl: (1832.45 - 1828.90) * 0.5,
plPercent: ((1832.45 - 1828.90) / 1832.45 * 100).toFixed(2),
notes: "Short at resistance with bearish RSI divergence"
}
];
journalEntries = sampleEntries;
renderJournalEntries(journalEntries);
}
function refreshHoldings() {
// Show refresh animation
const refreshBtn = document.querySelector("#portfolio button[onclick='refreshHoldings()'] i");
refreshBtn.classList.add("fa-spin");
setTimeout(() => refreshBtn.classList.remove("fa-spin"), 1000);
alert("Refreshing portfolio holdings data from your broker.");
}
function initCharts() {
// Performance chart (small)
const performanceCtx = document.getElementById('performanceChart').getContext('2d');
new Chart(performanceCtx, {
type: 'line',
data: {
labels: Array.from({length: 12}, (_, i) => i + 1),
datasets: [{
data: [20, 22, 18, 25, 28, 30, 28, 32, 34, 38, 42, 45],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
plugins: { legend: { display: false } },
scales: {
x: { display: false },
y: { display: false }
},
elements: { point: { radius: 0 } }
}
});
// Journal chart
const journalCtx = document.getElementById('journalChart').getContext('2d');
new Chart(journalCtx, {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => `${i+1}`),
datasets: [{
label: 'P/L %',
data: [0, 0.8, 1.2, -0.5, 1.5, 2.2, 3.5, 2.8, 3.1, 4.2,
5.0, 4.6, 5.5, 7.2, 8.1, 9.3, 8.6, 10.1, 11.4, 12.8,
14.0, 15.2, 16.8, 18.4, 19.2, 17.8, 19.6, 21.4, 22.8, 24.3],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
x: { grid: { display: false } },
y: { ticks: { callback: value => `${value}%` } }
},
elements: { point: { radius: 0 } }
}
});
// Portfolio allocation chart
const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
new Chart(portfolioCtx, {
type: 'doughnut',
data: {
labels: ['Stocks', 'ETFs', 'Commodities', 'Crypto', 'Cash'],
datasets: [{
data: [75, 15, 5, 0, 5],
backgroundColor: [
'#3B82F6',
'#F59E0B',
'#8B5CF6',
'#EF4444',
'#6B7280'
],
borderWidth: 0
}]
},
options: {
responsive: true,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
// Portfolio performance chart
const portfolioPerfCtx = document.getElementById('portfolioPerformanceChart').getContext('2d');
new Chart(portfolioPerfCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Portfolio Value ($)',
data: [38500, 37200, 39000, 40200, 39500, 41000, 41800, 42500, 43500, 44200, 45000, 46500],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: {
beginAtZero: false,
ticks: { callback: value => `$${(value / 1000).toFixed(0)}k` }
}
}
}
});
}
// Initialize when page loads
window.onload = function() {
updateChart();
addSampleJournalData();
};
</script>
<!-- Chart.js for performance charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/tradingver2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>