static/index.html

<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">&#x1f4fa;</span>
          <h1>RETRO ALPHA</h1>
          <p class="onboard-sub">Indian Stock Market Survival Game &bull; 1994&ndash;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 &#x20b9;10,00,000</strong>
                <p>Turn it into <strong>&#x20b9;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 &amp; more.</p>
              </div>
            </div>
            <div class="rule">
              <span class="rule-num">3</span>
              <div>
                <strong>Place Trades &amp; 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 &mdash; real events drive the game.</p>
              </div>
            </div>
          </div>
        </div>
        <button id="onboard-start" class="btn btn-primary btn-big">ENTER THE MARKET &blacktriangleright;</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: &#x20b9;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>&Delta;</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 &amp; P&amp;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&amp;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 &amp; 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">&#x20b9;0</span></div>
            <div class="row"><span>Net Worth</span><span id="net-worth">&#x20b9;0</span></div>
            <div class="row"><span>Invested</span><span id="invested-line">&#x20b9;0</span></div>
            <div class="row pnl"><span>Unrealized P&amp;L</span><span id="pnl-line">&#x20b9;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 &#x23ce;</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 &#x20b9;10L to &#x20b9;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 &amp; 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>