Hugging Face's logo

Spaces:
vivekin
/
martingale-calculator
Running

App Files Community
vivekin commited on
Commit
ab2009c
·
verified ·
1 Parent(s): 419d4fa

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +782 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Martingale Calculator
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: yellow
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: martingale-calculator
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,782 @@
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 Simulator (INR)</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.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
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
13
+ }
14
+ .trade-win {
15
+ background-color: rgba(16, 185, 129, 0.1);
16
+ }
17
+ .trade-loss {
18
+ background-color: rgba(239, 68, 68, 0.1);
19
+ }
20
+ .blink {
21
+ animation: blink-animation 1s steps(5, start) infinite;
22
+ }
23
+ @keyframes blink-animation {
24
+ to {
25
+ visibility: hidden;
26
+ }
27
+ }
28
+ .fade-in {
29
+ animation: fadeIn 0.5s ease-in;
30
+ }
31
+ @keyframes fadeIn {
32
+ from { opacity: 0; }
33
+ to { opacity: 1; }
34
+ }
35
+ .rupee-symbol {
36
+ font-family: Arial, sans-serif;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-100 font-sans">
41
+ <div class="min-h-screen flex flex-col">
42
+ <!-- Header -->
43
+ <header class="gradient-bg text-white shadow-lg">
44
+ <div class="container mx-auto px-4 py-6">
45
+ <div class="flex justify-between items-center">
46
+ <div class="flex items-center space-x-4">
47
+ <i class="fas fa-chart-line text-2xl"></i>
48
+ <h1 class="text-2xl font-bold">Masaniello Trading Simulator (INR)</h1>
49
+ </div>
50
+ <div class="flex items-center space-x-2">
51
+ <span class="text-sm bg-blue-600 px-3 py-1 rounded-full">Beta</span>
52
+ <span class="text-sm bg-green-600 px-3 py-1 rounded-full">₹ Indian Rupee</span>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </header>
57
+
58
+ <!-- Main Content -->
59
+ <main class="flex-grow container mx-auto px-4 py-8">
60
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
61
+ <!-- Left Column - Inputs -->
62
+ <div class="lg:col-span-1 space-y-6">
63
+ <!-- Input Panel -->
64
+ <div class="bg-white rounded-xl shadow-md p-6">
65
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
66
+ <i class="fas fa-cog mr-2 text-blue-500"></i>Simulation Parameters
67
+ </h2>
68
+
69
+ <div class="space-y-4">
70
+ <div>
71
+ <label class="block text-sm font-medium text-gray-700 mb-1">Starting Capital (<span class="rupee-symbol">₹</span>)</label>
72
+ <input type="number" id="startingCapital" value="50000" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
73
+ </div>
74
+
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Total Events</label>
77
+ <input type="number" id="totalEvents" value="20" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
78
+ </div>
79
+
80
+ <div>
81
+ <label class="block text-sm font-medium text-gray-700 mb-1">Expected Wins</label>
82
+ <div class="flex items-center space-x-2">
83
+ <input type="number" id="expectedWins" value="10" class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
84
+ <span class="text-sm text-gray-500">(<span id="winRateDisplay">50</span>% win rate)</span>
85
+ </div>
86
+ </div>
87
+
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-700 mb-1">Payout % (Return Multiplier)</label>
90
+ <input type="number" id="payoutPercent" value="2" step="0.1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
91
+ </div>
92
+
93
+ <div>
94
+ <label class="block text-sm font-medium text-gray-700 mb-1">Risk per Trade (Auto-calculated)</label>
95
+ <input type="number" id="riskPerTrade" readonly class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100">
96
+ </div>
97
+
98
+ <div class="pt-2">
99
+ <button id="calculateRiskBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
100
+ <i class="fas fa-calculator mr-2"></i> Calculate Optimal Risk
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Trade Execution -->
107
+ <div class="bg-white rounded-xl shadow-md p-6">
108
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
109
+ <i class="fas fa-play-circle mr-2 text-green-500"></i>Execute Trade
110
+ </h2>
111
+
112
+ <div class="space-y-4">
113
+ <div class="bg-blue-50 p-4 rounded-lg">
114
+ <div class="flex justify-between items-center">
115
+ <span class="font-medium text-blue-800">Suggested Bet:</span>
116
+ <span id="suggestedBet" class="text-xl font-bold text-blue-800"><span class="rupee-symbol">₹</span>0.00</span>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="grid grid-cols-2 gap-4 pt-2">
121
+ <button id="winBtn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
122
+ <i class="fas fa-check-circle mr-2"></i> Win
123
+ </button>
124
+ <button id="lossBtn" class="bg-red-500 hover:bg-red-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
125
+ <i class="fas fa-times-circle mr-2"></i> Loss
126
+ </button>
127
+ </div>
128
+
129
+ <div class="pt-4">
130
+ <button id="resetBtn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
131
+ <i class="fas fa-redo mr-2"></i> Reset Simulation
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Alerts Panel -->
138
+ <div class="bg-white rounded-xl shadow-md p-6">
139
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
140
+ <i class="fas fa-bell mr-2 text-yellow-500"></i>Alerts & Triggers
141
+ </h2>
142
+
143
+ <div class="space-y-4">
144
+ <div>
145
+ <label class="block text-sm font-medium text-gray-700 mb-1">Stop Loss (%)</label>
146
+ <input type="number" id="stopLoss" value="20" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
147
+ </div>
148
+
149
+ <div>
150
+ <label class="block text-sm font-medium text-gray-700 mb-1">Take Profit (%)</label>
151
+ <input type="number" id="takeProfit" value="30" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
152
+ </div>
153
+
154
+ <div id="alertBox" class="hidden p-4 rounded-lg border">
155
+ <!-- Alerts will appear here -->
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Right Column - Results -->
162
+ <div class="lg:col-span-2 space-y-6">
163
+ <!-- Equity Tracking -->
164
+ <div class="bg-white rounded-xl shadow-md p-6">
165
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
166
+ <i class="fas fa-wallet mr-2 text-purple-500"></i>Equity Tracking
167
+ </h2>
168
+
169
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
170
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
171
+ <div class="text-sm text-gray-500">Current Balance</div>
172
+ <div id="currentBalance" class="text-2xl font-bold text-gray-800"><span class="rupee-symbol">₹</span>50,000.00</div>
173
+ </div>
174
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
175
+ <div class="text-sm text-gray-500">Profit/Loss</div>
176
+ <div id="profitLoss" class="text-2xl font-bold text-green-500"><span class="rupee-symbol">₹</span>0.00</div>
177
+ </div>
178
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
179
+ <div class="text-sm text-gray-500">Win Rate</div>
180
+ <div id="currentWinRate" class="text-2xl font-bold text-blue-500">0%</div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="h-64">
185
+ <canvas id="equityChart"></canvas>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Trade History -->
190
+ <div class="bg-white rounded-xl shadow-md p-6">
191
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
192
+ <i class="fas fa-history mr-2 text-indigo-500"></i>Trade History
193
+ </h2>
194
+
195
+ <div class="overflow-x-auto">
196
+ <table class="min-w-full divide-y divide-gray-200">
197
+ <thead class="bg-gray-50">
198
+ <tr>
199
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trade #</th>
200
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bet Amount</th>
201
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Outcome</th>
202
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
203
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cumulative P/L</th>
204
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
205
+ </tr>
206
+ </thead>
207
+ <tbody id="tradeHistoryBody" class="bg-white divide-y divide-gray-200">
208
+ <!-- Trade rows will be added here -->
209
+ </tbody>
210
+ </table>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Analytics -->
215
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
216
+ <div class="bg-white rounded-xl shadow-md p-6">
217
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
218
+ <i class="fas fa-chart-pie mr-2 text-red-500"></i>Win Rate
219
+ </h2>
220
+ <div class="h-64">
221
+ <canvas id="winRateChart"></canvas>
222
+ </div>
223
+ </div>
224
+ <div class="bg-white rounded-xl shadow-md p-6">
225
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
226
+ <i class="fas fa-chart-bar mr-2 text-yellow-500"></i>Risk Exposure
227
+ </h2>
228
+ <div class="h-64">
229
+ <canvas id="riskChart"></canvas>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </main>
236
+
237
+ <!-- Footer -->
238
+ <footer class="bg-gray-800 text-white py-6">
239
+ <div class="container mx-auto px-4 text-center">
240
+ <p class="text-sm">Masaniello Trading Simulator (INR) © 2023 | Algorithmic Bet Sizing System</p>
241
+ <p class="text-xs text-gray-400 mt-1">For educational purposes only. Trading involves risk.</p>
242
+ </div>
243
+ </footer>
244
+ </div>
245
+
246
+ <script>
247
+ // Global variables
248
+ let simulationData = {
249
+ startingCapital: 50000,
250
+ currentBalance: 50000,
251
+ totalEvents: 20,
252
+ expectedWins: 10,
253
+ payoutPercent: 2,
254
+ riskPerTrade: 0,
255
+ completedTrades: 0,
256
+ wins: 0,
257
+ losses: 0,
258
+ tradeHistory: [],
259
+ equityHistory: [50000],
260
+ stopLoss: 20,
261
+ takeProfit: 30,
262
+ alertTriggered: false
263
+ };
264
+
265
+ // DOM Elements
266
+ const startingCapitalInput = document.getElementById('startingCapital');
267
+ const totalEventsInput = document.getElementById('totalEvents');
268
+ const expectedWinsInput = document.getElementById('expectedWins');
269
+ const payoutPercentInput = document.getElementById('payoutPercent');
270
+ const riskPerTradeInput = document.getElementById('riskPerTrade');
271
+ const calculateRiskBtn = document.getElementById('calculateRiskBtn');
272
+ const winRateDisplay = document.getElementById('winRateDisplay');
273
+ const suggestedBetElement = document.getElementById('suggestedBet');
274
+ const winBtn = document.getElementById('winBtn');
275
+ const lossBtn = document.getElementById('lossBtn');
276
+ const resetBtn = document.getElementById('resetBtn');
277
+ const currentBalanceElement = document.getElementById('currentBalance');
278
+ const profitLossElement = document.getElementById('profitLoss');
279
+ const currentWinRateElement = document.getElementById('currentWinRate');
280
+ const tradeHistoryBody = document.getElementById('tradeHistoryBody');
281
+ const stopLossInput = document.getElementById('stopLoss');
282
+ const takeProfitInput = document.getElementById('takeProfit');
283
+ const alertBox = document.getElementById('alertBox');
284
+
285
+ // Chart instances
286
+ let equityChart, winRateChart, riskChart;
287
+
288
+ // Format currency for display
289
+ function formatCurrency(amount) {
290
+ return '₹' + amount.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
291
+ }
292
+
293
+ // Initialize the application
294
+ document.addEventListener('DOMContentLoaded', function() {
295
+ // Initialize charts
296
+ initCharts();
297
+
298
+ // Set up event listeners
299
+ setupEventListeners();
300
+
301
+ // Calculate initial risk
302
+ calculateRisk();
303
+
304
+ // Update suggested bet
305
+ updateSuggestedBet();
306
+
307
+ // Update initial balance display
308
+ updateEquityUI();
309
+ });
310
+
311
+ function initCharts() {
312
+ // Equity Chart
313
+ const equityCtx = document.getElementById('equityChart').getContext('2d');
314
+ equityChart = new Chart(equityCtx, {
315
+ type: 'line',
316
+ data: {
317
+ labels: Array.from({length: simulationData.totalEvents}, (_, i) => i + 1),
318
+ datasets: [{
319
+ label: 'Account Balance',
320
+ data: simulationData.equityHistory,
321
+ borderColor: 'rgb(79, 70, 229)',
322
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
323
+ tension: 0.3,
324
+ fill: true,
325
+ borderWidth: 2
326
+ }]
327
+ },
328
+ options: {
329
+ responsive: true,
330
+ maintainAspectRatio: false,
331
+ scales: {
332
+ y: {
333
+ beginAtZero: false,
334
+ ticks: {
335
+ callback: function(value) {
336
+ return '₹' + value.toLocaleString('en-IN');
337
+ }
338
+ }
339
+ }
340
+ },
341
+ plugins: {
342
+ tooltip: {
343
+ callbacks: {
344
+ label: function(context) {
345
+ return 'Balance: ' + formatCurrency(context.raw);
346
+ }
347
+ }
348
+ }
349
+ }
350
+ }
351
+ });
352
+
353
+ // Win Rate Chart
354
+ const winRateCtx = document.getElementById('winRateChart').getContext('2d');
355
+ winRateChart = new Chart(winRateCtx, {
356
+ type: 'doughnut',
357
+ data: {
358
+ labels: ['Wins', 'Losses'],
359
+ datasets: [{
360
+ data: [0, 0],
361
+ backgroundColor: [
362
+ 'rgba(16, 185, 129, 0.8)',
363
+ 'rgba(239, 68, 68, 0.8)'
364
+ ],
365
+ borderColor: [
366
+ 'rgba(16, 185, 129, 1)',
367
+ 'rgba(239, 68, 68, 1)'
368
+ ],
369
+ borderWidth: 1
370
+ }]
371
+ },
372
+ options: {
373
+ responsive: true,
374
+ maintainAspectRatio: false,
375
+ plugins: {
376
+ legend: {
377
+ position: 'bottom'
378
+ },
379
+ tooltip: {
380
+ callbacks: {
381
+ label: function(context) {
382
+ const label = context.label || '';
383
+ const value = context.raw || 0;
384
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
385
+ const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
386
+ return `${label}: ${value} (${percentage}%)`;
387
+ }
388
+ }
389
+ }
390
+ }
391
+ }
392
+ });
393
+
394
+ // Risk Chart
395
+ const riskCtx = document.getElementById('riskChart').getContext('2d');
396
+ riskChart = new Chart(riskCtx, {
397
+ type: 'bar',
398
+ data: {
399
+ labels: Array.from({length: simulationData.totalEvents}, (_, i) => i + 1),
400
+ datasets: [{
401
+ label: 'Risk per Trade',
402
+ data: Array(simulationData.totalEvents).fill(0),
403
+ backgroundColor: 'rgba(234, 179, 8, 0.6)',
404
+ borderColor: 'rgba(234, 179, 8, 1)',
405
+ borderWidth: 1
406
+ }]
407
+ },
408
+ options: {
409
+ responsive: true,
410
+ maintainAspectRatio: false,
411
+ scales: {
412
+ y: {
413
+ beginAtZero: true,
414
+ ticks: {
415
+ callback: function(value) {
416
+ return '₹' + value.toLocaleString('en-IN');
417
+ }
418
+ },
419
+ title: {
420
+ display: true,
421
+ text: 'Amount (₹)'
422
+ }
423
+ },
424
+ x: {
425
+ title: {
426
+ display: true,
427
+ text: 'Trade #'
428
+ }
429
+ }
430
+ },
431
+ plugins: {
432
+ tooltip: {
433
+ callbacks: {
434
+ label: function(context) {
435
+ return 'Risk: ' + formatCurrency(context.raw);
436
+ }
437
+ }
438
+ }
439
+ }
440
+ }
441
+ });
442
+ }
443
+
444
+ function setupEventListeners() {
445
+ // Input changes
446
+ startingCapitalInput.addEventListener('change', updateSimulationParams);
447
+ totalEventsInput.addEventListener('change', updateSimulationParams);
448
+ expectedWinsInput.addEventListener('change', updateSimulationParams);
449
+ payoutPercentInput.addEventListener('change', updateSimulationParams);
450
+ stopLossInput.addEventListener('change', updateSimulationParams);
451
+ takeProfitInput.addEventListener('change', updateSimulationParams);
452
+
453
+ // Buttons
454
+ calculateRiskBtn.addEventListener('click', calculateRisk);
455
+ winBtn.addEventListener('click', () => recordTrade(true));
456
+ lossBtn.addEventListener('click', () => recordTrade(false));
457
+ resetBtn.addEventListener('click', resetSimulation);
458
+ }
459
+
460
+ function updateSimulationParams() {
461
+ const newStartingCapital = parseFloat(startingCapitalInput.value) || 50000;
462
+ simulationData.startingCapital = newStartingCapital;
463
+
464
+ // Update current balance if we haven't started trading yet
465
+ if (simulationData.completedTrades === 0) {
466
+ simulationData.currentBalance = newStartingCapital;
467
+ simulationData.equityHistory = [newStartingCapital];
468
+ updateEquityUI();
469
+ }
470
+
471
+ simulationData.totalEvents = parseInt(totalEventsInput.value) || 20;
472
+ simulationData.expectedWins = parseInt(expectedWinsInput.value) || 10;
473
+ simulationData.payoutPercent = parseFloat(payoutPercentInput.value) || 2;
474
+ simulationData.stopLoss = parseFloat(stopLossInput.value) || 20;
475
+ simulationData.takeProfit = parseFloat(takeProfitInput.value) || 30;
476
+
477
+ // Ensure expected wins doesn't exceed total events
478
+ if (simulationData.expectedWins > simulationData.totalEvents) {
479
+ simulationData.expectedWins = simulationData.totalEvents;
480
+ expectedWinsInput.value = simulationData.expectedWins;
481
+ }
482
+
483
+ // Update win rate display
484
+ const winRate = (simulationData.expectedWins / simulationData.totalEvents) * 100;
485
+ winRateDisplay.textContent = winRate.toFixed(1);
486
+
487
+ // Update charts
488
+ updateCharts();
489
+
490
+ // Recalculate risk
491
+ calculateRisk();
492
+ }
493
+
494
+ function calculateRisk() {
495
+ // Masaniello algorithm simplified for demo purposes
496
+ const winRate = simulationData.expectedWins / simulationData.totalEvents;
497
+ const lossRate = 1 - winRate;
498
+ const payout = simulationData.payoutPercent;
499
+
500
+ // Kelly criterion simplified
501
+ const kellyFraction = (winRate * payout - lossRate) / payout;
502
+
503
+ // Calculate risk per trade (max 5% of capital for safety)
504
+ simulationData.riskPerTrade = Math.min(
505
+ simulationData.currentBalance * kellyFraction * 0.5, // Conservative approach
506
+ simulationData.currentBalance * 0.05
507
+ );
508
+
509
+ riskPerTradeInput.value = simulationData.riskPerTrade.toFixed(2);
510
+
511
+ // Update suggested bet
512
+ updateSuggestedBet();
513
+ }
514
+
515
+ function updateSuggestedBet() {
516
+ // For demo purposes, we'll use a simplified version of the Masaniello system
517
+ // In a real implementation, this would be more complex with sequence tracking
518
+
519
+ if (simulationData.completedTrades >= simulationData.totalEvents) {
520
+ suggestedBetElement.textContent = "₹0.00 (Simulation Complete)";
521
+ return;
522
+ }
523
+
524
+ // Basic progression: increase bet after losses, decrease after wins
525
+ const consecutiveLosses = getConsecutiveOutcomes(false);
526
+ const baseBet = simulationData.riskPerTrade;
527
+
528
+ // Simple progression for demo
529
+ let suggestedBet = baseBet * Math.pow(1.5, consecutiveLosses);
530
+
531
+ // Don't exceed 10% of current balance
532
+ suggestedBet = Math.min(suggestedBet, simulationData.currentBalance * 0.1);
533
+
534
+ // Don't bet more than remaining needed to reach target
535
+ const remainingWinsNeeded = Math.max(0, simulationData.expectedWins - simulationData.wins);
536
+ const remainingLossesPossible = simulationData.totalEvents - simulationData.completedTrades - remainingWinsNeeded;
537
+
538
+ // Ensure we don't risk too much if we're close to the target
539
+ if (remainingWinsNeeded <= 0) {
540
+ suggestedBet = baseBet * 0.5; // Reduce risk if we've hit our win target
541
+ }
542
+
543
+ suggestedBetElement.innerHTML = formatCurrency(suggestedBet);
544
+
545
+ // Store the suggested bet for use in trade recording
546
+ simulationData.currentSuggestedBet = suggestedBet;
547
+ }
548
+
549
+ function getConsecutiveOutcomes(isWin) {
550
+ if (simulationData.tradeHistory.length === 0) return 0;
551
+
552
+ let count = 0;
553
+ for (let i = simulationData.tradeHistory.length - 1; i >= 0; i--) {
554
+ if (simulationData.tradeHistory[i].outcome === isWin) {
555
+ count++;
556
+ } else {
557
+ break;
558
+ }
559
+ }
560
+ return count;
561
+ }
562
+
563
+ function recordTrade(isWin) {
564
+ if (simulationData.completedTrades >= simulationData.totalEvents) {
565
+ showAlert("Simulation complete! Reset to start over.", "info");
566
+ return;
567
+ }
568
+
569
+ const tradeNumber = simulationData.completedTrades + 1;
570
+ const betAmount = simulationData.currentSuggestedBet || simulationData.riskPerTrade;
571
+ let profitLoss, newBalance;
572
+
573
+ if (isWin) {
574
+ profitLoss = betAmount * (simulationData.payoutPercent - 1);
575
+ newBalance = simulationData.currentBalance + profitLoss;
576
+ simulationData.wins++;
577
+ } else {
578
+ profitLoss = -betAmount;
579
+ newBalance = simulationData.currentBalance + profitLoss;
580
+ simulationData.losses++;
581
+ }
582
+
583
+ // Record the trade
584
+ const trade = {
585
+ number: tradeNumber,
586
+ betAmount: betAmount,
587
+ outcome: isWin,
588
+ profitLoss: profitLoss,
589
+ cumulativeProfitLoss: (simulationData.tradeHistory.length > 0 ?
590
+ simulationData.tradeHistory[simulationData.tradeHistory.length - 1].cumulativeProfitLoss : 0) + profitLoss,
591
+ balance: newBalance
592
+ };
593
+
594
+ simulationData.tradeHistory.push(trade);
595
+ simulationData.completedTrades++;
596
+ simulationData.currentBalance = newBalance;
597
+ simulationData.equityHistory.push(newBalance);
598
+
599
+ // Update UI
600
+ updateTradeHistoryUI();
601
+ updateEquityUI();
602
+ updateSuggestedBet();
603
+ updateCharts();
604
+
605
+ // Check for alerts
606
+ checkAlerts();
607
+ }
608
+
609
+ function updateTradeHistoryUI() {
610
+ tradeHistoryBody.innerHTML = '';
611
+
612
+ simulationData.tradeHistory.forEach(trade => {
613
+ const row = document.createElement('tr');
614
+ row.className = `fade-in ${trade.outcome ? 'trade-win' : 'trade-loss'}`;
615
+
616
+ row.innerHTML = `
617
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${trade.number}</td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(trade.betAmount)}</td>
619
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
620
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${trade.outcome ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
621
+ ${trade.outcome ? 'Win' : 'Loss'}
622
+ </span>
623
+ </td>
624
+ <td class="px-6 py-4 whitespace-nowrap text-sm ${trade.profitLoss >= 0 ? 'text-green-600' : 'text-red-600'} font-medium">
625
+ ${trade.profitLoss >= 0 ? '+' : ''}${formatCurrency(trade.profitLoss)}
626
+ </td>
627
+ <td class="px-6 py-4 whitespace-nowrap text-sm ${trade.cumulativeProfitLoss >= 0 ? 'text-green-600' : 'text-red-600'} font-medium">
628
+ ${trade.cumulativeProfitLoss >= 0 ? '+' : ''}${formatCurrency(trade.cumulativeProfitLoss)}
629
+ </td>
630
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(trade.balance)}</td>
631
+ `;
632
+
633
+ tradeHistoryBody.appendChild(row);
634
+ });
635
+
636
+ // Scroll to bottom
637
+ tradeHistoryBody.parentNode.scrollTop = tradeHistoryBody.parentNode.scrollHeight;
638
+ }
639
+
640
+ function updateEquityUI() {
641
+ currentBalanceElement.innerHTML = formatCurrency(simulationData.currentBalance);
642
+
643
+ const profitLoss = simulationData.currentBalance - simulationData.startingCapital;
644
+ profitLossElement.innerHTML = `${profitLoss >= 0 ? '+' : ''}${formatCurrency(profitLoss)}`;
645
+ profitLossElement.className = `text-2xl font-bold ${profitLoss >= 0 ? 'text-green-500' : 'text-red-500'}`;
646
+
647
+ const winRate = simulationData.completedTrades > 0 ?
648
+ (simulationData.wins / simulationData.completedTrades) * 100 : 0;
649
+ currentWinRateElement.textContent = `${winRate.toFixed(1)}%`;
650
+ }
651
+
652
+ function updateCharts() {
653
+ // Update equity chart
654
+ equityChart.data.datasets[0].data = simulationData.equityHistory;
655
+ equityChart.update();
656
+
657
+ // Update win rate chart
658
+ winRateChart.data.datasets[0].data = [simulationData.wins, simulationData.losses];
659
+ winRateChart.update();
660
+
661
+ // Update risk chart
662
+ const riskData = Array(simulationData.totalEvents).fill(0);
663
+ simulationData.tradeHistory.forEach(trade => {
664
+ riskData[trade.number - 1] = trade.betAmount;
665
+ });
666
+ riskChart.data.datasets[0].data = riskData;
667
+ riskChart.update();
668
+ }
669
+
670
+ function checkAlerts() {
671
+ const initialBalance = simulationData.startingCapital;
672
+ const currentBalance = simulationData.currentBalance;
673
+ const profitLossPercent = ((currentBalance - initialBalance) / initialBalance) * 100;
674
+
675
+ // Clear previous alerts
676
+ alertBox.innerHTML = '';
677
+ alertBox.classList.add('hidden');
678
+
679
+ // Check stop loss
680
+ if (profitLossPercent <= -simulationData.stopLoss && !simulationData.alertTriggered) {
681
+ showAlert(`Stop loss triggered! Account is down ${Math.abs(profitLossPercent).toFixed(1)}%`, 'error');
682
+ simulationData.alertTriggered = true;
683
+ return;
684
+ }
685
+
686
+ // Check take profit
687
+ if (profitLossPercent >= simulationData.takeProfit && !simulationData.alertTriggered) {
688
+ showAlert(`Take profit triggered! Account is up ${profitLossPercent.toFixed(1)}%`, 'success');
689
+ simulationData.alertTriggered = true;
690
+ return;
691
+ }
692
+
693
+ // Check if simulation is complete
694
+ if (simulationData.completedTrades >= simulationData.totalEvents) {
695
+ const finalProfit = currentBalance - initialBalance;
696
+ const message = finalProfit >= 0 ?
697
+ `Simulation complete! Final profit: ${formatCurrency(finalProfit)} (${profitLossPercent.toFixed(1)}%)` :
698
+ `Simulation complete! Final loss: ${formatCurrency(Math.abs(finalProfit))} (${Math.abs(profitLossPercent).toFixed(1)}%)`;
699
+
700
+ showAlert(message, finalProfit >= 0 ? 'success' : 'error');
701
+ }
702
+ }
703
+
704
+ function showAlert(message, type) {
705
+ alertBox.innerHTML = '';
706
+ alertBox.classList.remove('hidden');
707
+
708
+ const alert = document.createElement('div');
709
+ let icon, bgColor, textColor;
710
+
711
+ switch (type) {
712
+ case 'error':
713
+ icon = 'exclamation-circle';
714
+ bgColor = 'bg-red-100';
715
+ textColor = 'text-red-800';
716
+ break;
717
+ case 'success':
718
+ icon = 'check-circle';
719
+ bgColor = 'bg-green-100';
720
+ textColor = 'text-green-800';
721
+ break;
722
+ case 'info':
723
+ icon = 'info-circle';
724
+ bgColor = 'bg-blue-100';
725
+ textColor = 'text-blue-800';
726
+ break;
727
+ default:
728
+ icon = 'info-circle';
729
+ bgColor = 'bg-blue-100';
730
+ textColor = 'text-blue-800';
731
+ }
732
+
733
+ alert.className = `p-4 rounded-lg border ${bgColor} ${textColor} border-current flex items-center`;
734
+ alert.innerHTML = `
735
+ <i class="fas fa-${icon} mr-3"></i>
736
+ <span>${message}</span>
737
+ `;
738
+
739
+ if (type === 'error') {
740
+ alert.classList.add('blink');
741
+ }
742
+
743
+ alertBox.appendChild(alert);
744
+ }
745
+
746
+ function resetSimulation() {
747
+ // Get the current starting capital value
748
+ const newStartingCapital = parseFloat(startingCapitalInput.value) || 50000;
749
+
750
+ // Reset simulation data with the new starting capital
751
+ simulationData = {
752
+ startingCapital: newStartingCapital,
753
+ currentBalance: newStartingCapital,
754
+ totalEvents: parseInt(totalEventsInput.value) || 20,
755
+ expectedWins: parseInt(expectedWinsInput.value) || 10,
756
+ payoutPercent: parseFloat(payoutPercentInput.value) || 2,
757
+ riskPerTrade: 0,
758
+ completedTrades: 0,
759
+ wins: 0,
760
+ losses: 0,
761
+ tradeHistory: [],
762
+ equityHistory: [newStartingCapital],
763
+ stopLoss: parseFloat(stopLossInput.value) || 20,
764
+ takeProfit: parseFloat(takeProfitInput.value) || 30,
765
+ alertTriggered: false
766
+ };
767
+
768
+ // Recalculate risk
769
+ calculateRisk();
770
+
771
+ // Update UI
772
+ updateTradeHistoryUI();
773
+ updateEquityUI();
774
+ updateSuggestedBet();
775
+ updateCharts();
776
+
777
+ // Hide alert box
778
+ alertBox.classList.add('hidden');
779
+ }
780
+ </script>
781
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vivekin/martingale-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
782
+ </html>