Hugging Face's logo

Spaces:
F-Play
/
deepsite-project-l7mn0
Running

App Files Community
F-Play commited on
Commit
349c469
·
verified ·
1 Parent(s): 94bf981

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +653 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project L7mn0
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: blue
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: DeepSite Project
3
+ colorFrom: green
4
+ colorTo: purple
 
5
  sdk: static
6
+ emoji: 🎨
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,653 @@
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>Personal Trading Session Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <style>
10
+ :root {
11
+ --bg-color: #0f172a;
12
+ --card-bg: #1e293b;
13
+ --input-bg: #334155;
14
+ --text-color: #f1f5f9;
15
+ --border-color: #475569;
16
+ --win-color: #10b981;
17
+ --loss-color: #ef4444;
18
+ --accent-color: #3b82f6;
19
+ }
20
+
21
+ .light-mode {
22
+ --bg-color: #f8fafc;
23
+ --card-bg: #ffffff;
24
+ --input-bg: #f1f5f9;
25
+ --text-color: #1e293b;
26
+ --border-color: #cbd5e1;
27
+ }
28
+
29
+ body {
30
+ background-color: var(--bg-color);
31
+ color: var(--text-color);
32
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .trade-card {
37
+ background-color: var(--card-bg);
38
+ border: 1px solid var(--border-color);
39
+ transition: all 0.2s;
40
+ }
41
+
42
+ .input-field {
43
+ background-color: var(--input-bg);
44
+ color: var(--text-color);
45
+ border: 1px solid var(--border-color);
46
+ }
47
+
48
+ .input-field:focus {
49
+ border-color: var(--accent-color);
50
+ outline: none;
51
+ ring: 2px solid var(--accent-color);
52
+ }
53
+
54
+ .btn-win {
55
+ background-color: var(--win-color);
56
+ color: white;
57
+ }
58
+
59
+ .btn-win:hover {
60
+ background-color: #059669;
61
+ }
62
+
63
+ .btn-loss {
64
+ background-color: var(--loss-color);
65
+ color: white;
66
+ }
67
+
68
+ .btn-loss:hover {
69
+ background-color: #dc2626;
70
+ }
71
+
72
+ .btn-action {
73
+ background-color: var(--accent-color);
74
+ color: white;
75
+ }
76
+
77
+ .btn-action:hover {
78
+ background-color: #2563eb;
79
+ }
80
+
81
+ .stat-box {
82
+ background-color: var(--card-bg);
83
+ border: 1px solid var(--border-color);
84
+ }
85
+
86
+ table {
87
+ width: 100%;
88
+ border-collapse: collapse;
89
+ }
90
+
91
+ th, td {
92
+ padding: 12px;
93
+ text-align: left;
94
+ border-bottom: 1px solid var(--border-color);
95
+ }
96
+
97
+ th {
98
+ background-color: var(--input-bg);
99
+ font-weight: 600;
100
+ }
101
+
102
+ tr:hover {
103
+ background-color: rgba(255,255,255,0.05);
104
+ }
105
+
106
+ .win-row {
107
+ color: var(--win-color);
108
+ }
109
+
110
+ .loss-row {
111
+ color: var(--loss-color);
112
+ }
113
+
114
+ .currency-input {
115
+ position: relative;
116
+ }
117
+
118
+ .currency-input::before {
119
+ content: '$';
120
+ position: absolute;
121
+ left: 12px;
122
+ top: 50%;
123
+ transform: translateY(-50%);
124
+ color: #94a3b8;
125
+ }
126
+
127
+ .currency-input input {
128
+ padding-left: 28px;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body class="min-h-screen p-4 md:p-8">
133
+ <div class="max-w-6xl mx-auto">
134
+ <!-- Header -->
135
+ <div class="flex justify-between items-center mb-8">
136
+ <div class="flex items-center gap-3">
137
+ <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
138
+ <i data-lucide="trending-up" class="text-white w-6 h-6"></i>
139
+ </div>
140
+ <div>
141
+ <h1 class="text-2xl font-bold">Trading Session Tracker</h1>
142
+ <p class="text-sm text-gray-400">Personal Trading Calculator</p>
143
+ </div>
144
+ </div>
145
+ <div class="flex gap-3">
146
+ <button onclick="exportData()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center gap-2 text-sm transition-colors">
147
+ <i data-lucide="download" class="w-4 h-4"></i>
148
+ Export Data
149
+ </button>
150
+ <label class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center gap-2 text-sm transition-colors cursor-pointer">
151
+ <i data-lucide="upload" class="w-4 h-4"></i>
152
+ Import Data
153
+ <input type="file" id="importFile" accept=".json" class="hidden" onchange="importData(this)">
154
+ </label>
155
+ <button onclick="toggleTheme()" class="w-10 h-10 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center justify-center transition-colors">
156
+ <i data-lucide="sun" class="w-5 h-5" id="themeIcon"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Main Grid -->
162
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
163
+
164
+ <!-- Left Column: Controls (C6, C8, C9, C10, C14 equivalent) -->
165
+ <div class="lg:col-span-4 space-y-6">
166
+
167
+ <!-- Starting Capital (C6) -->
168
+ <div class="trade-card rounded-xl p-6">
169
+ <label class="block text-sm font-medium text-gray-400 mb-2">Starting Capital</label>
170
+ <div class="currency-input">
171
+ <input type="number" id="startingCapital" class="input-field w-full rounded-lg px-4 py-3 text-xl font-bold"
172
+ value="10000" step="0.01" onchange="updateState()">
173
+ </div>
174
+ <p class="text-xs text-gray-500 mt-2">Updates automatically when starting new session</p>
175
+ </div>
176
+
177
+ <!-- Counters (C8, C9, C10) -->
178
+ <div class="trade-card rounded-xl p-6">
179
+ <h3 class="font-semibold mb-4 flex items-center gap-2">
180
+ <i data-lucide="bar-chart-2" class="w-5 h-5 text-blue-400"></i>
181
+ Session Counters
182
+ </h3>
183
+
184
+ <div class="grid grid-cols-2 gap-4 mb-4">
185
+ <div>
186
+ <label class="block text-xs text-gray-400 mb-1">Wins</label>
187
+ <input type="number" id="winCount" class="input-field w-full rounded-lg px-3 py-2 font-bold text-emerald-400"
188
+ value="0" readonly>
189
+ </div>
190
+ <div>
191
+ <label class="block text-xs text-gray-400 mb-1">Losses</label>
192
+ <input type="number" id="lossCount" class="input-field w-full rounded-lg px-3 py-2 font-bold text-red-400"
193
+ value="0" readonly>
194
+ </div>
195
+ </div>
196
+
197
+ <div>
198
+ <label class="block text-xs text-gray-400 mb-1">Total Trades</label>
199
+ <input type="number" id="totalCount" class="input-field w-full rounded-lg px-3 py-2 font-bold text-blue-400"
200
+ value="0" readonly>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Current Trade PNL (C14) -->
205
+ <div class="trade-card rounded-xl p-6 border-blue-500/30 border-2">
206
+ <label class="block text-sm font-medium text-blue-400 mb-2">Current Trade PNL</label>
207
+ <div class="currency-input">
208
+ <input type="number" id="currentTradePnl" class="input-field w-full rounded-lg px-4 py-3 text-xl font-bold"
209
+ placeholder="0.00" step="0.01">
210
+ </div>
211
+ <p class="text-xs text-gray-500 mt-2">Enter profit/loss for this trade, then click Win or Loss</p>
212
+ </div>
213
+
214
+ <!-- Session PNL Display -->
215
+ <div class="trade-card rounded-xl p-6 bg-gradient-to-br from-slate-800 to-slate-900">
216
+ <label class="block text-sm font-medium text-gray-400 mb-2">Current Session PNL</label>
217
+ <div class="text-3xl font-bold" id="sessionPnlDisplay">$0.00</div>
218
+ <div class="text-xs text-gray-500 mt-1">Running total for today's session</div>
219
+ </div>
220
+
221
+ <!-- Action Buttons -->
222
+ <div class="grid grid-cols-2 gap-3">
223
+ <button onclick="addWin()" class="btn-win py-4 rounded-xl font-bold text-lg flex items-center justify-center gap-2 shadow-lg transform active:scale-95 transition-all">
224
+ <i data-lucide="plus-circle" class="w-5 h-5"></i>
225
+ Add Win
226
+ </button>
227
+ <button onclick="addLoss()" class="btn-loss py-4 rounded-xl font-bold text-lg flex items-center justify-center gap-2 shadow-lg transform active:scale-95 transition-all">
228
+ <i data-lucide="minus-circle" class="w-5 h-5"></i>
229
+ Add Loss
230
+ </button>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-2 gap-3">
234
+ <button onclick="startSession()" class="btn-action py-3 rounded-xl font-semibold flex items-center justify-center gap-2 opacity-80 hover:opacity-100 transition-all">
235
+ <i data-lucide="play" class="w-4 h-4"></i>
236
+ Start Session
237
+ </button>
238
+ <button onclick="endSession()" class="bg-amber-600 hover:bg-amber-700 text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all">
239
+ <i data-lucide="flag" class="w-4 h-4"></i>
240
+ End Session
241
+ </button>
242
+ </div>
243
+
244
+ <button onclick="resetAll()" class="w-full py-2 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded-lg text-sm transition-colors border border-red-800/30">
245
+ <i data-lucide="trash-2" class="inline w-4 h-4 mr-2"></i>
246
+ Reset All Data
247
+ </button>
248
+ </div>
249
+
250
+ <!-- Right Column: Data Tables -->
251
+ <div class="lg:col-span-8 space-y-6">
252
+
253
+ <!-- Current Session Trades (DATA Sheet) -->
254
+ <div class="trade-card rounded-xl p-6">
255
+ <div class="flex justify-between items-center mb-4">
256
+ <h3 class="text-lg font-semibold flex items-center gap-2">
257
+ <i data-lucide="list" class="w-5 h-5 text-blue-400"></i>
258
+ Session Trade Log
259
+ </h3>
260
+ <span class="text-xs text-gray-500" id="tradeCountBadge">0 trades</span>
261
+ </div>
262
+
263
+ <div class="overflow-x-auto max-h-96 overflow-y-auto">
264
+ <table id="tradeTable">
265
+ <thead class="sticky top-0">
266
+ <tr>
267
+ <th>Trade #</th>
268
+ <th>Result</th>
269
+ <th>Timestamp</th>
270
+ <th>Profit/Loss</th>
271
+ <th>Action</th>
272
+ </tr>
273
+ </thead>
274
+ <tbody id="tradeTableBody">
275
+ <tr>
276
+ <td colspan="5" class="text-center py-8 text-gray-500 italic">
277
+ No trades recorded. Start by entering PNL and clicking Win or Loss.
278
+ </td>
279
+ </tr>
280
+ </tbody>
281
+ </table>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Daily PNL History (Column L) -->
286
+ <div class="trade-card rounded-xl p-6">
287
+ <div class="flex justify-between items-center mb-4">
288
+ <h3 class="text-lg font-semibold flex items-center gap-2">
289
+ <i data-lucide="calendar" class="w-5 h-5 text-amber-400"></i>
290
+ Daily PNL History
291
+ </h3>
292
+ <span class="text-xs text-gray-500">Last 14 sessions</span>
293
+ </div>
294
+
295
+ <div class="overflow-x-auto max-h-64 overflow-y-auto">
296
+ <table id="historyTable">
297
+ <thead class="sticky top-0">
298
+ <tr>
299
+ <th>Session Date</th>
300
+ <th>Daily PNL</th>
301
+ <th>Cumulative Capital</th>
302
+ </tr>
303
+ </thead>
304
+ <tbody id="historyTableBody">
305
+ <tr>
306
+ <td colspan="3" class="text-center py-8 text-gray-500 italic">
307
+ No session history. Click "End Session" to save daily PNL.
308
+ </td>
309
+ </tr>
310
+ </tbody>
311
+ </table>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Instructions -->
316
+ <div class="trade-card rounded-xl p-6 bg-blue-900/20 border-blue-800/30">
317
+ <h4 class="font-semibold text-blue-300 mb-3 flex items-center gap-2">
318
+ <i data-lucide="info" class="w-5 h-5"></i>
319
+ How to Use (Matching Google Sheets Workflow)
320
+ </h4>
321
+ <ol class="text-sm text-blue-200 space-y-2 list-decimal list-inside">
322
+ <li><strong>Start Session:</strong> Click to clear trade log and add previous day's PNL to Starting Capital</li>
323
+ <li><strong>Enter Trade PNL:</strong> Input the profit or loss amount in the Current Trade PNL field</li>
324
+ <li><strong>Record Trade:</strong> Click "Add Win" or "Add Loss" to log the trade with timestamp</li>
325
+ <li><strong>End Session:</strong> Click to save today's total PNL to the Daily History</li>
326
+ <li><strong>Next Day:</strong> Click Start Session again to roll over the capital and reset counters</li>
327
+ </ol>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <script>
334
+ // Initialize Lucide icons
335
+ lucide.createIcons();
336
+
337
+ // State Management
338
+ let appState = {
339
+ startingCapital: 10000,
340
+ dailyHistory: [], // Array of {date, pnl, id}
341
+ currentSession: {
342
+ trades: [], // Array of {tradeNumber, result, timestamp, profit, id}
343
+ nextTradeNumber: 1
344
+ },
345
+ isDarkMode: true
346
+ };
347
+
348
+ // Load from LocalStorage on startup
349
+ function loadState() {
350
+ const saved = localStorage.getItem('tradingSessionData');
351
+ if (saved) {
352
+ appState = JSON.parse(saved);
353
+ document.getElementById('startingCapital').value = appState.startingCapital || 10000;
354
+ updateUI();
355
+ }
356
+ }
357
+
358
+ // Save to LocalStorage
359
+ function saveState() {
360
+ localStorage.setItem('tradingSessionData', JSON.stringify(appState));
361
+ }
362
+
363
+ // Update all UI elements
364
+ function updateUI() {
365
+ // Update counters (C8, C9, C10)
366
+ const wins = appState.currentSession.trades.filter(t => t.result === 'Win').length;
367
+ const losses = appState.currentSession.trades.filter(t => t.result === 'Loss').length;
368
+ const total = appState.currentSession.trades.length;
369
+
370
+ document.getElementById('winCount').value = wins;
371
+ document.getElementById('lossCount').value = losses;
372
+ document.getElementById('totalCount').value = total;
373
+
374
+ // Calculate Session PNL
375
+ const sessionPnl = appState.currentSession.trades.reduce((sum, t) => sum + parseFloat(t.profit), 0);
376
+ const pnlElement = document.getElementById('sessionPnlDisplay');
377
+ pnlElement.textContent = formatCurrency(sessionPnl);
378
+ pnlElement.className = sessionPnl >= 0 ? 'text-3xl font-bold text-emerald-400' : 'text-3xl font-bold text-red-400';
379
+
380
+ // Update trade table (DATA sheet)
381
+ updateTradeTable();
382
+
383
+ // Update history table (Column L)
384
+ updateHistoryTable();
385
+
386
+ // Update badge
387
+ document.getElementById('tradeCountBadge').textContent = `${total} trade${total !== 1 ? 's' : ''}`;
388
+ }
389
+
390
+ function updateTradeTable() {
391
+ const tbody = document.getElementById('tradeTableBody');
392
+
393
+ if (appState.currentSession.trades.length === 0) {
394
+ tbody.innerHTML = `
395
+ <tr>
396
+ <td colspan="5" class="text-center py-8 text-gray-500 italic">
397
+ No trades recorded. Start by entering PNL and clicking Win or Loss.
398
+ </td>
399
+ </tr>`;
400
+ return;
401
+ }
402
+
403
+ tbody.innerHTML = appState.currentSession.trades.slice().reverse().map(trade => `
404
+ <tr class="${trade.result === 'Win' ? 'win-row' : 'loss-row'}">
405
+ <td class="font-mono">${trade.tradeNumber}</td>
406
+ <td>
407
+ <span class="px-2 py-1 rounded text-xs font-bold ${trade.result === 'Win' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}">
408
+ ${trade.result}
409
+ </span>
410
+ </td>
411
+ <td class="text-sm">${new Date(trade.timestamp).toLocaleString()}</td>
412
+ <td class="font-bold">${formatCurrency(trade.profit)}</td>
413
+ <td>
414
+ <button onclick="deleteTrade('${trade.id}')" class="text-gray-500 hover:text-red-400 transition-colors">
415
+ <i data-lucide="trash-2" class="w-4 h-4"></i>
416
+ </button>
417
+ </td>
418
+ </tr>
419
+ `).join('');
420
+
421
+ lucide.createIcons();
422
+ }
423
+
424
+ function updateHistoryTable() {
425
+ const tbody = document.getElementById('historyTableBody');
426
+
427
+ if (appState.dailyHistory.length === 0) {
428
+ tbody.innerHTML = `
429
+ <tr>
430
+ <td colspan="3" class="text-center py-8 text-gray-500 italic">
431
+ No session history. Click "End Session" to save daily PNL.
432
+ </td>
433
+ </tr>`;
434
+ return;
435
+ }
436
+
437
+ let cumulative = appState.startingCapital;
438
+
439
+ tbody.innerHTML = appState.dailyHistory.slice().reverse().map((entry, index, arr) => {
440
+ // Calculate cumulative backwards for display
441
+ const displayCumulative = arr.slice(index).reduce((sum, e) => sum - e.pnl, appState.startingCapital + appState.dailyHistory.reduce((s, e) => s + e.pnl, 0));
442
+
443
+ return `
444
+ <tr>
445
+ <td>${new Date(entry.date).toLocaleDateString()}</td>
446
+ <td class="font-bold ${entry.pnl >= 0 ? 'text-emerald-400' : 'text-red-400'}">
447
+ ${formatCurrency(entry.pnl)}
448
+ </td>
449
+ <td class="text-gray-400">
450
+ ${formatCurrency(appState.startingCapital + appState.dailyHistory.slice(0, appState.dailyHistory.indexOf(entry) + 1).reduce((s, e) => s + e.pnl, 0))}
451
+ </td>
452
+ </tr>
453
+ `}).join('');
454
+ }
455
+
456
+ // Core Functions matching Google Sheets logic
457
+
458
+ function addWin() {
459
+ const pnl = parseFloat(document.getElementById('currentTradePnl').value) || 0;
460
+
461
+ const trade = {
462
+ id: Date.now().toString(),
463
+ tradeNumber: appState.currentSession.nextTradeNumber++,
464
+ result: 'Win',
465
+ timestamp: new Date().toISOString(),
466
+ profit: pnl
467
+ };
468
+
469
+ appState.currentSession.trades.push(trade);
470
+ saveState();
471
+ updateUI();
472
+
473
+ // Clear input after adding
474
+ document.getElementById('currentTradePnl').value = '';
475
+ document.getElementById('currentTradePnl').focus();
476
+ }
477
+
478
+ function addLoss() {
479
+ const pnl = parseFloat(document.getElementById('currentTradePnl').value) || 0;
480
+
481
+ const trade = {
482
+ id: Date.now().toString(),
483
+ tradeNumber: appState.currentSession.nextTradeNumber++,
484
+ result: 'Loss',
485
+ timestamp: new Date().toISOString(),
486
+ profit: pnl // Usually negative for losses, but we record what user enters
487
+ };
488
+
489
+ appState.currentSession.trades.push(trade);
490
+ saveState();
491
+ updateUI();
492
+
493
+ // Clear input after adding
494
+ document.getElementById('currentTradePnl').value = '';
495
+ document.getElementById('currentTradePnl').focus();
496
+ }
497
+
498
+ function startSession() {
499
+ // 1. Get last PNL from daily history (equivalent to reading column L)
500
+ let lastPnl = 0;
501
+ if (appState.dailyHistory.length > 0) {
502
+ lastPnl = appState.dailyHistory[appState.dailyHistory.length - 1].pnl;
503
+ }
504
+
505
+ // 2. Add to starting capital (C6)
506
+ appState.startingCapital += lastPnl;
507
+ document.getElementById('startingCapital').value = appState.startingCapital;
508
+
509
+ // 3. Clear trade log (DATA sheet)
510
+ appState.currentSession.trades = [];
511
+ appState.currentSession.nextTradeNumber = 1;
512
+
513
+ // 4. Reset counters (C8, C9, C10)
514
+ // Already handled by clearing trades array
515
+
516
+ saveState();
517
+ updateUI();
518
+
519
+ alert(`Session started!\nPrevious PNL (${formatCurrency(lastPnl)}) added to Starting Capital.\nNew Capital: ${formatCurrency(appState.startingCapital)}`);
520
+ }
521
+
522
+ function endSession() {
523
+ // Calculate current session PNL (equivalent to C14)
524
+ const sessionPnl = appState.currentSession.trades.reduce((sum, t) => sum + parseFloat(t.profit), 0);
525
+
526
+ // Save to daily history (equivalent to saving in L11:L24)
527
+ appState.dailyHistory.push({
528
+ date: new Date().toISOString(),
529
+ pnl: sessionPnl,
530
+ id: Date.now().toString()
531
+ });
532
+
533
+ // Keep only last 14 entries (L11:L24 = 14 rows)
534
+ if (appState.dailyHistory.length > 14) {
535
+ appState.dailyHistory = appState.dailyHistory.slice(-14);
536
+ }
537
+
538
+ saveState();
539
+ updateUI();
540
+
541
+ alert(`Session ended!\nDaily PNL ${formatCurrency(sessionPnl)} saved to history.`);
542
+ }
543
+
544
+ function deleteTrade(id) {
545
+ if (!confirm('Delete this trade record?')) return;
546
+
547
+ appState.currentSession.trades = appState.currentSession.trades.filter(t => t.id !== id);
548
+
549
+ // Renumber trades
550
+ appState.currentSession.trades.forEach((t, i) => {
551
+ t.tradeNumber = i + 1;
552
+ });
553
+ appState.currentSession.nextTradeNumber = appState.currentSession.trades.length + 1;
554
+
555
+ saveState();
556
+ updateUI();
557
+ }
558
+
559
+ function updateState() {
560
+ appState.startingCapital = parseFloat(document.getElementById('startingCapital').value) || 0;
561
+ saveState();
562
+ }
563
+
564
+ function formatCurrency(amount) {
565
+ return new Intl.NumberFormat('en-US', {
566
+ style: 'currency',
567
+ currency: 'USD',
568
+ minimumFractionDigits: 2,
569
+ maximumFractionDigits: 2
570
+ }).format(amount);
571
+ }
572
+
573
+ function resetAll() {
574
+ if (!confirm('WARNING: This will delete ALL data including trade history and daily PNL records. This cannot be undone. Continue?')) return;
575
+
576
+ appState = {
577
+ startingCapital: 10000,
578
+ dailyHistory: [],
579
+ currentSession: {
580
+ trades: [],
581
+ nextTradeNumber: 1
582
+ },
583
+ isDarkMode: appState.isDarkMode
584
+ };
585
+
586
+ localStorage.removeItem('tradingSessionData');
587
+ document.getElementById('startingCapital').value = 10000;
588
+ document.getElementById('currentTradePnl').value = '';
589
+ updateUI();
590
+ }
591
+
592
+ function exportData() {
593
+ const dataStr = JSON.stringify(appState, null, 2);
594
+ const dataBlob = new Blob([dataStr], { type: 'application/json' });
595
+ const url = URL.createObjectURL(dataBlob);
596
+ const link = document.createElement('a');
597
+ link.href = url;
598
+ link.download = `trading-session-data-${new Date().toISOString().split('T')[0]}.json`;
599
+ document.body.appendChild(link);
600
+ link.click();
601
+ document.body.removeChild(link);
602
+ }
603
+
604
+ function importData(input) {
605
+ const file = input.files[0];
606
+ if (!file) return;
607
+
608
+ const reader = new FileReader();
609
+ reader.onload = function(e) {
610
+ try {
611
+ const imported = JSON.parse(e.target.result);
612
+ if (confirm(`Import ${imported.currentSession?.trades?.length || 0} trades and ${imported.dailyHistory?.length || 0} daily records?`)) {
613
+ appState = imported;
614
+ document.getElementById('startingCapital').value = appState.startingCapital || 10000;
615
+ saveState();
616
+ updateUI();
617
+ alert('Data imported successfully!');
618
+ }
619
+ } catch (err) {
620
+ alert('Error importing file. Please ensure it is a valid JSON export from this tool.');
621
+ }
622
+ };
623
+ reader.readAsText(file);
624
+ input.value = '';
625
+ }
626
+
627
+ function toggleTheme() {
628
+ appState.isDarkMode = !appState.isDarkMode;
629
+ document.body.classList.toggle('light-mode');
630
+
631
+ const icon = document.getElementById('themeIcon');
632
+ if (appState.isDarkMode) {
633
+ icon.setAttribute('data-lucide', 'sun');
634
+ } else {
635
+ icon.setAttribute('data-lucide', 'moon');
636
+ }
637
+ lucide.createIcons();
638
+ saveState();
639
+ }
640
+
641
+ // Initialize
642
+ loadState();
643
+
644
+ // Check for light mode preference
645
+ if (!appState.isDarkMode) {
646
+ document.body.classList.add('light-mode');
647
+ document.getElementById('themeIcon').setAttribute('data-lucide', 'moon');
648
+ lucide.createIcons();
649
+ }
650
+ </script>
651
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
652
+ </body>
653
+ </html>