index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NIFTY ATM CE+PE · Overnight Carry Backtest</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/style.css">
</head>
<body>

  <!-- ══ TICKER TAPE ══ -->
  <div class="tape" aria-hidden="true"><div class="tape-track" id="tapeTrack"></div></div>

  <!-- ══ TOP BAR ══ -->
  <header class="topbar">
    <div class="brand">
      <span class="brand-mark">▚</span>
      <span class="brand-name">NIFTY&nbsp;STRADDLE&nbsp;LAB</span>
      <span class="brand-sub">ATM CE+PE · OVERNIGHT CARRY</span>
    </div>
    <div class="topbar-right">
      <span class="readout" id="niftyReadout">NIFTY —</span>
      <span class="pill offline" id="connPill">● OFFLINE</span>
      <button class="ghost-btn hidden" id="logoutBtn">DISCONNECT</button>
    </div>
  </header>

  <!-- ══ LOGIN VIEW ══ -->
  <section class="view" id="loginView">
    <div class="login-grid">
      <div class="login-left">
        <div class="sec-label">SEC.00 / AUTH</div>
        <h1 class="hero">NIFTY ATM<br><span class="accent">CE&nbsp;+&nbsp;PE</span><br>OVERNIGHT CARRY</h1>
        <p class="hero-sub">Entry 15:15 → hold overnight → next-session target / SL → square-off 15:10</p>
        <div class="flow">
          <div class="flow-row"><span class="flow-day">MON</span><span class="flow-t">15:15 ENTRY</span><span class="flow-arrow">⟶</span><span class="flow-t">TUE 15:10</span><span class="flow-tag">EXP TUE</span></div>
          <div class="flow-row"><span class="flow-day">TUE</span><span class="flow-t">15:15 ENTRY</span><span class="flow-arrow">⟶</span><span class="flow-t">WED 15:10</span><span class="flow-tag">EXP +7D</span></div>
          <div class="flow-row"><span class="flow-day">WED</span><span class="flow-t">15:15 ENTRY</span><span class="flow-arrow">⟶</span><span class="flow-t">THU 15:10</span><span class="flow-tag">EXP +6D</span></div>
          <div class="flow-row"><span class="flow-day">THU</span><span class="flow-t">15:15 ENTRY</span><span class="flow-arrow">⟶</span><span class="flow-t">FRI 15:10</span><span class="flow-tag">EXP +5D</span></div>
        </div>
        <ul class="facts">
          <li><span>LOT</span>65</li>
          <li><span>ATM STEP</span>50</li>
          <li><span>LEGS</span>LONG CE + LONG PE</li>
          <li><span>EXPIRIES</span>TUESDAYS</li>
        </ul>
      </div>
      <div class="panel login-right">
        <div class="panel-head"><span>BREEZE TERMINAL</span><span class="dim">v2.4.1</span></div>
        <label class="field-label" for="sessionInput">API SESSION</label>
        <input class="field" id="sessionInput" type="password" placeholder="paste session token — demo: any value" autocomplete="off">
        <button class="btn primary" id="connectBtn">CONNECT BREEZE</button>
        <div class="term" id="connLog"><span class="dim">/ awaiting handshake…</span></div>
        <p class="demo-note">OFFLINE DEMO MODE — market data is simulated locally in your browser. Wire the Python Breeze engine to this UI for live data.</p>
      </div>
    </div>
  </section>

  <!-- ══ DASHBOARD VIEW ══ -->
  <section class="view hidden" id="dashView">
    <div class="dash">

      <!-- SIDEBAR -->
      <aside class="sidebar">
        <div class="sec-label">SEC.01 / PARAMETERS</div>

        <label class="field-label" for="startDate">BACKTEST START</label>
        <input class="field" type="date" id="startDate">

        <label class="field-label" for="endDate">BACKTEST END</label>
        <input class="field" type="date" id="endDate">

        <div class="field-pair">
          <div>
            <label class="field-label" for="targetPts">TARGET PTS</label>
            <input class="field" type="number" id="targetPts" min="0.5" step="0.5" value="20">
          </div>
          <div>
            <label class="field-label" for="slPts">STOP-LOSS PTS</label>
            <input class="field" type="number" id="slPts" min="0.5" step="0.5" value="10">
          </div>
        </div>

        <label class="field-label" for="brokerage">BROKERAGE / LEG (₹)</label>
        <input class="field" type="number" id="brokerage" min="0" step="5" value="40">

        <label class="field-label" for="sqOff">NEXT-DAY SQUARE-OFF</label>
        <input class="field" type="time" id="sqOff" value="15:10">

        <div class="sidebar-meta">
          <div><span>ENTRY</span><b>15:15</b></div>
          <div><span>LOT SIZE</span><b>65</b></div>
          <div><span>ATM STEP</span><b>50</b></div>
        </div>

        <div class="run-zone">
          <button class="btn primary big" id="runBtn">▶&nbsp; RUN OVERNIGHT BACKTEST</button>
          <div class="progress hidden" id="progressWrap">
            <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
            <div class="progress-label dim" id="progressLabel">INIT…</div>
          </div>
        </div>

        <div class="strategy-box">
          <div class="panel-head"><span>STRATEGY</span></div>
          <p>Mon–Thu 15:15 → buy ATM CE + ATM PE (lot 65). Hold overnight. Next trading day: SL checked before target on the premium path; time exit at square-off.</p>
        </div>
      </aside>

      <!-- MAIN -->
      <main class="dash-main">

        <!-- PRE-RUN EMPTY STATE -->
        <div class="prerun" id="preRun">
          <div class="sec-label">SEC.02 / RESULTS</div>
          <div class="prerun-box">
            <div class="prerun-glyph">▦</div>
            <h2>AWAITING RUN</h2>
            <p>Configure parameters on the left, then fire the backtest.<br>Results, equity curve and trade log render here.</p>
            <button class="btn" id="runBtn2">▶&nbsp; RUN OVERNIGHT BACKTEST</button>
          </div>
        </div>

        <!-- RESULTS -->
        <div id="results" class="hidden">

          <section class="block">
            <div class="block-head"><span class="sec-label">SEC.02 / SUMMARY</span><span class="dim" id="rangeLabel"></span></div>
            <div class="metrics" id="metricsGrid"></div>
          </section>

          <section class="block">
            <div class="block-head"><span class="sec-label">SEC.03 / DAILY P&L + CUMULATIVE</span><span class="dim">bars = daily ₹ · line = cumulative ₹</span></div>
            <div class="panel chart-panel">
              <div class="chart-wrap" id="chartWrap"></div>
            </div>
          </section>

          <section class="block">
            <div class="block-head"><span class="sec-label">SEC.04 / TRADE DETAILS</span><span class="legend"><i class="dot up"></i>profit <i class="dot dn"></i>loss</span></div>
            <div class="panel table-wrap">
              <table class="data" id="tradesTable"></table>
            </div>
          </section>

          <section class="block two-col">
            <div>
              <div class="block-head"><span class="sec-label">SEC.05 / ENTRY → NEXT-DAY EXIT</span></div>
              <div class="panel table-wrap short">
                <table class="data" id="dailyTable"></table>
              </div>
            </div>
            <div>
              <div class="block-head"><span class="sec-label">SEC.06 / EXIT REASON</span></div>
              <div class="panel" id="reasonPanel"></div>
            </div>
          </section>

          <section class="block two-col">
            <div>
              <div class="block-head"><span class="sec-label">SEC.07 / RULES</span></div>
              <div class="panel rules" id="rulesPanel"></div>
            </div>
            <div>
              <div class="block-head"><span class="sec-label">SEC.08 / EXPORT</span></div>
              <div class="panel downloads">
                <button class="btn" id="dlTrades">⬇&nbsp; TRADE CSV</button>
                <button class="btn" id="dlDaily">⬇&nbsp; DAILY CSV</button>
                <p class="dim export-note">UTF-8 · two-decimal precision · matches Python engine columns</p>
              </div>
            </div>
          </section>

        </div>
      </main>
    </div>
  </section>

  <div class="toast hidden" id="toast"></div>

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