PropForge/test.html at main · michaelsboost/PropForge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <title>PropForge – Offline Prop Firm Trading Simulator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
    <meta name="description" content="PropForge: A Realistic Prop Firm Simulator for Index Futures

PropForge is a browser-based, fully offline training simulator for serious traders.

Trade MNQ/NQ using realistic bracket orders, strict margin logic, and stat tracking. Observe transparent rule-based bots in Spectator Mode — no signals, no AI.

Designed to train discipline, strategy, and self-reliance.

Ideal for Topstep-style challenge prep, journaling mental reps, or simply sharpening your edge without dopamine loops or fake resets.">
    <meta name="author" content="Michael Schwartz">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="PropForge – Offline Prop Firm Trading Simulator">
    <meta name="theme-color" content="hsl(205deg 18.75% 87.45%)">
    <meta name="apple-mobile-web-app-title" content="PropForge – Offline Prop Firm Trading Simulator">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-starturl" content="./index.html">
    <meta name="msapplication-navbutton-color" content="hsl(205deg 18.75% 87.45%)">
    <meta property="og:url" content="https://michaelsboost.com/PropForge" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="PropForge – Offline Prop Firm Trading Simulator" />
    <meta property="og:description" content="PropForge: A Realistic Prop Firm Simulator for Index Futures

PropForge is a browser-based, fully offline training simulator for serious traders.

Trade MNQ/NQ using realistic bracket orders, strict margin logic, and stat tracking. Observe transparent rule-based bots in Spectator Mode — no signals, no AI.

Designed to train discipline, strategy, and self-reliance.

Ideal for Topstep-style challenge prep, journaling mental reps, or simply sharpening your edge without dopamine loops or fake resets." />
    <link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
    <link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
    <link rel="apple-touch-icon" href="imgs/logo.svg">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.6/pico.min.css" rel="stylesheet">

    <link rel="stylesheet" href="src/bundle.css">
  </head>
  <body>

<div id="phase-complete-banner" class="hidden fixed top-6 left-1/2 transform -translate-x-1/2 bg-green-900 text-white px-6 py-3 rounded-xl shadow-xl z-50 transition-all duration-500">
  ✅ Phase Complete! New challenge phase unlocked.
</div>

<div class="min-h-screen max-w-7xl mx-auto p-4 flex flex-col gap-6">
  <!-- Header with Challenge Progress -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
    <div>
      <h1 class="text-3xl font-bold flex items-center gap-2">
        📈 <span class="gradient-text">Prop Firm Simulator</span>
      </h1>
      <p class="text-sm text-slate-400 mt-1">Trade your way to a funded account</p>
    </div>

    <div class="flex items-center gap-4">
      <!-- Challenge Badge -->
      <div class="flex items-center gap-3 px-4 py-2 rounded-full bg-slate-800 border border-slate-700">
        <div class="text-right">
          <div class="font-bold text-lg" id="account-tier">$25K Challenge</div>
          <div class="text-xs text-slate-400" id="account-phase">Phase 1/2</div>
        </div>
        <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
          <span class="text-xs font-bold">1</span>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full max-w-xs mt-4">
        <div class="text-sm text-slate-400 mb-1">Phase Progress</div>
        <div class="progress-bar bg-slate-700 h-4 rounded-full overflow-hidden">
          <div class="progress-fill bg-blue-500 h-full w-0 transition-all duration-500"></div>
        </div>
        <div class="progress-label text-xs mt-1 text-right text-slate-300">0%</div>
      </div>
    </div>
  </div>

  <!-- Challenge Requirements -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Current Challenge Card -->
    <div class="trading-card rounded-xl p-5">
      <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>
        <span id="challenge-title">Current Challenge</span>
      </h3>
      <div class="space-y-3">
        <div class="flex justify-between items-center">
          <span class="text-sm text-slate-400">Profit Target:</span>
          <span id="profit-target" class="font-mono font-medium">$1,250</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm text-slate-400">Max Lots Allowed:</span>
          <span class="font-mono font-medium" id="max-lots">4</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm text-slate-400">Max Total Loss:</span>
          <span id="total-loss" class="font-mono font-medium text-red-400">$1,500</span>
        </div>
      </div>
    </div>

    <!-- Next Tier Card -->
    <div class="trading-card rounded-xl p-5">
      <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd"></path>
          <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"></path>
        </svg>
        Next Tier
      </h3>
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="flex-1">
            <div class="text-sm mb-1">Complete 2x $25K Challenges</div>
            <div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
              <div id="tier-progress" class="h-full bg-purple-500" style="width: 0%"></div>
            </div>
          </div>
          <span id="tier-progress-text" class="text-xs font-mono">0/2</span>
        </div>
        <div class="text-sm text-slate-400" id="next-tier-hint">
          Unlocks $50K Challenge with higher limits
        </div>
      </div>
    </div>
  </div>

  <!-- Main Trading Interface -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Chart Column -->
    <div class="lg:col-span-2 trading-card rounded-xl p-5">
      <div class="flex justify-between items-center mb-4">
        <h2 class="font-bold text-lg">Price Chart</h2>
        <div class="flex items-center gap-2">
          <span class="inline-block mb-4 font-mono px-3 py-1 text-sm">C:<span id="current-profit">$0.00</span></span>
          <span class="inline-block mb-4 font-mono px-3 py-1 text-sm">U:<span id="open-pnl">$0.00</span></span>
        </div>
      </div>

      <!-- Chart Canvas -->
      <div class="relative">
        <canvas id="chart" class="w-full h-[400px]"></canvas>
        <div id="tradeMessage" class="text-sm text-red-400 mt-2 h-5"></div>
      </div>

      <!-- Trading Controls -->
      <div class="mt-6 grid grid-cols-3 gap-3">
        <button id="buy" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 border-0">
          <span>BUY</span>
          <span class="text-xs opacity-80">(B)</span>
        </button>
        <button id="sell" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 border-0">
          <span>SELL</span>
          <span class="text-xs opacity-80">(S)</span>
        </button>
        <button id="close" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 border-0">
          <span>Close All</span>
          <span class="text-xs opacity-80">(X)</span>
        </button>
      </div>

      <!-- Contract Selection -->
      <div class="mt-6 grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-slate-400 mb-1">Contract</label>
          <div class="flex gap-2">
            <!-- MNQ Button -->
            <label class="flex-1">
              <input type="radio" name="contract" value="micro" class="peer hidden" checked="">
              <div class="w-full h-full bg-slate-800 hover:bg-slate-700 border border-solid border-blue-500/30
                          py-2 rounded-lg text-center
                          text-slate-300 peer-checked:text-blue-400">
                MNQ
              </div>
            </label>

            <!-- NQ Button -->
            <label class="flex-1">
              <input type="radio" name="contract" value="mini" class="peer hidden">
              <div class="w-full h-full bg-slate-800 hover:bg-slate-700 border border-solid border-blue-500/30
                          py-2 rounded-lg text-center
                          text-slate-300 peer-checked:text-blue-400">
                NQ
              </div>
            </label>
          </div>
        </div>

        <div>
          <nav>
            <label class="block text-sm text-slate-400 mb-1">Position Size</label>
            <span id="lotSizeDisplay" class="text-sm text-slate-400">1</span>
          </nav>
          <!-- Lot Size Selection -->
          <div class="lot-option w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 flex gap-2 flex-wrap justify-center text-sm">
            <label class="flex items-center gap-1">
              <button id="lotDecrease" class="px-3 py-1 bg-gray-700 text-white rounded border-0">−</button>
            </label>
            <div class="flex flex-row items-center gap-1">
              <label class="flex flex-col items-center gap-1">
                <input type="radio" name="lot" value="1" checked="" class="form-radio">
                <div>1</div>
              </label>
              <label class="flex flex-col items-center gap-1">
                <input type="radio" name="lot" value="3" class="form-radio">
                <div>3</div>
              </label>
              <label class="flex flex-col items-center gap-1">
                <input type="radio" name="lot" value="5" class="form-radio">
                <div>5</div>
              </label>
              <label class="flex flex-col items-center gap-1">
                <input type="radio" name="lot" value="10" class="form-radio">
                <div>10</div>
              </label>
              <label class="flex flex-col items-center gap-1">
                <input type="radio" name="lot" value="15" class="form-radio"> <div>15</div>
              </label>
            </div>
            <label class="flex items-center gap-1">
              <button id="lotIncrease" class="px-3 py-1 bg-gray-700 text-white rounded border-0">+</button>
            </label>
          </div>
        </div>
      </div>

      <!-- Risk Management -->
      <div class="mt-6 grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-slate-400 mb-1">Stop Loss ($)</label>
          <input id="stopLossAmount" type="number" value="50" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2">
        </div>
        <div>
          <label class="block text-sm text-slate-400 mb-1">Take Profit ($)</label>
          <input id="takeProfitAmount" type="number" value="100" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2">
        </div>
      </div>
    </div>

    <!-- Right Column -->
    <div class="space-y-6">
      <!-- Account Summary -->
      <div class="trading-card rounded-xl p-5">
        <h2 class="font-bold text-lg mb-4">💰 Account Summary</h2>
        <div class="space-y-4">
          <div class="flex justify-between items-center">
            <span class="text-slate-400">Balance:</span>
            <span id="balance" class="font-mono font-bold text-xl">$25,000.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-slate-400">Margin Used:</span>
            <span id="marginUsed" class="font-mono">$0.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-slate-400">Available Margin:</span>
            <span id="availableMargin" class="font-mono text-green-400">$25,000.00</span>
          </div>
        </div>
      </div>

      <!-- Strategy Bots -->
      <div class="trading-card rounded-xl p-5">
        <h2 class="font-bold text-lg mb-4">🤖 Strategy Bots</h2>
        <div class="space-y-3 max-h-[420px] overflow-y-auto pr-2">
          <!-- ICT Ghost Bot -->
          <div class="bot-card bot-ict bg-slate-800/50 p-3 rounded-lg cursor-pointer">
            <div class="flex justify-between items-center">
              <h3 class="font-bold flex items-center gap-2">
                <span>👻</span>
                <span>ICT Ghost</span>
              </h3>
              <div class="text-green-400 font-mono text-sm">+$0</div>
            </div>
            <div class="text-xs text-slate-400 mt-1">Smart Money Concepts with 1:2 RR</div>
            <div class="grid grid-cols-3 gap-2 text-xs mt-3">
              <div>
                <div class="text-slate-500">Win Rate</div>
                <div>75%</div>
              </div>
              <div>
                <div class="text-slate-500">Avg Win</div>
                <div>$42</div>
              </div>
              <div>
                <div class="text-slate-500">ROI</div>
                <div>18%</div>
              </div>
            </div>
          </div>

          <!-- FVG Sniper Bot -->
          <div class="bot-card bot-fvg bg-slate-800/50 p-3 rounded-lg cursor-pointer">
            <div class="flex justify-between items-center">
              <h3 class="font-bold flex items-center gap-2">
                <span>🌀</span>
                <span>FVG Sniper</span>
              </h3>
              <div class="text-green-400 font-mono text-sm">+$0</div>
            </div>
            <div class="text-xs text-slate-400 mt-1">Fair Value Gap entries with 1:3 RR</div>
            <div class="grid grid-cols-3 gap-2 text-xs mt-3">
              <div>
                <div class="text-slate-500">Win Rate</div>
                <div>68%</div>
              </div>
              <div>
                <div class="text-slate-500">Avg Win</div>
                <div>$35</div>
              </div>
              <div>
                <div class="text-slate-500">Trades/Day</div>
                <div>2-3</div>
              </div>
            </div>
          </div>

          <!-- Price Action Pro Bot -->
          <div class="bot-card bot-pa bg-slate-800/50 p-3 rounded-lg cursor-pointer">
            <div class="flex justify-between items-center">
              <h3 class="font-bold flex items-center gap-2">
                <span>📊</span>
                <span>Price Action Pro</span>
              </h3>
              <div class="text-green-400 font-mono text-sm">+$0</div>
            </div>
            <div class="text-xs text-slate-400 mt-1">Candlestick pattern recognition</div>
            <div class="grid grid-cols-3 gap-2 text-xs mt-3">
              <div>
                <div class="text-slate-500">Win Rate</div>
                <div>62%</div>
              </div>
              <div>
                <div class="text-slate-500">Avg Win</div>
                <div>$28</div>
              </div>
              <div>
                <div class="text-slate-500">Hold Time</div>
                <div>15m</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Trade History -->
  <div class="trading-card rounded-xl p-5 mt-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="font-bold text-lg">📋 Trade History</h2>
      <div class="flex gap-4">
        <div class="text-sm">
          <span class="text-slate-400">Total Trades:</span>
          <span id="totalTrades" class="font-bold ml-2">0</span>
        </div>
        <div class="text-sm">
          <span class="text-slate-400">Profitability:</span>
          <span id="winlossratio" class="font-bold ml-2">0%</span>
        </div>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table id="history" class="w-full text-sm">
        <thead>
          <tr class="text-left border-b border-slate-700">
            <th class="pb-2 text-slate-400">Time</th>
            <th class="pb-2 text-slate-400">Type</th>
            <th class="pb-2 text-slate-400">Size</th>
            <th class="pb-2 text-slate-400">Entry</th>
            <th class="pb-2 text-slate-400">Exit</th>
            <th class="pb-2 text-slate-400">P&amp;L</th>
            <th class="pb-2 text-slate-400">Duration</th>
            <th class="pb-2 text-slate-400">Reason</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-700">
          <tr>
            <td colspan="8" class="py-8 text-center text-slate-500">No trades yet</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

    <script src="https://michaelsboost.com/TailwindCSSMod/tailwind-mod-noreset.min.js"></script>

    <script src="dist/script.js" type="module"></script>
  </body>
</html>