Spaces:
Running
Running
File size: 10,394 Bytes
e6970ed 2df7867 e6970ed f316f5a e6970ed f316f5a e6970ed 1d0b04b e6970ed f316f5a e6970ed 9cbb438 e6970ed 1d0b04b e6970ed f316f5a e6970ed f316f5a e6970ed f316f5a e6970ed f316f5a e6970ed 1d0b04b e6970ed f316f5a e6970ed f316f5a e6970ed f316f5a e6970ed f316f5a e6970ed 1d0b04b e6970ed 2df7867 e6970ed 2df7867 1d0b04b e6970ed 2df7867 1d0b04b e6970ed 2df7867 e6970ed | 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 | <div class="crt-frame">
<div class="crt-screen">
<div class="screen-curve"></div>
<div class="scanlines"></div>
<div class="flicker"></div>
<!-- Onboarding overlay -->
<div id="onboarding-overlay" class="onboarding-overlay">
<div class="onboarding-box">
<div class="onboard-header">
<span class="onboard-icon">📺</span>
<h1>RETRO ALPHA</h1>
<p class="onboard-sub">Indian Stock Market Survival Game • 1994–2004</p>
</div>
<div class="onboard-body">
<div class="onboard-rules">
<div class="rule">
<span class="rule-num">1</span>
<div>
<strong>You start with ₹10,00,000</strong>
<p>Turn it into <strong>₹20,00,000</strong> over 10 years (120 months) of real Indian market history.</p>
</div>
</div>
<div class="rule">
<span class="rule-num">2</span>
<div>
<strong>Review the Market Watch</strong>
<p>Check prices of 8 assets: Nifty 50, IT, Gold, Real Estate, Crypto, Bonds & more.</p>
</div>
</div>
<div class="rule">
<span class="rule-num">3</span>
<div>
<strong>Place Trades & Advance</strong>
<p>Buy/Sell using the Order Pad, then <em>Advance Month</em> to see how events and agents move the market.</p>
</div>
</div>
<div class="rule">
<span class="rule-num">4</span>
<div>
<strong>Survive the Crashes</strong>
<p>Asian Crisis, Pokhran-II, Dot-com bust, 9/11, 2004 elections — real events drive the game.</p>
</div>
</div>
</div>
</div>
<button id="onboard-start" class="btn btn-primary btn-big">ENTER THE MARKET ▸</button>
<p class="onboard-hint">Tip: Press <kbd>Enter</kbd> to advance months quickly</p>
</div>
</div>
<!-- Header -->
<header class="topbar">
<div class="brand glow">RETRO ALPHA</div>
<div class="progress-section">
<div class="progress-bar-wrap">
<div class="progress-bar" id="progress-bar"></div>
</div>
<span class="progress-label" id="progress-label">Month 0/120</span>
</div>
<div class="goal-tracker">
<span class="goal-label">Goal: ₹20L</span>
<span class="goal-pct" id="goal-pct">0%</span>
</div>
<div class="topbar-right">
<span id="date-display">1994-04</span>
<span class="sep">|</span>
<span id="llm-status" class="llm-tag">LLM: ...</span>
<span class="sep">|</span>
<button id="help-btn" class="btn-icon" title="How to play">?</button>
</div>
</header>
<!-- Main 3-column grid -->
<main class="kite-grid">
<!-- LEFT: Market Watch -->
<aside class="market-watch panel">
<h2>Market Watch <span class="panel-hint">Click asset for chart</span></h2>
<table class="watch-table">
<thead>
<tr><th>Asset</th><th>Price</th><th>Δ</th><th>%</th></tr>
</thead>
<tbody id="watch-body"></tbody>
</table>
</aside>
<!-- CENTER: Chart + Insight + Positions + News -->
<section class="center-col">
<div class="panel chart-panel">
<div class="chart-header">
<h2 id="chart-title">Net Worth</h2>
<div class="chart-controls">
<button class="chip active" data-chart="networth">Net Worth</button>
<button class="chip" data-chart="nifty_50">Nifty 50</button>
<button class="chip" data-chart="nifty_it">Nifty IT</button>
<button class="chip" data-chart="gold">Gold</button>
<button class="chip" data-chart="crypto">Crypto</button>
<button class="chip" data-chart="real_estate">Real Estate</button>
</div>
</div>
<div class="chart-wrap">
<canvas id="price-chart"></canvas>
</div>
</div>
<div class="panel insight-panel" id="insight-panel">
<h2>AI Insight <span class="badge" id="llm-badge">OFF</span><button id="insight-generate-btn" class="btn btn-secondary btn-sm" style="margin-left:8px;font-size:11px;">Generate</button></h2>
<div class="insight-text deterministic" id="insight-text">Click <strong>Generate</strong> for AI market commentary.</div>
</div>
<div class="panel positions-panel">
<h2>Your Positions <span class="muted">(cost basis & P&L)</span></h2>
<div class="positions-wrap">
<table class="positions-table">
<thead>
<tr>
<th>Asset</th>
<th>Qty</th>
<th>Avg Cost</th>
<th>Price</th>
<th>Value</th>
<th>P&L</th>
</tr>
</thead>
<tbody id="positions-body">
<tr><td colspan="6" class="muted center">Buy assets to see them here</td></tr>
</tbody>
</table>
</div>
</div>
<div class="panel news-panel" id="news-panel">
<h2>News & Agents</h2>
<div class="news-content" id="news-content">
<div class="muted">System ready. Press Advance Month to begin.</div>
</div>
<div class="agent-log" id="agent-log"></div>
</div>
</section>
<!-- RIGHT: Order Pad + Portfolio + Chat -->
<aside class="right-col">
<div class="panel order-panel">
<h2>Order Pad</h2>
<form id="trade-form" class="trade-form">
<label for="asset">Asset</label>
<select id="asset" name="asset">
<option value="Nifty 50">Nifty 50</option>
<option value="Nifty IT">Nifty IT</option>
<option value="FD">FD</option>
<option value="Gov Bonds">Gov Bonds</option>
<option value="Real Estate">Real Estate</option>
<option value="Crypto">Crypto</option>
<option value="Gold">Gold</option>
</select>
<div class="trade-side-row">
<button type="button" class="side-btn buy active" id="side-buy">BUY</button>
<button type="button" class="side-btn sell" id="side-sell">SELL</button>
<input type="hidden" id="action" name="action" value="buy" />
</div>
<label for="amount">% of Portfolio</label>
<div class="amount-row">
<input type="range" id="amount-range" min="1" max="100" value="10" />
<input type="number" id="amount" name="amount" min="1" max="100" value="10" />
<span class="amount-unit">%</span>
</div>
<button type="submit" class="btn btn-buy" id="trade-btn">PLACE ORDER</button>
</form>
<div class="summary">
<div class="row"><span>Cash</span><span id="cash-line">₹0</span></div>
<div class="row"><span>Net Worth</span><span id="net-worth">₹0</span></div>
<div class="row"><span>Invested</span><span id="invested-line">₹0</span></div>
<div class="row pnl"><span>Unrealized P&L</span><span id="pnl-line">₹0</span></div>
</div>
</div>
<div class="panel chat-panel">
<h2>AI Advisor <span class="badge" id="chat-llm-badge">LLM</span></h2>
<div class="chat-log" id="chat-log">
<div class="chat-msg bot">
Welcome to Retro Alpha. I'm your trading advisor. Ask me about your portfolio, market conditions, or strategy.
</div>
</div>
<form id="chat-form" class="chat-form">
<input type="text" id="chat-input" placeholder="Should I buy Nifty 50 right now?" autocomplete="off" />
<button type="submit" class="btn btn-secondary">Ask</button>
</form>
</div>
</aside>
</main>
<!-- Footer -->
<footer class="bottombar">
<button id="advance-btn" class="btn btn-primary btn-advance">Advance Month ⏎</button>
<button id="mentor-btn" class="btn btn-secondary">Year-End Review</button>
<button id="reset-btn" class="btn btn-danger">Reset Game</button>
<span class="bottombar-hint">Press <kbd>Enter</kbd> to advance</span>
<span class="muted" id="status-line">Ready</span>
</footer>
<!-- Mentor modal -->
<div id="mentor-modal" class="modal-overlay hidden">
<div class="modal-box">
<h2>Annual Mentor Review</h2>
<div class="modal-body">
<div class="roast" id="mentor-roast"></div>
<div class="lesson" id="mentor-lesson"></div>
<div class="suggestion" id="mentor-suggestion"></div>
</div>
<button id="close-modal" class="btn btn-primary">Got It</button>
</div>
</div>
<!-- Help modal -->
<div id="help-modal" class="modal-overlay hidden">
<div class="modal-box modal-help">
<h2>How to Play</h2>
<div class="modal-body">
<ul>
<li><strong>Goal:</strong> Grow ₹10L to ₹20L in 120 months (1994-2004)</li>
<li><strong>1. Review:</strong> Check Market Watch for price changes</li>
<li><strong>2. Trade:</strong> Buy/Sell any asset as a % of portfolio</li>
<li><strong>3. Advance:</strong> Press Advance Month to trigger events & market moves</li>
<li><strong>Chart:</strong> Click any asset in Market Watch to view its trend</li>
<li><strong>AI Chat:</strong> Ask the advisor about your portfolio or strategy</li>
<li><strong>Year-End Review:</strong> Get a mentor review after each year</li>
<li><strong>Shortcut:</strong> Press <kbd>Enter</kbd> to advance months quickly</li>
</ul>
</div>
<button id="close-help" class="btn btn-primary">Got It</button>
</div>
</div>
<!-- Toast container -->
<div id="toast-container" class="toast-container"></div>
</div>
</div>
|