Hugging Face's logo

Spaces:
alterzick
/
tradingver2
Running

App Files Community
alterzick commited on
Commit
b2a6b0b
·
verified ·
1 Parent(s): e96b11e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1906 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tradingver2
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tradingver2
3
+ emoji: ⚛️
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - QwenSite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1906 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Advanced Trading Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://s3.tradingview.com/tv.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .tab {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .blink {
15
+ animation: blink-animation 1s steps(5, start) infinite;
16
+ }
17
+ @keyframes blink-animation {
18
+ to { opacity: 0.5; }
19
+ }
20
+ .tooltip {
21
+ position: relative;
22
+ display: inline-block;
23
+ }
24
+ .tooltip .tooltiptext {
25
+ visibility: hidden;
26
+ width: 220px;
27
+ background-color: #333;
28
+ color: #fff;
29
+ text-align: center;
30
+ border-radius: 6px;
31
+ padding: 5px;
32
+ position: absolute;
33
+ z-index: 1;
34
+ bottom: 125%;
35
+ left: 50%;
36
+ transform: translateX(-50%);
37
+ opacity: 0;
38
+ transition: opacity 0.3s;
39
+ font-size: 12px;
40
+ }
41
+ .tooltip:hover .tooltiptext {
42
+ visibility: visible;
43
+ opacity: 1;
44
+ }
45
+ #economic-calendar::-webkit-scrollbar {
46
+ width: 6px;
47
+ }
48
+ #economic-calendar::-webkit-scrollbar-track {
49
+ background: #f1f1f1;
50
+ }
51
+ #economic-calendar::-webkit-scrollbar-thumb {
52
+ background: #888;
53
+ border-radius: 3px;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-50 text-gray-800 font-sans antialiased">
58
+ <!-- Header -->
59
+ <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
60
+ <div class="container mx-auto px-4 py-3 md:py-4 flex justify-between items-center">
61
+ <div class="flex items-center space-x-2">
62
+ <i class="fas fa-chart-line text-xl"></i>
63
+ <h1 class="text-2xl md:text-3xl font-bold">AlphaTrader Pro</h1>
64
+ </div>
65
+ <div class="flex items-center space-x-4">
66
+ <div class="hidden md:flex items-center space-x-2 bg-blue-700 px-3 py-1 rounded-full">
67
+ <div class="h-2 w-2 bg-green-400 rounded-full animate-pulse"></div>
68
+ <span class="text-sm">Live</span>
69
+ </div>
70
+ <div class="flex items-center space-x-1">
71
+ <i class="fas fa-bell text-white"></i>
72
+ <span class="hidden md:inline text-xs bg-red-500 rounded-full px-1.5 py-0.5 -ml-2 -mt-4">3</span>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </header>
77
+
78
+ <!-- Main Container -->
79
+ <div class="container mx-auto px-4 py-6">
80
+ <!-- Tab Navigation -->
81
+ <div class="flex justify-center space-x-2 mb-6 bg-white rounded-lg shadow-sm p-1 max-w-2xl mx-auto">
82
+ <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">
83
+ <i class="fas fa-tachometer-alt mr-2"></i>
84
+ Dashboard
85
+ </button>
86
+ <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">
87
+ <i class="fas fa-book mr-2"></i>
88
+ Journal
89
+ </button>
90
+ <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">
91
+ <i class="fas fa-wallet mr-2"></i>
92
+ Portfolio
93
+ </button>
94
+ <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">
95
+ <i class="fas fa-cog mr-2"></i>
96
+ Settings
97
+ </button>
98
+ </div>
99
+
100
+ <!-- Dashboard Tab -->
101
+ <div id="dashboard" class="tab-content">
102
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
103
+ <!-- Market Overview -->
104
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
105
+ <div class="flex justify-between items-center mb-3">
106
+ <h2 class="text-lg font-semibold">Market Overview</h2>
107
+ <i class="fas fa-globe text-blue-500"></i>
108
+ </div>
109
+ <div class="space-y-3">
110
+ <div class="flex justify-between">
111
+ <div>
112
+ <div class="text-gray-500 text-sm">S&P 500</div>
113
+ <div class="font-bold">4,300.21</div>
114
+ </div>
115
+ <div class="text-green-500">+1.23% <i class="fas fa-arrow-up"></i></div>
116
+ </div>
117
+ <div class="flex justify-between">
118
+ <div>
119
+ <div class="text-gray-500 text-sm">NASDAQ</div>
120
+ <div class="font-bold">12,830.45</div>
121
+ </div>
122
+ <div class="text-red-500">-0.75% <i class="fas fa-arrow-down"></i></div>
123
+ </div>
124
+ <div class="flex justify-between">
125
+ <div>
126
+ <div class="text-gray-500 text-sm">DOW</div>
127
+ <div class="font-bold">33,420.78</div>
128
+ </div>
129
+ <div class="text-green-500">+0.45% <i class="fas fa-arrow-up"></i></div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Trading Signals -->
135
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
136
+ <div class="flex justify-between items-center mb-3">
137
+ <h2 class="text-lg font-semibold">Trading Signals</h2>
138
+ <i class="fas fa-bolt text-yellow-500"></i>
139
+ </div>
140
+ <div class="space-y-3">
141
+ <div class="flex justify-between items-center">
142
+ <div class="flex items-center">
143
+ <div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
144
+ <span class="text-sm">Strong Buy (NVDA)</span>
145
+ </div>
146
+ <span class="text-xs text-gray-500">2 min ago</span>
147
+ </div>
148
+ <div class="flex justify-between items-center">
149
+ <div class="flex items-center">
150
+ <div class="h-2 w-2 bg-red-500 rounded-full mr-2"></div>
151
+ <span class="text-sm">Bearish Divergence (BTC)</span>
152
+ </div>
153
+ <span class="text-xs text-gray-500">15 min ago</span>
154
+ </div>
155
+ <div class="flex justify-between items-center">
156
+ <div class="flex items-center">
157
+ <div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
158
+ <span class="text-sm">Golden Cross (GOLD)</span>
159
+ </div>
160
+ <span class="text-xs text-gray-500">1 hr ago</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Risk Management -->
166
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
167
+ <div class="flex justify-between items-center mb-3">
168
+ <h2 class="text-lg font-semibold">Risk Management</h2>
169
+ <i class="fas fa-shield-alt text-red-500"></i>
170
+ </div>
171
+ <div class="mb-3">
172
+ <div class="flex justify-between text-sm mb-1">
173
+ <span>Risk Score</span>
174
+ <span>3/10 (Low)</span>
175
+ </div>
176
+ <div class="w-full bg-gray-200 rounded-full h-2">
177
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 30%"></div>
178
+ </div>
179
+ </div>
180
+ <div class="text-sm space-y-2">
181
+ <div class="flex justify-between">
182
+ <span>Max Position</span>
183
+ <span class="font-medium">$25,000</span>
184
+ </div>
185
+ <div class="flex justify-between">
186
+ <span>Stop Loss</span>
187
+ <span class="font-medium">2%</span>
188
+ </div>
189
+ <div class="flex justify-between">
190
+ <span>Take Profit</span>
191
+ <span class="font-medium">4%</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Performance -->
197
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
198
+ <div class="flex justify-between items-center mb-3">
199
+ <h2 class="text-lg font-semibold">Performance</h2>
200
+ <i class="fas fa-trophy text-purple-500"></i>
201
+ </div>
202
+ <div class="flex items-end justify-between">
203
+ <div>
204
+ <div class="text-3xl font-bold text-green-600">+28.4%</div>
205
+ <div class="text-sm text-gray-500">3 Months</div>
206
+ </div>
207
+ <div class="w-24 h-16">
208
+ <canvas id="performanceChart"></canvas>
209
+ </div>
210
+ </div>
211
+ <div class="grid grid-cols-3 gap-2 mt-4 text-center text-xs">
212
+ <div class="bg-gray-100 p-2 rounded">
213
+ <div class="font-bold">76%</div>
214
+ <div class="text-gray-500">Win Rate</div>
215
+ </div>
216
+ <div class="bg-gray-100 p-2 rounded">
217
+ <div class="font-bold">1.83</div>
218
+ <div class="text-gray-500">Profit Factor</div>
219
+ </div>
220
+ <div class="bg-gray-100 p-2 rounded">
221
+ <div class="font-bold">12.5</div>
222
+ <div class="text-gray-500">Avg Trade (Days)</div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
229
+ <!-- Trading Chart Section -->
230
+ <div class="lg:col-span-2">
231
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
232
+ <div class="flex flex-wrap justify-between items-center mb-4 gap-2">
233
+ <div class="flex items-center space-x-4">
234
+ <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">
235
+ <option value="OANDA:WTICOUSD">Crude Oil (WTI)</option>
236
+ <option value="OANDA:XAGUSD">Silver</option>
237
+ <option value="OANDA:XAUUSD">Gold</option>
238
+ <option value="NASDAQ:AAPL">Apple (AAPL)</option>
239
+ <option value="NASDAQ:TSLA">Tesla (TSLA)</option>
240
+ <option value="BINANCE:BTCUSD">Bitcoin (BTC)</option>
241
+ </select>
242
+
243
+ <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">
244
+ <option value="1">1M</option>
245
+ <option value="5">5M</option>
246
+ <option value="15">15M</option>
247
+ <option value="60">1H</option>
248
+ <option value="240">4H</option>
249
+ <option value="D">1D</option>
250
+ <option value="W">1W</option>
251
+ </select>
252
+ </div>
253
+
254
+ <div class="flex space-x-2">
255
+ <button onclick="drawSupportResistance()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
256
+ <i class="fas fa-ruler-combined"></i>
257
+ </button>
258
+ <button onclick="toggleFullScreenChart()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
259
+ <i class="fas fa-expand"></i>
260
+ </button>
261
+ <button onclick="saveChartImage()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-full">
262
+ <i class="fas fa-camera"></i>
263
+ </button>
264
+ </div>
265
+ </div>
266
+
267
+ <div id="tradingview-chart" style="height: 500px;"></div>
268
+
269
+ <div class="flex justify-between mt-4 text-sm">
270
+ <div>
271
+ <span class="text-gray-500">Last Price:</span>
272
+ <span id="last-price" class="font-bold ml-2 blink text-blue-600">Loading...</span>
273
+ </div>
274
+ <div>
275
+ <span class="text-gray-500">Change:</span>
276
+ <span id="price-change" class="font-bold ml-2">Loading...</span>
277
+ </div>
278
+ <div>
279
+ <span class="text-gray-500">Volume:</span>
280
+ <span id="trade-volume" class="font-bold ml-2">Loading...</span>
281
+ </div>
282
+ <div>
283
+ <span class="text-gray-500">Time:</span>
284
+ <span id="current-time" class="font-bold ml-2">Loading...</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Indicators and Analysis -->
291
+ <div class="space-y-6">
292
+ <!-- Technical Indicators -->
293
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
294
+ <div class="flex justify-between items-center mb-3">
295
+ <h2 class="text-lg font-semibold">Technical Indicators</h2>
296
+ <div class="tooltip">
297
+ <i class="fas fa-info-circle text-gray-400"></i>
298
+ <span class="tooltiptext">Indicator parameters can be adjusted below</span>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-2 gap-4">
303
+ <div>
304
+ <label for="rsi-period" class="block text-xs font-medium text-gray-700 mb-1">RSI Period</label>
305
+ <div class="relative">
306
+ <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">
307
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-xs text-gray-500">days</div>
308
+ </div>
309
+ </div>
310
+ <div>
311
+ <label for="macd-fast" class="block text-xs font-medium text-gray-700 mb-1">MACD Fast</label>
312
+ <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">
313
+ </div>
314
+ <div>
315
+ <label for="macd-slow" class="block text-xs font-medium text-gray-700 mb-1">MACD Slow</label>
316
+ <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">
317
+ </div>
318
+ <div>
319
+ <label for="macd-signal" class="block text-xs font-medium text-gray-700 mb-1">MACD Signal</label>
320
+ <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">
321
+ </div>
322
+ <div>
323
+ <label for="stochastic-k" class="block text-xs font-medium text-gray-700 mb-1">Stochastic %K</label>
324
+ <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">
325
+ </div>
326
+ <div>
327
+ <label for="stochastic-d" class="block text-xs font-medium text-gray-700 mb-1">Stochastic %D</label>
328
+ <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">
329
+ </div>
330
+ <div>
331
+ <label for="bollinger-period" class="block text-xs font-medium text-gray-700 mb-1">Bollinger Period</label>
332
+ <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">
333
+ </div>
334
+ <div>
335
+ <label for="bollinger-deviation" class="block text-xs font-medium text-gray-700 mb-1">Bollinger Deviations</label>
336
+ <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">
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Indicator Values -->
342
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
343
+ <h2 class="text-lg font-semibold mb-3">Current Values</h2>
344
+ <div class="grid grid-cols-2 gap-3">
345
+ <div class="border-b pb-2">
346
+ <div class="text-xs text-gray-500">RSI</div>
347
+ <div class="flex justify-between items-center">
348
+ <span id="rsi-value" class="font-bold">58.42</span>
349
+ <span id="rsi-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">Neutral</span>
350
+ </div>
351
+ </div>
352
+ <div class="border-b pb-2">
353
+ <div class="text-xs text-gray-500">MACD</div>
354
+ <div class="flex justify-between items-center">
355
+ <span id="macd-value" class="font-bold">1.23</span>
356
+ <span id="macd-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800">Buy</span>
357
+ </div>
358
+ </div>
359
+ <div class="border-b pb-2">
360
+ <div class="text-xs text-gray-500">Stochastic</div>
361
+ <div class="flex justify-between items-center">
362
+ <span id="stochastic-value" class="font-bold">64.56</span>
363
+ <span id="stochastic-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">Neutral</span>
364
+ </div>
365
+ </div>
366
+ <div class="border-b pb-2">
367
+ <div class="text-xs text-gray-500">Bollinger</div>
368
+ <div class="flex justify-between items-center">
369
+ <span id="bollinger-value" class="font-bold">Mid</span>
370
+ <span id="bollinger-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">Neutral</span>
371
+ </div>
372
+ </div>
373
+ <div>
374
+ <div class="text-xs text-gray-500">Awesome Osc.</div>
375
+ <div class="flex justify-between items-center">
376
+ <span id="ao-value" class="font-bold">-0.42</span>
377
+ <span id="ao-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-800">Sell</span>
378
+ </div>
379
+ </div>
380
+ <div>
381
+ <div class="text-xs text-gray-500">Momentum</div>
382
+ <div class="flex justify-between items-center">
383
+ <span id="momentum-value" class="font-bold">1.15</span>
384
+ <span id="momentum-recommendation" class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800">Buy</span>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
393
+ <!-- Order Panel -->
394
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
395
+ <h2 class="text-lg font-semibold mb-3">Order Panel</h2>
396
+ <div class="grid grid-cols-2 gap-4">
397
+ <div>
398
+ <label class="block text-xs font-medium text-gray-700 mb-1">Type</label>
399
+ <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">
400
+ <option>Market</option>
401
+ <option>Limit</option>
402
+ <option>Stop</option>
403
+ <option>Stop Limit</option>
404
+ </select>
405
+ </div>
406
+ <div>
407
+ <label class="block text-xs font-medium text-gray-700 mb-1">Side</label>
408
+ <div class="flex">
409
+ <button class="flex-1 bg-green-500 hover:bg-green-600 text-white text-sm py-1 rounded-l-lg focus:outline-none">
410
+ Buy
411
+ </button>
412
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white text-sm py-1 rounded-r-lg focus:outline-none">
413
+ Sell
414
+ </button>
415
+ </div>
416
+ </div>
417
+ <div>
418
+ <label class="block text-xs font-medium text-gray-700 mb-1">Quantity</label>
419
+ <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">
420
+ </div>
421
+ <div>
422
+ <label class="block text-xs font-medium text-gray-700 mb-1">Price</label>
423
+ <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">
424
+ </div>
425
+ </div>
426
+ <div class="mt-4 grid grid-cols-2 gap-2">
427
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none">
428
+ Place Order
429
+ </button>
430
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg focus:outline-none">
431
+ Cancel
432
+ </button>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Position Summary -->
437
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
438
+ <div class="flex justify-between items-center mb-3">
439
+ <h2 class="text-lg font-semibold">Active Positions</h2>
440
+ <button class="text-xs text-blue-600 hover:underline">View All (3)</button>
441
+ </div>
442
+ <div class="overflow-auto">
443
+ <table class="min-w-full divide-y divide-gray-200">
444
+ <thead class="bg-gray-50">
445
+ <tr>
446
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
447
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
448
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
449
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
450
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
451
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
452
+ </tr>
453
+ </thead>
454
+ <tbody class="bg-white divide-y divide-gray-200">
455
+ <tr>
456
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">AAPL</td>
457
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">Long</td>
458
+ <td class="px-3 py-2 whitespace-nowrap text-sm">100</td>
459
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$145.23</td>
460
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$152.76</td>
461
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$753.00</td>
462
+ </tr>
463
+ <tr>
464
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">TSLA</td>
465
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">Long</td>
466
+ <td class="px-3 py-2 whitespace-nowrap text-sm">20</td>
467
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$680.50</td>
468
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$692.35</td>
469
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$237.00</td>
470
+ </tr>
471
+ <tr>
472
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">XAUUSD</td>
473
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-red-600">Short</td>
474
+ <td class="px-3 py-2 whitespace-nowrap text-sm">0.5</td>
475
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$1,832.45</td>
476
+ <td class="px-3 py-2 whitespace-nowrap text-sm">$1,828.90</td>
477
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-green-600">+$17.75</td>
478
+ </tr>
479
+ </tbody>
480
+ </table>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
486
+ <!-- Economic Calendar -->
487
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
488
+ <div class="flex justify-between items-center mb-3">
489
+ <h2 class="text-lg font-semibold">Economic Calendar</h2>
490
+ <div class="flex items-center space-x-2">
491
+ <button class="text-xs text-blue-600 hover:underline" onclick="showMoreEconomicEvents()">View More</button>
492
+ <div class="relative inline-block text-left">
493
+ <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">
494
+ Filter
495
+ </button>
496
+ <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">
497
+ <div class="py-1" role="none">
498
+ <a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('all')">All Events</a>
499
+ <a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('high')">High Impact</a>
500
+ <a href="#" class="block px-4 py-1 text-sm text-gray-700 hover:bg-gray-100" onclick="filterCalendar('medium')">Medium Impact</a>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div id="economic-calendar" class="overflow-auto max-h-64">
507
+ <table class="min-w-full divide-y divide-gray-200">
508
+ <thead class="bg-gray-50">
509
+ <tr>
510
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
511
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
512
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual</th>
513
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forecast</th>
514
+ </tr>
515
+ </thead>
516
+ <tbody id="calendar-body" class="bg-white divide-y divide-gray-200">
517
+ <tr>
518
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">10:00 ET</td>
519
+ <td class="px-3 py-2 text-xs">
520
+ <div class="flex items-center">
521
+ <span class="h-2 w-2 bg-red-500 rounded-full mr-1"></span>
522
+ US Non-Farm Payrolls
523
+ </div>
524
+ </td>
525
+ <td class="px-3 py-2 whitespace-nowrap text-xs font-bold">263K</td>
526
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">200K</td>
527
+ </tr>
528
+ <tr>
529
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">10:00 ET</td>
530
+ <td class="px-3 py-2 text-xs">
531
+ <div class="flex items-center">
532
+ <span class="h-2 w-2 bg-red-500 rounded-full mr-1"></span>
533
+ Unemployment Rate
534
+ </div>
535
+ </td>
536
+ <td class="px-3 py-2 whitespace-nowrap text-xs font-bold">3.6%</td>
537
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">3.7%</td>
538
+ </tr>
539
+ <tr>
540
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">08:30 ET</td>
541
+ <td class="px-3 py-2 text-xs">
542
+ <div class="flex items-center">
543
+ <span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
544
+ Average Hourly Earnings
545
+ </div>
546
+ </td>
547
+ <td class="px-3 py-2 whitespace-nowrap text-xs font-bold">0.3%</td>
548
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">0.3%</td>
549
+ </tr>
550
+ <tr>
551
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">Tomorrow 10:00 ET</td>
552
+ <td class="px-3 py-2 text-xs">
553
+ <div class="flex items-center">
554
+ <span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
555
+ ISM Manufacturing PMI
556
+ </div>
557
+ </td>
558
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
559
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">51.5</td>
560
+ </tr>
561
+ <tr>
562
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">Tomorrow 14:00 ET</td>
563
+ <td class="px-3 py-2 text-xs">
564
+ <div class="flex items-center">
565
+ <span class="h-2 w-2 bg-yellow-500 rounded-full mr-1"></span>
566
+ Fed Chair Powell Speaks
567
+ </div>
568
+ </td>
569
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
570
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">-</td>
571
+ </tr>
572
+ </tbody>
573
+ </table>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Market Sentiment -->
578
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
579
+ <div class="flex justify-between items-center mb-3">
580
+ <h2 class="text-lg font-semibold">Market Sentiment</h2>
581
+ <div class="flex items-center">
582
+ <span class="text-xs text-gray-500 mr-2">Updated 2 mins ago</span>
583
+ <button onclick="refreshSentimentData()" class="text-blue-600 hover:text-blue-800">
584
+ <i class="fas fa-sync-alt"></i>
585
+ </button>
586
+ </div>
587
+ </div>
588
+ <div class="space-y-4">
589
+ <div>
590
+ <div class="flex justify-between text-sm mb-1">
591
+ <span>Retail Traders</span>
592
+ <span id="retail-position">78% Long</span>
593
+ </div>
594
+ <div class="w-full bg-gray-200 rounded-full h-2">
595
+ <div class="bg-red-500 h-2 rounded-full" style="width: 78%"></div>
596
+ </div>
597
+ <div class="text-xs text-gray-500 mt-1">Retail traders are buying, which is often a contrarian indicator.</div>
598
+ </div>
599
+ <div>
600
+ <div class="flex justify-between text-sm mb-1">
601
+ <span>Institutional</span>
602
+ <span id="institutional-position">63% Short</span>
603
+ </div>
604
+ <div class="w-full bg-gray-200 rounded-full h-2">
605
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 37%"></div>
606
+ </div>
607
+ <div class="text-xs text-gray-500 mt-1">Large institutions are increasing short positions.</div>
608
+ </div>
609
+ <div>
610
+ <div class="text-sm mb-2">News Sentiment Analysis</div>
611
+ <div class="flex items-center">
612
+ <div class="flex-1 bg-gray-200 rounded-full h-2">
613
+ <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>
614
+ </div>
615
+ <span class="ml-2 text-xs font-bold text-green-600">65% Positive</span>
616
+ </div>
617
+ <div class="text-xs text-gray-500 mt-1">Recent news headlines show mostly positive sentiment.</div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- Trading Ideas -->
624
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
625
+ <div class="flex justify-between items-center mb-4">
626
+ <h2 class="text-lg font-semibold">Trading Ideas</h2>
627
+ <div class="flex items-center space-x-2">
628
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">AI Generated</span>
629
+ <button onclick="generateNewIdeas()" class="text-sm text-blue-600 hover:underline">New Ideas</button>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
634
+ <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
635
+ <div class="flex justify-between items-start mb-2">
636
+ <div class="flex items-center">
637
+ <span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
638
+ <span class="font-medium">AAPL</span>
639
+ </div>
640
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Technical</span>
641
+ </div>
642
+ <div class="text-sm mb-3">Potential breakout above $155 resistance with supporting volume and RSI confirming upward momentum.</div>
643
+ <div class="flex justify-between text-xs text-gray-500">
644
+ <span>Target: $162.50</span>
645
+ <span>Stop: $152.20</span>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
650
+ <div class="flex justify-between items-start mb-2">
651
+ <div class="flex items-center">
652
+ <span class="h-3 w-3 bg-red-500 rounded-full mr-2"></span>
653
+ <span class="font-medium">GOLD</span>
654
+ </div>
655
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full">Fundamental</span>
656
+ </div>
657
+ <div class="text-sm mb-3">Fed rate hike expectations putting pressure on gold prices. Potential short opportunity at resistance.</div>
658
+ <div class="flex justify-between text-xs text-gray-500">
659
+ <span>Target: $1,815</span>
660
+ <span>Stop: $1,850</span>
661
+ </div>
662
+ </div>
663
+
664
+ <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
665
+ <div class="flex justify-between items-start mb-2">
666
+ <div class="flex items-center">
667
+ <span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
668
+ <span class="font-medium">TSLA</span>
669
+ </div>
670
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Earnings</span>
671
+ </div>
672
+ <div class="text-sm mb-3">Earnings beat last quarter with guidance upgrade. Bullish pressure expected post-earnings.</div>
673
+ <div class="flex justify-between text-xs text-gray-500">
674
+ <span>Target: $725</span>
675
+ <span>Stop: $672</span>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+
682
+ <!-- Trading Journal Tab -->
683
+ <div id="trading-journal" class="tab-content hidden">
684
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
685
+ <h2 class="text-xl font-bold mb-4">Trading Journal</h2>
686
+
687
+ <div class="flex flex-col md:flex-row gap-4 mb-6">
688
+ <div class="w-full md:w-1/4">
689
+ <label for="journal-symbol" class="block text-sm font-medium text-gray-700 mb-1">Symbol</label>
690
+ <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">
691
+ <option value="">All Symbols</option>
692
+ <option value="AAPL">AAPL</option>
693
+ <option value="TSLA">TSLA</option>
694
+ <option value="XAUUSD">GOLD</option>
695
+ <option value="WTICOUSD">OIL</option>
696
+ </select>
697
+ </div>
698
+
699
+ <div class="w-full md:w-1/4">
700
+ <label for="journal-start-date" class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
701
+ <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">
702
+ </div>
703
+
704
+ <div class="w-full md:w-1/4">
705
+ <label for="journal-end-date" class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
706
+ <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">
707
+ </div>
708
+
709
+ <div class="w-full md:w-1/4 flex items-end">
710
+ <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">
711
+ <i class="fas fa-filter mr-2"></i> Filter
712
+ </button>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="flex justify-between items-center mb-4">
717
+ <h3 class="text-lg font-medium">Recent Trades</h3>
718
+ <button onclick="exportJournal()" class="text-sm text-blue-600 hover:underline flex items-center">
719
+ <i class="fas fa-file-export mr-1"></i> Export
720
+ </button>
721
+ </div>
722
+
723
+ <div class="overflow-x-auto">
724
+ <table class="min-w-full bg-white border rounded-lg shadow-sm">
725
+ <thead class="bg-gray-50">
726
+ <tr>
727
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
728
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
729
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
730
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
731
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
732
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exit</th>
733
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L (%)</th>
734
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
735
+ </tr>
736
+ </thead>
737
+ <tbody id="journal-body" class="divide-y divide-gray-200">
738
+ <!-- Journal entries will be dynamically inserted here -->
739
+ </tbody>
740
+ </table>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
745
+ <!-- Add New Trade -->
746
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
747
+ <h3 class="text-lg font-medium mb-4">Add New Trade</h3>
748
+
749
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
750
+ <div>
751
+ <label for="trade-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
752
+ <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">
753
+ </div>
754
+
755
+ <div>
756
+ <label for="trade-symbol" class="block text-sm font-medium text-gray-700 mb-1">Symbol</label>
757
+ <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">
758
+ </div>
759
+
760
+ <div>
761
+ <label for="trade-side" class="block text-sm font-medium text-gray-700 mb-1">Side</label>
762
+ <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">
763
+ <option value="long">Long</option>
764
+ <option value="short">Short</option>
765
+ </select>
766
+ </div>
767
+
768
+ <div>
769
+ <label for="trade-size" class="block text-sm font-medium text-gray-700 mb-1">Size</label>
770
+ <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">
771
+ </div>
772
+
773
+ <div>
774
+ <label for="entry-price" class="block text-sm font-medium text-gray-700 mb-1">Entry Price</label>
775
+ <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">
776
+ </div>
777
+
778
+ <div>
779
+ <label for="exit-price" class="block text-sm font-medium text-gray-700 mb-1">Exit Price</label>
780
+ <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">
781
+ </div>
782
+ </div>
783
+
784
+ <div class="mb-4">
785
+ <label for="trade-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
786
+ <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>
787
+ </div>
788
+
789
+ <div class="grid grid-cols-2 gap-4">
790
+ <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">
791
+ <i class="fas fa-save mr-2"></i> Save Trade
792
+ </button>
793
+ <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">
794
+ <i class="fas fa-times mr-2"></i> Clear
795
+ </button>
796
+ </div>
797
+ </div>
798
+
799
+ <!-- Trade Statistics -->
800
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
801
+ <h3 class="text-lg font-medium mb-4">Trade Statistics</h3>
802
+
803
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
804
+ <div class="bg-gray-50 p-3 rounded-lg">
805
+ <div class="text-xs text-gray-500 mb-1">Total Trades</div>
806
+ <div class="text-2xl font-bold">28</div>
807
+ </div>
808
+ <div class="bg-gray-50 p-3 rounded-lg">
809
+ <div class="text-xs text-gray-500 mb-1">Win Rate</div>
810
+ <div class="text-2xl font-bold text-green-600">71%</div>
811
+ </div>
812
+ <div class="bg-gray-50 p-3 rounded-lg">
813
+ <div class="text-xs text-gray-500 mb-1">Avg. P/L %</div>
814
+ <div class="text-2xl font-bold text-green-600">2.8%</div>
815
+ </div>
816
+ <div class="bg-gray-50 p-3 rounded-lg">
817
+ <div class="text-xs text-gray-500 mb-1">Profit Factor</div>
818
+ <div class="text-2xl font-bold">1.83</div>
819
+ </div>
820
+ <div class="bg-gray-50 p-3 rounded-lg">
821
+ <div class="text-xs text-gray-500 mb-1">Max Drawdown</div>
822
+ <div class="text-2xl font-bold text-red-600">-12.5%</div>
823
+ </div>
824
+ <div class="bg-gray-50 p-3 rounded-lg">
825
+ <div class="text-xs text-gray-500 mb-1">Avg. Trade Days</div>
826
+ <div class="text-2xl font-bold">5.2</div>
827
+ </div>
828
+ </div>
829
+
830
+ <div class="mb-6">
831
+ <div class="flex justify-between text-sm mb-1">
832
+ <span>Performance Over Time</span>
833
+ <span>Last 30 Trades</span>
834
+ </div>
835
+ <div class="h-40">
836
+ <canvas id="journalChart"></canvas>
837
+ </div>
838
+ </div>
839
+
840
+ <div>
841
+ <div class="text-sm font-medium mb-2">Best Performing Trades</div>
842
+ <div class="overflow-auto">
843
+ <table class="min-w-full divide-y divide-gray-200">
844
+ <thead class="bg-gray-50">
845
+ <tr>
846
+ <th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
847
+ <th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Side</th>
848
+ <th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
849
+ <th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L %</th>
850
+ </tr>
851
+ </thead>
852
+ <tbody class="bg-white divide-y divide-gray-200">
853
+ <tr>
854
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-medium">AMD</td>
855
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">Long</td>
856
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$1,245</td>
857
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+32.5%</td>
858
+ </tr>
859
+ <tr>
860
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-medium">TSLA</td>
861
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">Long</td>
862
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$872</td>
863
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+18.4%</td>
864
+ </tr>
865
+ <tr>
866
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-medium">XAUUSD</td>
867
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-red-600">Short</td>
868
+ <td class="px-2 py-1 whitespace-nowrap text-xs font-bold text-green-600">+$498</td>
869
+ <td class="px-2 py-1 whitespace-nowrap text-xs text-green-600">+15.2%</td>
870
+ </tr>
871
+ </tbody>
872
+ </table>
873
+ </div>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ </div>
878
+
879
+ <!-- Portfolio Tab -->
880
+ <div id="portfolio" class="tab-content hidden">
881
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
882
+ <h2 class="text-xl font-bold mb-6">Portfolio Overview</h2>
883
+
884
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
885
+ <div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
886
+ <div class="text-xs text-blue-800 mb-1">Total Portfolio Value</div>
887
+ <div class="text-2xl font-bold">$42,876.34</div>
888
+ </div>
889
+ <div class="bg-green-50 p-4 rounded-xl border border-green-100">
890
+ <div class="text-xs text-green-800 mb-1">Today's P/L ($)</div>
891
+ <div class="text-2xl font-bold text-green-600">+$287.45</div>
892
+ </div>
893
+ <div class="bg-green-50 p-4 rounded-xl border border-green-100">
894
+ <div class="text-xs text-green-800 mb-1">Today's P/L (%)</div>
895
+ <div class="text-2xl font-bold text-green-600">+0.67%</div>
896
+ </div>
897
+ <div class="bg-purple-50 p-4 rounded-xl border border-purple-100">
898
+ <div class="text-xs text-purple-800 mb-1">All Time P/L (%)</div>
899
+ <div class="text-2xl font-bold text-purple-600">+29.4%</div>
900
+ </div>
901
+ </div>
902
+
903
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
904
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
905
+ <div class="flex justify-between items-center mb-3">
906
+ <h3 class="text-lg font-medium">Current Holdings</h3>
907
+ <button onclick="refreshHoldings()" class="text-blue-600 hover:text-blue-800">
908
+ <i class="fas fa-sync-alt"></i>
909
+ </button>
910
+ </div>
911
+ <div class="overflow-auto">
912
+ <table class="min-w-full divide-y divide-gray-200">
913
+ <thead class="bg-gray-50">
914
+ <tr>
915
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
916
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shares</th>
917
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Cost</th>
918
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
919
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
920
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
921
+ </tr>
922
+ </thead>
923
+ <tbody id="holdings-body">
924
+ <tr>
925
+ <td class="px-3 py-2 whitespace-nowrap">
926
+ <div class="flex items-center">
927
+ <div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
928
+ <span class="font-medium">AAPL</span>
929
+ </div>
930
+ </td>
931
+ <td class="px-3 py-2 whitespace-nowrap">100</td>
932
+ <td class="px-3 py-2 whitespace-nowrap">$145.23</td>
933
+ <td class="px-3 py-2 whitespace-nowrap">$152.76</td>
934
+ <td class="px-3 py-2 whitespace-nowrap text-green-600 font-medium">+$753.00</td>
935
+ <td class="px-3 py-2 whitespace-nowrap">
936
+ <button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded hover:bg-red-200">Sell</button>
937
+ </td>
938
+ </tr>
939
+ <tr>
940
+ <td class="px-3 py-2 whitespace-nowrap">
941
+ <div class="flex items-center">
942
+ <div class="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
943
+ <span class="font-medium">TSLA</span>
944
+ </div>
945
+ </td>
946
+ <td class="px-3 py-2 whitespace-nowrap">20</td>
947
+ <td class="px-3 py-2 whitespace-nowrap">$680.50</td>
948
+ <td class="px-3 py-2 whitespace-nowrap">$692.35</td>
949
+ <td class="px-3 py-2 whitespace-nowrap text-green-600 font-medium">+$237.00</td>
950
+ <td class="px-3 py-2 whitespace-nowrap">
951
+ <button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded hover:bg-red-200">Sell</button>
952
+ </td>
953
+ </tr>
954
+ <tr>
955
+ <td class="px-3 py-2 whitespace-nowrap">
956
+ <div class="flex items-center">
957
+ <div class="h-2 w-2 bg-blue-500 rounded-full mr-2"></div>
958
+ <span class="font-medium">SPY</span>
959
+ </div>
960
+ </td>
961
+ <td class="px-3 py-2 whitespace-nowrap">50</td>
962
+ <td class="px-3 py-2 whitespace-nowrap">$415.70</td>
963
+ <td class="px-3 py-2 whitespace-nowrap">$412.25</td>
964
+ <td class="px-3 py-2 whitespace-nowrap text-red-600 font-medium">-$172.50</td>
965
+ <td class="px-3 py-2 whitespace-nowrap">
966
+ <button class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded hover:bg-blue-200">Buy More</button>
967
+ </td>
968
+ </tr>
969
+ </tbody>
970
+ </table>
971
+ </div>
972
+ </div>
973
+
974
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
975
+ <div class="flex justify-between items-center mb-3">
976
+ <h3 class="text-lg font-medium">Allocation & Diversification</h3>
977
+ <div class="flex items-center">
978
+ <span class="text-xs text-gray-500">By Value</span>
979
+ <button class="ml-2 text-blue-600 hover:text-blue-800">
980
+ <i class="fas fa-filter"></i>
981
+ </button>
982
+ </div>
983
+ </div>
984
+ <div class="h-64">
985
+ <canvas id="portfolioChart"></canvas>
986
+ </div>
987
+ <div class="flex justify-center mt-4">
988
+ <div class="flex items-center mr-4">
989
+ <div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
990
+ <span class="text-xs">Stocks (75%)</span>
991
+ </div>
992
+ <div class="flex items-center mr-4">
993
+ <div class="h-3 w-3 bg-yellow-500 rounded-full mr-1"></div>
994
+ <span class="text-xs">ETFs (15%)</span>
995
+ </div>
996
+ <div class="flex items-center">
997
+ <div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
998
+ <span class="text-xs">Commodities (10%)</span>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+
1004
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
1005
+ <div class="flex justify-between items-center mb-3">
1006
+ <h3 class="text-lg font-medium">Performance Over Time</h3>
1007
+ <div class="flex items-center space-x-2">
1008
+ <button class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">1M</button>
1009
+ <button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">3M</button>
1010
+ <button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">1Y</button>
1011
+ <button class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">All</button>
1012
+ </div>
1013
+ </div>
1014
+ <div class="h-64">
1015
+ <canvas id="portfolioPerformanceChart"></canvas>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <!-- Settings Tab -->
1022
+ <div id="settings" class="tab-content hidden">
1023
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6">
1024
+ <h2 class="text-xl font-bold mb-6">Account Settings</h2>
1025
+
1026
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
1027
+ <!-- Profile Settings -->
1028
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
1029
+ <h3 class="text-lg font-medium mb-4">Profile Information</h3>
1030
+
1031
+ <div class="flex items-center mb-6">
1032
+ <div class="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">
1033
+ <i class="fas fa-user text-2xl"></i>
1034
+ </div>
1035
+ <div class="ml-4">
1036
+ <button class="text-sm text-blue-600 hover:underline">Upload New Photo</button>
1037
+ <div class="text-xs text-gray-500 mt-1">JPG, GIF or PNG. Max size 2MB</div>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <div class="space-y-4">
1042
+ <div>
1043
+ <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
1044
+ <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">
1045
+ </div>
1046
+
1047
+ <div>
1048
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
1049
+ <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">
1050
+ </div>
1051
+
1052
+ <div>
1053
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
1054
+ <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">
1055
+ </div>
1056
+
1057
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
1058
+ Save Changes
1059
+ </button>
1060
+ </div>
1061
+ </div>
1062
+
1063
+ <!-- Security Settings -->
1064
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
1065
+ <h3 class="text-lg font-medium mb-4">Security Settings</h3>
1066
+
1067
+ <div class="space-y-4">
1068
+ <div>
1069
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
1070
+ <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">
1071
+ </div>
1072
+
1073
+ <div>
1074
+ <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
1075
+ <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">
1076
+ </div>
1077
+
1078
+ <div>
1079
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
1080
+ <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">
1081
+ </div>
1082
+
1083
+ <div class="flex items-center">
1084
+ <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">
1085
+ <label for="2fa-checkbox" class="ml-2 text-sm font-medium text-gray-900">Enable Two-Factor Authentication</label>
1086
+ </div>
1087
+
1088
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
1089
+ Update Security
1090
+ </button>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <!-- Trading Preferences -->
1095
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
1096
+ <h3 class="text-lg font-medium mb-4">Trading Preferences</h3>
1097
+
1098
+ <div class="space-y-4">
1099
+ <div>
1100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Default Risk per Trade (%)</label>
1101
+ <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">
1102
+ </div>
1103
+
1104
+ <div>
1105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Default Take Profit (%)</label>
1106
+ <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">
1107
+ </div>
1108
+
1109
+ <div>
1110
+ <label class="block text-sm font-medium text-gray-700 mb-1">Default Stop Loss (%)</label>
1111
+ <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">
1112
+ </div>
1113
+
1114
+ <div>
1115
+ <label class="block text-sm font-medium text-gray-700 mb-1">Preferred Trading Session</label>
1116
+ <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">
1117
+ <option>London Open</option>
1118
+ <option>New York Open</option>
1119
+ <option>Asian Session</option>
1120
+ <option selected>All Sessions</option>
1121
+ </select>
1122
+ </div>
1123
+
1124
+ <div class="flex items-center">
1125
+ <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">
1126
+ <label for="email-alerts" class="ml-2 text-sm font-medium text-gray-900">Receive Email Alerts</label>
1127
+ </div>
1128
+
1129
+ <div class="flex items-center">
1130
+ <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">
1131
+ <label for="push-alerts" class="ml-2 text-sm font-medium text-gray-900">Receive Push Notifications</label>
1132
+ </div>
1133
+
1134
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg focus:outline-none mt-4">
1135
+ Save Preferences
1136
+ </button>
1137
+ </div>
1138
+ </div>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <!-- Integration Settings -->
1143
+ <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
1144
+ <h2 class="text-xl font-bold mb-4">Integrations</h2>
1145
+
1146
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
1147
+ <div class="border rounded-lg p-4 flex items-center">
1148
+ <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3">
1149
+ <i class="fab fa-google"></i>
1150
+ </div>
1151
+ <div>
1152
+ <div class="font-medium">Google Sheets</div>
1153
+ <div class="text-xs text-gray-500">Sync trade data</div>
1154
+ </div>
1155
+ <div class="ml-auto">
1156
+ <label class="relative inline-flex items-center cursor-pointer">
1157
+ <input type="checkbox" value="" class="sr-only peer" checked>
1158
+ <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>
1159
+ </label>
1160
+ </div>
1161
+ </div>
1162
+
1163
+ <div class="border rounded-lg p-4 flex items-center">
1164
+ <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
1165
+ <i class="fab fa-telegram"></i>
1166
+ </div>
1167
+ <div>
1168
+ <div class="font-medium">Telegram</div>
1169
+ <div class="text-xs text-gray-500">Trade alerts</div>
1170
+ </div>
1171
+ <div class="ml-auto">
1172
+ <label class="relative inline-flex items-center cursor-pointer">
1173
+ <input type="checkbox" value="" class="sr-only peer">
1174
+ <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>
1175
+ </label>
1176
+ </div>
1177
+ </div>
1178
+
1179
+ <div class="border rounded-lg p-4 flex items-center">
1180
+ <div class="h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 mr-3">
1181
+ <i class="fab fa-slack"></i>
1182
+ </div>
1183
+ <div>
1184
+ <div class="font-medium">Slack</div>
1185
+ <div class="text-xs text-gray-500">Team notifications</div>
1186
+ </div>
1187
+ <div class="ml-auto">
1188
+ <label class="relative inline-flex items-center cursor-pointer">
1189
+ <input type="checkbox" value="" class="sr-only peer" checked>
1190
+ <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>
1191
+ </label>
1192
+ </div>
1193
+ </div>
1194
+ </div>
1195
+
1196
+ <h2 class="text-xl font-bold mb-4">API Connections</h2>
1197
+
1198
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1199
+ <div class="border rounded-lg p-4">
1200
+ <div class="flex justify-between items-center mb-3">
1201
+ <div class="font-medium">Broker API</div>
1202
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Connected</span>
1203
+ </div>
1204
+ <div class="text-xs text-gray-500 mb-3">Connect to your broker for automated trading</div>
1205
+ <button class="text-sm bg-red-100 text-red-800 px-3 py-1 rounded">Disconnect</button>
1206
+ </div>
1207
+
1208
+ <div class="border rounded-lg p-4">
1209
+ <div class="flex justify-between items-center mb-3">
1210
+ <div class="font-medium">TradingView Webhooks</div>
1211
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full">Not Connected</span>
1212
+ </div>
1213
+ <div class="text-xs text-gray-500 mb-3">Receive alerts directly from your TradingView scripts</div>
1214
+ <button class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded">Connect</button>
1215
+ </div>
1216
+ </div>
1217
+ </div>
1218
+ </div>
1219
+ </div>
1220
+
1221
+ <script>
1222
+ // Tab management
1223
+ document.querySelectorAll('.tab-button').forEach(button => {
1224
+ button.addEventListener('click', () => {
1225
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
1226
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
1227
+
1228
+ button.classList.add('active');
1229
+ const tabName = button.getAttribute('onclick').match(/'([^']+)'/)[1];
1230
+ document.getElementById(tabName).classList.remove('hidden');
1231
+ });
1232
+ });
1233
+
1234
+ let journalEntries = [];
1235
+ let tradeApi = null;
1236
+
1237
+ function showTab(tabName) {
1238
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
1239
+ document.getElementById(tabName).classList.remove('hidden');
1240
+ }
1241
+
1242
+ function updateChart() {
1243
+ const commodity = document.getElementById("commodity").value;
1244
+ const timeframe = document.getElementById("timeframe").value;
1245
+
1246
+ // Destroy previous widget if exists
1247
+ const container = document.getElementById("tradingview-chart");
1248
+ container.innerHTML = "";
1249
+
1250
+ tradeApi = new TradingView.widget({
1251
+ "container_id": "tradingview-chart",
1252
+ "width": "100%",
1253
+ "height": "100%",
1254
+ "symbol": commodity,
1255
+ "interval": timeframe,
1256
+ "timezone": "Etc/UTC",
1257
+ "theme": "light",
1258
+ "style": "1",
1259
+ "locale": "en",
1260
+ "toolbar_bg": "#f1f3f6",
1261
+ "enable_publishing": false,
1262
+ "allow_symbol_change": false,
1263
+ "details": true,
1264
+ "hotlist": true,
1265
+ "calendar": true,
1266
+ "news": ["headlines"],
1267
+ "studies": ["RSI@tv-basicstudies", "MACD@tv-basicstudies", "StochasticRSI@tv-basicstudies",
1268
+ "AwesomeOscillator@tv-basicstudies", "Momentum@tv-basicstudies", "BollingerBands@tv-basicstudies"],
1269
+ "show_popup_button": true,
1270
+ "popup_width": "1000",
1271
+ "popup_height": "650"
1272
+ });
1273
+
1274
+ simulateMarketData(commodity);
1275
+ fetchIndicatorsAndSentiment(commodity, timeframe);
1276
+ fetchEconomicCalendar();
1277
+ }
1278
+
1279
+ function drawSupportResistance() {
1280
+ alert("Support & Resistance tools activated. These would be drawn on the chart in a real implementation.");
1281
+ }
1282
+
1283
+ function toggleFullScreenChart() {
1284
+ const element = document.getElementById('tradingview-chart');
1285
+ if (!document.fullscreenElement) {
1286
+ element.requestFullscreen().catch(err => {
1287
+ console.error(`Error attempting to enable full-screen mode: ${err.message}`);
1288
+ });
1289
+ } else {
1290
+ document.exitFullscreen();
1291
+ }
1292
+ }
1293
+
1294
+ function saveChartImage() {
1295
+ alert("Chart image saved to your device. In a real implementation, this would download the chart.");
1296
+ }
1297
+
1298
+ function updateLastPrice() {
1299
+ const prices = {
1300
+ "OANDA:WTICOUSD": (Math.random() * 10 + 70).toFixed(2),
1301
+ "OANDA:XAGUSD": (Math.random() * 2 + 22).toFixed(2),
1302
+ "OANDA:XAUUSD": (Math.random() * 50 + 1800).toFixed(2),
1303
+ "NASDAQ:AAPL": (Math.random() * 5 + 148).toFixed(2),
1304
+ "NASDAQ:TSLA": (Math.random() * 20 + 670).toFixed(2),
1305
+ "BINANCE:BTCUSD": (Math.random() * 1000 + 28000).toFixed(0)
1306
+ };
1307
+
1308
+ const commodity = document.getElementById("commodity").value;
1309
+ const lastPrice = prices[commodity] || "0.00";
1310
+
1311
+ document.getElementById("last-price").textContent = `$${lastPrice}`;
1312
+
1313
+ // Simulate change
1314
+ const change = (Math.random() * 2 - 1).toFixed(2);
1315
+ const percent = (Math.random() * 3 - 1.5).toFixed(2);
1316
+
1317
+ const changeElement = document.getElementById("price-change");
1318
+ if (change >= 0) {
1319
+ changeElement.textContent = `+$${change} (+${percent}%)`;
1320
+ changeElement.className = "font-bold ml-2 text-green-600";
1321
+ } else {
1322
+ changeElement.textContent = `-$${Math.abs(change)} (${percent}%)`;
1323
+ changeElement.className = "font-bold ml-2 text-red-600";
1324
+ }
1325
+
1326
+ // Simulate volume
1327
+ const volume = Math.floor(Math.random() * 10000000).toLocaleString();
1328
+ document.getElementById("trade-volume").textContent = volume;
1329
+
1330
+ // Update time
1331
+ const now = new Date();
1332
+ document.getElementById("current-time").textContent = now.toLocaleTimeString();
1333
+ }
1334
+
1335
+ function simulateMarketData(commodity) {
1336
+ updateLastPrice();
1337
+ setInterval(updateLastPrice, 3000);
1338
+ }
1339
+
1340
+ function updateIndicators() {
1341
+ const rsiPeriod = parseInt(document.getElementById("rsi-period").value);
1342
+ const macdFast = parseInt(document.getElementById("macd-fast").value);
1343
+ const macdSlow = parseInt(document.getElementById("macd-slow").value);
1344
+ const macdSignal = parseInt(document.getElementById("macd-signal").value);
1345
+ const stochasticK = parseInt(document.getElementById("stochastic-k").value);
1346
+ const stochasticD = parseInt(document.getElementById("stochastic-d").value);
1347
+
1348
+ const timeframe = document.getElementById("timeframe").value;
1349
+ const commodity = document.getElementById("commodity").value;
1350
+ fetchIndicatorsAndSentiment(commodity, timeframe);
1351
+ }
1352
+
1353
+ function fetchIndicatorsAndSentiment(commodity, timeframe) {
1354
+ const base = getIndicatorsBasedOnTimeframe(timeframe);
1355
+
1356
+ document.getElementById("rsi-value").textContent = base.rsi.toFixed(2);
1357
+ document.getElementById("macd-value").textContent = base.macd.toFixed(2);
1358
+ document.getElementById("stochastic-value").textContent = base.stochastic.toFixed(2);
1359
+ document.getElementById("ao-value").textContent = base.ao.toFixed(2);
1360
+ document.getElementById("momentum-value").textContent = base.momentum.toFixed(2);
1361
+ document.getElementById("bollinger-value").textContent = base.bollinger;
1362
+
1363
+ updateRecommendation("rsi", base.rsi);
1364
+ updateRecommendation("macd", base.macd);
1365
+ updateRecommendation("stochastic", base.stochastic);
1366
+ updateRecommendation("ao", base.ao);
1367
+ updateRecommendation("momentum", base.momentum);
1368
+ updateRecommendation("bollinger", base.bollingerPos);
1369
+
1370
+ updateMarketSentiment(commodity);
1371
+ }
1372
+
1373
+ function updateMarketSentiment(commodity) {
1374
+ // Retail position (often contrarian)
1375
+ const retailLong = Math.floor(Math.random() * 30 + 50);
1376
+ const retailShort = 100 - retailLong;
1377
+ document.getElementById("retail-position").textContent = retailLong > 50
1378
+ ? `${retailLong}% Long`
1379
+ : `${retailShort}% Short`;
1380
+
1381
+ // Institutional position (more accurate)
1382
+ const instLong = Math.floor(Math.random() * 30 + 35);
1383
+ const instShort = 100 - instLong;
1384
+ document.getElementById("institutional-position").textContent = instLong > 60
1385
+ ? `${instLong}% Long`
1386
+ : `${instShort}% Short`;
1387
+ }
1388
+
1389
+ function updateRecommendation(id, value) {
1390
+ let recommendation = "";
1391
+ let className = "";
1392
+
1393
+ if (id === "rsi") {
1394
+ recommendation = getRSIRecommendation(value);
1395
+ className = recommendation.includes("Buy") ? "bg-green-100 text-green-800" :
1396
+ recommendation.includes("Sell") ? "bg-red-100 text-red-800" : "bg-blue-100 text-blue-800";
1397
+ }
1398
+ else if (id === "macd") {
1399
+ recommendation = getMACDRecommendation(value);
1400
+ className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
1401
+ }
1402
+ else if (id === "stochastic") {
1403
+ recommendation = getStochasticRecommendation(value);
1404
+ className = value < 30 ? "bg-green-100 text-green-800" :
1405
+ value > 70 ? "bg-red-100 text-red-800" : "bg-blue-100 text-blue-800";
1406
+ }
1407
+ else if (id === "ao") {
1408
+ recommendation = getAORecommendation(value);
1409
+ className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
1410
+ }
1411
+ else if (id === "momentum") {
1412
+ recommendation = getMomentumRecommendation(value);
1413
+ className = value > 0 ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800";
1414
+ }
1415
+ else if (id === "bollinger") {
1416
+ recommendation = getBollingerRecommendation(value);
1417
+ className = value === "Upper" ? "bg-red-100 text-red-800" :
1418
+ value === "Lower" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800";
1419
+ }
1420
+
1421
+ document.getElementById(`${id}-recommendation`).textContent = recommendation;
1422
+ document.getElementById(`${id}-recommendation`).className = `text-xs px-2 py-0.5 rounded-full ${className}`;
1423
+ }
1424
+
1425
+ function getIndicatorsBasedOnTimeframe(timeframe) {
1426
+ const base = {
1427
+ rsi: Math.random() * 40 + 30,
1428
+ macd: Math.random() * 2 - 1,
1429
+ stochastic: Math.random() * 100,
1430
+ ao: Math.random() * 2 - 1,
1431
+ momentum: Math.random() * 100 - 50,
1432
+ bollingerPos: ["Upper", "Mid", "Lower"][Math.floor(Math.random() * 3)],
1433
+ bollinger: ""
1434
+ };
1435
+
1436
+ // Add some variation based on timeframe
1437
+ switch (timeframe) {
1438
+ case "1": base.rsi += 5; break;
1439
+ case "5": base.macd += 0.1; break;
1440
+ case "15": base.stochastic += 10; break;
1441
+ case "60": base.ao += 0.5; break;
1442
+ case "240": base.momentum += 15; break;
1443
+ case "D": base.rsi -= 10; break;
1444
+ case "W": base.stochastic -= 15; break;
1445
+ }
1446
+
1447
+ base.bollinger = base.bollingerPos === "Upper" ? "Upper Band" :
1448
+ base.bollingerPos === "Lower" ? "Lower Band" : "Mid Band";
1449
+
1450
+ return base;
1451
+ }
1452
+
1453
+ function getRSIRecommendation(rsi) {
1454
+ if (rsi < 30) return "Buy (Oversold)";
1455
+ if (rsi > 70) return "Sell (Overbought)";
1456
+ return "Neutral";
1457
+ }
1458
+
1459
+ function getMACDRecommendation(macd) {
1460
+ return macd > 0 ? "Buy" : "Sell";
1461
+ }
1462
+
1463
+ function getStochasticRecommendation(stochastic) {
1464
+ if (stochastic < 20) return "Buy (Oversold)";
1465
+ if (stochastic > 80) return "Sell (Overbought)";
1466
+ return "Neutral";
1467
+ }
1468
+
1469
+ function getAORecommendation(ao) {
1470
+ return ao > 0 ? "Buy" : "Sell";
1471
+ }
1472
+
1473
+ function getMomentumRecommendation(momentum) {
1474
+ return momentum > 0 ? "Buy" : "Sell";
1475
+ }
1476
+
1477
+ function getBollingerRecommendation(position) {
1478
+ if (position === "Upper") return "Overbought";
1479
+ if (position === "Lower") return "Oversold";
1480
+ return "Neutral";
1481
+ }
1482
+
1483
+ function fetchEconomicCalendar() {
1484
+ const events = [
1485
+ { date: "10:00 ET", event: "US Non-Farm Payrolls", impact: "High", actual: "263K", forecast: "200K" },
1486
+ { date: "10:00 ET", event: "Unemployment Rate", impact: "High", actual: "3.6%", forecast: "3.7%" },
1487
+ { date: "08:30 ET", event: "Average Hourly Earnings", impact: "Medium", actual: "0.3%", forecast: "0.3%" },
1488
+ { date: "Tomorrow 10:00 ET", event: "ISM Manufacturing PMI", impact: "Medium", actual: "-", forecast: "51.5" },
1489
+ { date: "Tomorrow 14:00 ET", event: "Fed Chair Powell Speaks", impact: "Medium", actual: "-", forecast: "-" },
1490
+ { date: "Jun 12 10:00 AM", event: "CPI m/m", impact: "High", actual: "-", forecast: "0.2%" },
1491
+ { date: "Jun 12 10:00 AM", event: "Core CPI m/m", impact: "High", actual: "-", forecast: "0.3%" },
1492
+ { date: "Jun 14 08:30 AM", event: "Retail Sales m/m", impact: "Medium", actual: "-", forecast: "0.4%" }
1493
+ ];
1494
+
1495
+ const calendarBody = document.getElementById("calendar-body");
1496
+ calendarBody.innerHTML = "";
1497
+
1498
+ events.forEach(event => {
1499
+ const row = document.createElement("tr");
1500
+
1501
+ const impactClass = event.impact === "High" ? "bg-red-500" : "bg-yellow-500";
1502
+
1503
+ row.innerHTML = `
1504
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">${event.date}</td>
1505
+ <td class="px-3 py-2 text-xs">
1506
+ <div class="flex items-center">
1507
+ <span class="h-2 w-2 ${impactClass} rounded-full mr-1"></span>
1508
+ ${event.event}
1509
+ </div>
1510
+ </td>
1511
+ <td class="px-3 py-2 whitespace-nowrap text-xs ${event.actual !== "-" ? "font-bold" : "text-gray-500"}">${event.actual}</td>
1512
+ <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">${event.forecast}</td>
1513
+ `;
1514
+ calendarBody.appendChild(row);
1515
+ });
1516
+
1517
+ // Initialize charts
1518
+ initCharts();
1519
+ }
1520
+
1521
+ function showMoreEconomicEvents() {
1522
+ alert("In a real implementation, this would load more economic calendar events.");
1523
+ }
1524
+
1525
+ function toggleCalendarFilter() {
1526
+ const filterElement = document.getElementById("calendar-filter");
1527
+ filterElement.classList.toggle("hidden");
1528
+ }
1529
+
1530
+ function filterCalendar(type) {
1531
+ alert(`Filtering economic calendar for ${type} impact events.`);
1532
+ toggleCalendarFilter();
1533
+ }
1534
+
1535
+ function refreshSentimentData() {
1536
+ const commodity = document.getElementById("commodity").value;
1537
+ updateMarketSentiment(commodity);
1538
+
1539
+ // Show refresh animation
1540
+ const refreshBtn = document.querySelector("#dashboard button[onclick='refreshSentimentData()'] i");
1541
+ refreshBtn.classList.add("fa-spin");
1542
+ setTimeout(() => refreshBtn.classList.remove("fa-spin"), 1000);
1543
+ }
1544
+
1545
+ function generateNewIdeas() {
1546
+ alert("Generating new AI-powered trading ideas based on current market conditions.");
1547
+ }
1548
+
1549
+ function filterJournalEntries() {
1550
+ const symbol = document.getElementById("journal-symbol").value;
1551
+ const startDate = document.getElementById("journal-start-date").value;
1552
+ const endDate = document.getElementById("journal-end-date").value;
1553
+
1554
+ let filtered = journalEntries;
1555
+
1556
+ if (symbol) {
1557
+ filtered = filtered.filter(entry => entry.symbol === symbol);
1558
+ }
1559
+
1560
+ if (startDate) {
1561
+ filtered = filtered.filter(entry => entry.date >= startDate);
1562
+ }
1563
+
1564
+ if (endDate) {
1565
+ filtered = filtered.filter(entry => entry.date <= endDate);
1566
+ }
1567
+
1568
+ renderJournalEntries(filtered);
1569
+ }
1570
+
1571
+ function saveTrade() {
1572
+ const date = document.getElementById("trade-date").value;
1573
+ const symbol = document.getElementById("trade-symbol").value.toUpperCase();
1574
+ const side = document.getElementById("trade-side").value;
1575
+ const size = parseFloat(document.getElementById("trade-size").value);
1576
+ const entryPrice = parseFloat(document.getElementById("entry-price").value);
1577
+ const exitPrice = parseFloat(document.getElementById("exit-price").value);
1578
+ const notes = document.getElementById("trade-notes").value;
1579
+
1580
+ if (!date || !symbol || isNaN(size) || isNaN(entryPrice) || isNaN(exitPrice)) {
1581
+ alert("Please fill in all required fields with valid values.");
1582
+ return;
1583
+ }
1584
+
1585
+ const pl = side === "long" ? (exitPrice - entryPrice) * size : (entryPrice - exitPrice) * size;
1586
+ const plPercent = side === "long"
1587
+ ? ((exitPrice - entryPrice) / entryPrice * 100).toFixed(2)
1588
+ : ((entryPrice - exitPrice) / entryPrice * 100).toFixed(2);
1589
+
1590
+ const newEntry = {
1591
+ id: Date.now(),
1592
+ date,
1593
+ symbol,
1594
+ side,
1595
+ size,
1596
+ entryPrice,
1597
+ exitPrice,
1598
+ pl,
1599
+ plPercent,
1600
+ notes
1601
+ };
1602
+
1603
+ journalEntries.push(newEntry);
1604
+ renderJournalEntries();
1605
+ clearTradeForm();
1606
+
1607
+ // Show success message
1608
+ alert("Trade successfully saved to your journal!");
1609
+ }
1610
+
1611
+ function clearTradeForm() {
1612
+ document.getElementById("trade-date").value = "";
1613
+ document.getElementById("trade-symbol").value = "";
1614
+ document.getElementById("trade-side").value = "long";
1615
+ document.getElementById("trade-size").value = "";
1616
+ document.getElementById("entry-price").value = "";
1617
+ document.getElementById("exit-price").value = "";
1618
+ document.getElementById("trade-notes").value = "";
1619
+ }
1620
+
1621
+ function renderJournalEntries(entries = journalEntries) {
1622
+ const journalBody = document.getElementById("journal-body");
1623
+ journalBody.innerHTML = "";
1624
+
1625
+ if (entries.length === 0) {
1626
+ journalBody.innerHTML = `
1627
+ <tr>
1628
+ <td colspan="8" class="px-4 py-4 text-center text-sm text-gray-500">
1629
+ No journal entries found. Add your first trade record.
1630
+ </td>
1631
+ </tr>
1632
+ `;
1633
+ return;
1634
+ }
1635
+
1636
+ entries.forEach(entry => {
1637
+ const row = document.createElement("tr");
1638
+ row.className = "hover:bg-gray-50";
1639
+
1640
+ const plClass = entry.pl >= 0 ? "text-green-600" : "text-red-600";
1641
+ const sideClass = entry.side === "long" ? "text-green-600" : "text-red-600";
1642
+
1643
+ row.innerHTML = `
1644
+ <td class="px-4 py-2 whitespace-nowrap text-sm">${entry.date}</td>
1645
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium">${entry.symbol}</td>
1646
+ <td class="px-4 py-2 whitespace-nowrap text-sm ${sideClass}">${entry.side.charAt(0).toUpperCase() + entry.side.slice(1)}</td>
1647
+ <td class="px-4 py-2 whitespace-nowrap text-sm">${entry.size}</td>
1648
+ <td class="px-4 py-2 whitespace-nowrap text-sm">$${entry.entryPrice.toFixed(2)}</td>
1649
+ <td class="px-4 py-2 whitespace-nowrap text-sm">$${entry.exitPrice.toFixed(2)}</td>
1650
+ <td class="px-4 py-2 whitespace-nowrap text-sm ${plClass}">$${entry.pl.toFixed(2)} (${entry.plPercent}%)</td>
1651
+ <td class="px-4 py-2 whitespace-nowrap text-sm">
1652
+ <button onclick="editTrade('${entry.id}')" class="text-blue-600 hover:text-blue-800 mr-2">
1653
+ <i class="fas fa-edit"></i>
1654
+ </button>
1655
+ <button onclick="deleteTrade('${entry.id}')" class="text-red-600 hover:text-red-800">
1656
+ <i class="fas fa-trash-alt"></i>
1657
+ </button>
1658
+ </td>
1659
+ `;
1660
+ journalBody.appendChild(row);
1661
+ });
1662
+ }
1663
+
1664
+ function editTrade(id) {
1665
+ const entry = journalEntries.find(entry => entry.id === parseInt(id));
1666
+ if (!entry) return;
1667
+
1668
+ // Populate form
1669
+ document.getElementById("trade-date").value = entry.date;
1670
+ document.getElementById("trade-symbol").value = entry.symbol;
1671
+ document.getElementById("trade-side").value = entry.side;
1672
+ document.getElementById("trade-size").value = entry.size;
1673
+ document.getElementById("entry-price").value = entry.entryPrice;
1674
+ document.getElementById("exit-price").value = entry.exitPrice;
1675
+ document.getElementById("trade-notes").value = entry.notes || "";
1676
+
1677
+ // Remove from journal
1678
+ journalEntries = journalEntries.filter(e => e.id !== parseInt(id));
1679
+
1680
+ // Scroll to form
1681
+ document.getElementById("journal").scrollIntoView({ behavior: "smooth" });
1682
+ }
1683
+
1684
+ function deleteTrade(id) {
1685
+ if (confirm("Are you sure you want to delete this trade record? This cannot be undone.")) {
1686
+ journalEntries = journalEntries.filter(entry => entry.id !== parseInt(id));
1687
+ renderJournalEntries();
1688
+ }
1689
+ }
1690
+
1691
+ function exportJournal() {
1692
+ if (journalEntries.length === 0) {
1693
+ alert("No journal entries to export.");
1694
+ return;
1695
+ }
1696
+
1697
+ // Add sample data if empty
1698
+ if (journalEntries.length === 0) {
1699
+ addSampleJournalData();
1700
+ }
1701
+
1702
+ // Generate CSV
1703
+ const headers = ["Date", "Symbol", "Side", "Size", "Entry Price", "Exit Price", "P/L (%)", "Notes"];
1704
+ const rows = journalEntries.map(entry => [
1705
+ entry.date,
1706
+ entry.symbol,
1707
+ entry.side,
1708
+ entry.size,
1709
+ entry.entryPrice,
1710
+ entry.exitPrice,
1711
+ entry.plPercent,
1712
+ entry.notes || ""
1713
+ ]);
1714
+
1715
+ let csvContent = "data:text/csv;charset=utf-8,";
1716
+ csvContent += headers.join(",") + "\n";
1717
+ rows.forEach(rowArray => {
1718
+ csvContent += rowArray.join(",") + "\n";
1719
+ });
1720
+
1721
+ // Download
1722
+ const encodedUri = encodeURI(csvContent);
1723
+ const link = document.createElement("a");
1724
+ link.setAttribute("href", encodedUri);
1725
+ link.setAttribute("download", "trading_journal_export.csv");
1726
+ document.body.appendChild(link);
1727
+ link.click();
1728
+ document.body.removeChild(link);
1729
+ }
1730
+
1731
+ function addSampleJournalData() {
1732
+ const sampleEntries = [
1733
+ {
1734
+ id: 1,
1735
+ date: "2023-05-15",
1736
+ symbol: "AAPL",
1737
+ side: "long",
1738
+ size: 100,
1739
+ entryPrice: 145.23,
1740
+ exitPrice: 152.76,
1741
+ pl: (152.76 - 145.23) * 100,
1742
+ plPercent: ((152.76 - 145.23) / 145.23 * 100).toFixed(2),
1743
+ notes: "Breakout above resistance with high volume"
1744
+ },
1745
+ {
1746
+ id: 2,
1747
+ date: "2023-05-18",
1748
+ symbol: "TSLA",
1749
+ side: "long",
1750
+ size: 20,
1751
+ entryPrice: 680.50,
1752
+ exitPrice: 692.35,
1753
+ pl: (692.35 - 680.50) * 20,
1754
+ plPercent: ((692.35 - 680.50) / 680.50 * 100).toFixed(2),
1755
+ notes: "Earnings play, sold after initial pop"
1756
+ },
1757
+ {
1758
+ id: 3,
1759
+ date: "2023-05-20",
1760
+ symbol: "XAUUSD",
1761
+ side: "short",
1762
+ size: 0.5,
1763
+ entryPrice: 1832.45,
1764
+ exitPrice: 1828.90,
1765
+ pl: (1832.45 - 1828.90) * 0.5,
1766
+ plPercent: ((1832.45 - 1828.90) / 1832.45 * 100).toFixed(2),
1767
+ notes: "Short at resistance with bearish RSI divergence"
1768
+ }
1769
+ ];
1770
+
1771
+ journalEntries = sampleEntries;
1772
+ renderJournalEntries(journalEntries);
1773
+ }
1774
+
1775
+ function refreshHoldings() {
1776
+ // Show refresh animation
1777
+ const refreshBtn = document.querySelector("#portfolio button[onclick='refreshHoldings()'] i");
1778
+ refreshBtn.classList.add("fa-spin");
1779
+ setTimeout(() => refreshBtn.classList.remove("fa-spin"), 1000);
1780
+
1781
+ alert("Refreshing portfolio holdings data from your broker.");
1782
+ }
1783
+
1784
+ function initCharts() {
1785
+ // Performance chart (small)
1786
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
1787
+ new Chart(performanceCtx, {
1788
+ type: 'line',
1789
+ data: {
1790
+ labels: Array.from({length: 12}, (_, i) => i + 1),
1791
+ datasets: [{
1792
+ data: [20, 22, 18, 25, 28, 30, 28, 32, 34, 38, 42, 45],
1793
+ borderColor: '#10B981',
1794
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1795
+ borderWidth: 2,
1796
+ fill: true,
1797
+ tension: 0.4
1798
+ }]
1799
+ },
1800
+ options: {
1801
+ plugins: { legend: { display: false } },
1802
+ scales: {
1803
+ x: { display: false },
1804
+ y: { display: false }
1805
+ },
1806
+ elements: { point: { radius: 0 } }
1807
+ }
1808
+ });
1809
+
1810
+ // Journal chart
1811
+ const journalCtx = document.getElementById('journalChart').getContext('2d');
1812
+ new Chart(journalCtx, {
1813
+ type: 'line',
1814
+ data: {
1815
+ labels: Array.from({length: 30}, (_, i) => `${i+1}`),
1816
+ datasets: [{
1817
+ label: 'P/L %',
1818
+ data: [0, 0.8, 1.2, -0.5, 1.5, 2.2, 3.5, 2.8, 3.1, 4.2,
1819
+ 5.0, 4.6, 5.5, 7.2, 8.1, 9.3, 8.6, 10.1, 11.4, 12.8,
1820
+ 14.0, 15.2, 16.8, 18.4, 19.2, 17.8, 19.6, 21.4, 22.8, 24.3],
1821
+ borderColor: '#3B82F6',
1822
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1823
+ borderWidth: 2,
1824
+ fill: true,
1825
+ tension: 0.3
1826
+ }]
1827
+ },
1828
+ options: {
1829
+ responsive: true,
1830
+ plugins: { legend: { display: false } },
1831
+ scales: {
1832
+ x: { grid: { display: false } },
1833
+ y: { ticks: { callback: value => `${value}%` } }
1834
+ },
1835
+ elements: { point: { radius: 0 } }
1836
+ }
1837
+ });
1838
+
1839
+ // Portfolio allocation chart
1840
+ const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
1841
+ new Chart(portfolioCtx, {
1842
+ type: 'doughnut',
1843
+ data: {
1844
+ labels: ['Stocks', 'ETFs', 'Commodities', 'Crypto', 'Cash'],
1845
+ datasets: [{
1846
+ data: [75, 15, 5, 0, 5],
1847
+ backgroundColor: [
1848
+ '#3B82F6',
1849
+ '#F59E0B',
1850
+ '#8B5CF6',
1851
+ '#EF4444',
1852
+ '#6B7280'
1853
+ ],
1854
+ borderWidth: 0
1855
+ }]
1856
+ },
1857
+ options: {
1858
+ responsive: true,
1859
+ cutout: '70%',
1860
+ plugins: {
1861
+ legend: { display: false },
1862
+ tooltip: { enabled: false }
1863
+ }
1864
+ }
1865
+ });
1866
+
1867
+ // Portfolio performance chart
1868
+ const portfolioPerfCtx = document.getElementById('portfolioPerformanceChart').getContext('2d');
1869
+ new Chart(portfolioPerfCtx, {
1870
+ type: 'line',
1871
+ data: {
1872
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
1873
+ datasets: [{
1874
+ label: 'Portfolio Value ($)',
1875
+ data: [38500, 37200, 39000, 40200, 39500, 41000, 41800, 42500, 43500, 44200, 45000, 46500],
1876
+ borderColor: '#10B981',
1877
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1878
+ borderWidth: 3,
1879
+ fill: true,
1880
+ tension: 0.4
1881
+ }]
1882
+ },
1883
+ options: {
1884
+ responsive: true,
1885
+ plugins: { legend: { display: false } },
1886
+ scales: {
1887
+ y: {
1888
+ beginAtZero: false,
1889
+ ticks: { callback: value => `$${(value / 1000).toFixed(0)}k` }
1890
+ }
1891
+ }
1892
+ }
1893
+ });
1894
+ }
1895
+
1896
+ // Initialize when page loads
1897
+ window.onload = function() {
1898
+ updateChart();
1899
+ addSampleJournalData();
1900
+ };
1901
+ </script>
1902
+
1903
+ <!-- Chart.js for performance charts -->
1904
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1905
+ <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>
1906
+ </html>
prompts.txt ADDED
File without changes