<!-- iPulse Intelligence™ (HTML panel only; CSS in its own panel; JS in its own panel) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>iPulse Intelligence™</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100">
<div class="max-w-7xl mx-auto p-4 sm:p-6">
<!-- Header -->
<header class="sticky top-0 z-20 glass rounded-2xl pro-card p-4 sm:p-5 mb-6">
<div class="flex flex-col xl:flex-row items-start xl:items-center justify-between gap-6">
<div>
<div class="brand">
<div class="spark" id="brandSpark" aria-hidden="true"></div>
<h1 class="title">iPulse Intelligence™</h1>
<span class="powered">Powered by MW Technologies</span>
</div>
<p class="tagline mt-2">Trend. Momentum. Volatility. Time. Intelligence.</p>
</div>
<div class="flex items-center gap-4 flex-wrap">
<div class="badge text-slate-300">Refreshes: <span id="batchInfo">All pairs · M5/M15/M30</span></div>
<div class="badge text-slate-300">Next sync in: <span id="countdown">--:--</span></div>
<div class="badge text-slate-300">Trades Today: <span id="tradeCounter">0</span></div>
<!-- Sound selector -->
<div class="flex items-center gap-2">
<span class="text-sm text-slate-300">Sound</span>
<label class="switch"><input id="soundToggle" type="checkbox" checked><span class="slider"></span></label>
<select id="soundSelect" class="sound-select">
<option value="beep">Beep</option>
<option value="chime">Chime</option>
<option value="cha">Cha-Ching</option>
<option value="cash">Cash Register</option>
</select>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-300">Vol</span>
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.6" class="w-24">
<button id="testBell" class="px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700">Test</button>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3 pt-3 text-xs">
<span class="badge">SL Majors: 35 pips</span>
<span class="badge">SL XAUUSD: 75 pips (≈750 pts)</span>
<span id="windowStatus" class="badge">Window: —</span>
<span class="badge">TZ: America/Chicago (12-hr)</span>
<span id="audioPolicy" class="badge">Signals fire only on CLOSED bars</span>
</div>
<div class="mt-4 p-3 rounded-2xl bg-slate-900/50 border border-slate-700/40 drawer-enter">
<div class="flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between">
<div class="flex items-center gap-2 flex-wrap">
<span class="text-sm text-slate-300">Timeframes:</span>
<span class="chip" data-tf="5min" data-active="true">M5</span>
<span class="chip" data-tf="15min" data-active="true">M15</span>
<span class="chip" data-tf="30min" data-active="true">M30</span>
<span class="mx-3 h-6 w-px bg-slate-700/60"></span>
<span class="text-sm text-slate-300">Signals:</span>
<span class="chip" id="chip-buy" data-active="true">Buy</span>
<span class="chip" id="chip-sell" data-active="true">Sell</span>
<span class="chip" id="chip-pulse" data-active="false" title="Show only Pulse Surge-confirmed signals">Pulse Surge Only</span>
</div>
<div class="flex items-center gap-3">
<button id="pairFilterBtn" class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-sm border border-slate-600/50">
Select Pairs
</button>
<label class="switch">
<input id="onlySelectedPairs" type="checkbox">
<span class="slider"></span>
</label>
<span class="text-sm text-slate-300">Show only selected pairs</span>
</div>
</div>
<div id="pairDrawer" class="hidden mt-3 p-3 rounded-2xl bg-slate-950/60 border border-slate-700/40">
<div class="flex items-center justify-between mb-3">
<div class="text-sm text-slate-300">Filter Pairs</div>
<div class="flex items-center gap-2 text-xs">
<button id="pairSelectAll" class="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700">Select all</button>
<button id="pairClearAll" class="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700">Clear</button>
</div>
</div>
<div id="pairGrid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 text-sm"></div>
</div>
</div>
</header>
<!-- Risk Controls (NEW) -->
<section class="pro-card rounded-2xl p-4 sm:p-5 mb-6">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold">Risk Controls</h2>
<span class="text-xs text-slate-400">Drives lot sizing & $ for SL / Trail / Lock / TP 2:1</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div>
<label class="block text-sm text-slate-300 mb-1">Account (USD)</label>
<input id="riskBalance" type="number" step="1"
class="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 focus:outline-none focus:border-sky-400"
placeholder="500" />
</div>
<div>
<label class="block text-sm text-slate-300 mb-1">Leverage</label>
<input id="riskLeverage" type="number" step="1"
class="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 focus:outline-none focus:border-sky-400"
placeholder="500" />
</div>
<div>
<label class="block text-sm text-slate-300 mb-1">Risk %</label>
<input id="riskPct" type="number" step="0.1"
class="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 focus:outline-none focus:border-sky-400"
placeholder="2.0" />
</div>
</div>
</section>
<!-- Top Aligned (0–3 bars) -->
<section class="pro-card rounded-2xl p-4 sm:p-5 mb-6">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold">Top Setups (Last 4 closed bars)</h2>
</div>
<div id="topAligned" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3"></div>
</section>
<!-- Top Counter-Trend (0–3 bars) -->
<section class="pro-card rounded-2xl p-4 sm:p-5 mb-2">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold">Top Counter-Trend Setups (Last 4 closed bars)</h2>
</div>
<div id="topCounter" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3"></div>
</section>
</div>
<!-- Audio Gate (autoplay unlock) -->
<div id="audioGate" class="audio-gate hidden">
<span>Click to enable signal sounds</span>
<button id="audioGateBtn">Enable</button>
</div>
</body>
</html>