| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>Options Intelligence β MSFT Β· BMNR Β· IREN Β· CRCL</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/> |
| <style> |
| :root{ |
| --bg:#F7F8FA;--surface:#fff;--surface2:#F0F2F7; |
| --border:#E2E5EE;--border2:#C8CCDB; |
| --t1:#0D0F1A;--t2:#3D4460;--t3:#8B92AA; |
| --blue:#1A56DB;--blue-l:#EBF1FF;--blue-d:#1341B0; |
| --green:#0A7A45;--green-l:#E8F8F0;--green-m:#D1F0E0; |
| --red:#CC2828;--red-l:#FFF0F0;--red-m:#FFD8D8; |
| --amber:#B45309;--amber-l:#FFF8ED;--amber-m:#FDECC8; |
| --purple:#6326C7;--purple-l:#F3EEFF; |
| --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); |
| --sh2:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05); |
| --r:10px; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;min-height:100vh} |
| a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline} |
| button,input{font-family:inherit;cursor:pointer} |
| textarea:focus,input:focus{outline:none} |
| ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)} |
| ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} |
|
|
| /* ββ HEADER ββ */ |
| .hdr{background:var(--surface);border-bottom:1px solid var(--border);padding:0 28px;position:sticky;top:0;z-index:100;box-shadow:var(--sh)} |
| .hdr-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:58px} |
| .logo{display:flex;align-items:center;gap:10px} |
| .logo-mark{width:34px;height:34px;background:linear-gradient(135deg,#1A56DB,#6326C7);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 2px 8px rgba(26,86,219,.3)} |
| .logo-title{font-size:16px;font-weight:700;letter-spacing:-.4px} |
| .logo-sub{font-size:11px;color:var(--t3);margin-top:1px} |
| .hdr-right{display:flex;align-items:center;gap:12px} |
| .hdr-time{font-size:11px;color:var(--t3)} |
| .hdr-vix{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);display:none} |
| .btn-refresh{display:flex;align-items:center;gap:6px;padding:8px 18px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:-.1px;transition:all .15s} |
| .btn-refresh:hover:not(:disabled){background:var(--blue-d);transform:translateY(-1px);box-shadow:0 3px 10px rgba(26,86,219,.35)} |
| .btn-refresh:disabled{background:var(--border2);color:var(--t3);cursor:not-allowed;transform:none;box-shadow:none} |
| @keyframes spin{to{transform:rotate(360deg)}} |
| .spin{animation:spin .8s linear infinite} |
| @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} |
|
|
| /* ββ GATE ββ */ |
| #gate{min-height:calc(100vh - 58px);display:flex;align-items:center;justify-content:center;padding:32px 16px} |
| .gate-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;max-width:460px;width:100%;box-shadow:var(--sh2)} |
| .gate-logo{width:52px;height:52px;background:linear-gradient(135deg,#1A56DB,#6326C7);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 20px;box-shadow:0 4px 12px rgba(26,86,219,.3)} |
| .gate-h{font-size:21px;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:-.4px} |
| .gate-p{font-size:13px;color:var(--t2);text-align:center;line-height:1.65;margin-bottom:28px} |
| .gate-lbl{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:6px} |
| .gate-inp{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:'JetBrains Mono',monospace;color:var(--t1);background:var(--bg);transition:border-color .15s;margin-bottom:6px} |
| .gate-inp:focus{border-color:var(--blue);background:#fff} |
| .gate-hint{font-size:11px;color:var(--t3);line-height:1.6;margin-bottom:20px} |
| .gate-err{font-size:12px;color:var(--red);margin-bottom:10px;display:none} |
| .btn-start{width:100%;padding:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;transition:all .15s} |
| .btn-start:hover{background:var(--blue-d)} |
| .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:24px} |
| .feat{padding:11px 14px;background:var(--bg);border-radius:8px;border:1px solid var(--border);font-size:11px;color:var(--t2);display:flex;align-items:flex-start;gap:8px;line-height:1.4} |
| .feat-ic{font-size:15px;flex-shrink:0} |
|
|
| /* ββ PAGE ββ */ |
| .page{max-width:1280px;margin:0 auto;padding:24px 28px 48px} |
|
|
| /* ββ SUMMARY STRIP ββ */ |
| .summary-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:0;margin-bottom:24px;overflow:hidden;box-shadow:var(--sh)} |
| .summary-hdr{padding:12px 20px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} |
| .summary-hdr-title{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3)} |
| .summary-table{width:100%;border-collapse:collapse} |
| .summary-table th{padding:10px 16px;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);text-align:left;border-bottom:1px solid var(--border);background:var(--surface)} |
| .summary-table td{padding:13px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle} |
| .summary-table tr:last-child td{border-bottom:none} |
| .summary-table tr:hover td{background:#FAFBFF} |
| .sticker{font-size:14px;font-weight:800;letter-spacing:-.3px} |
| .sprice{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500} |
| .schg{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;font-family:'JetBrains Mono',monospace;margin-left:6px} |
| .up{background:var(--green-m);color:var(--green)}.dn{background:var(--red-m);color:var(--red)}.fl{background:var(--surface2);color:var(--t3)} |
| .strategy-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap} |
| .conf-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px} |
| .conf-high{background:var(--green-m);color:var(--green)} |
| .conf-med{background:var(--amber-m);color:var(--amber)} |
| .conf-low{background:var(--surface2);color:var(--t3)} |
| .mono{font-family:'JetBrains Mono',monospace;font-size:12px} |
| .summary-loading td{color:var(--t3);font-style:italic;font-size:12px} |
|
|
| /* ββ TICKER CARDS ββ */ |
| .cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} |
| @media(max-width:900px){.cards-grid{grid-template-columns:1fr}} |
|
|
| .tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);animation:fadeUp .35s ease both} |
| .tcard:hover{box-shadow:var(--sh2)} |
|
|
| .tcard-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px} |
| .tcard-ticker{font-size:20px;font-weight:800;letter-spacing:-.5px} |
| .tcard-name{font-size:11px;color:var(--t3);margin-top:2px} |
| .tcard-price{text-align:right;flex-shrink:0} |
| .price-big{font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace} |
| .price-chg{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;margin-top:4px;display:inline-block;font-family:'JetBrains Mono',monospace} |
|
|
| /* stats row */ |
| .stats-band{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)} |
| .sc{padding:11px 14px;border-right:1px solid var(--border)} |
| .sc:last-child{border-right:none} |
| .sc-l{font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:4px} |
| .sc-v{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace} |
| .sc-s{font-size:10px;color:var(--t3);margin-top:2px} |
|
|
| /* IV bar */ |
| .iv-bar-wrap{padding:13px 20px;border-bottom:1px solid var(--border)} |
| .iv-bar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px} |
| .iv-bar-lbl{font-size:11px;font-weight:600;color:var(--t2)} |
| .iv-regime-tag{font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px} |
| .rt-sell{background:var(--red-l);color:var(--red)} |
| .rt-buy{background:var(--green-l);color:var(--green)} |
| .rt-neutral{background:var(--amber-l);color:var(--amber)} |
| .iv-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;border:1px solid var(--border)} |
| .iv-fill{height:100%;border-radius:3px;transition:width .8s ease} |
|
|
| /* news pill */ |
| .news-row{padding:9px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;background:#FAFBFE} |
| .news-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--blue-l);color:var(--blue);flex-shrink:0;margin-top:1px;text-transform:uppercase;letter-spacing:.3px} |
| .news-text{font-size:11px;color:var(--t2);line-height:1.55;flex:1} |
| .news-src{font-size:10px;color:var(--t3);margin-top:2px} |
|
|
| /* recommendation block */ |
| .rec-block{padding:18px 20px;border-bottom:1px solid var(--border)} |
| .rec-block-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:12px} |
|
|
| .rec-banner{border-radius:9px;padding:14px;margin-bottom:14px;border:1.5px solid} |
| .rec-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px} |
| .rec-strat-name{font-size:15px;font-weight:800;letter-spacing:-.3px} |
| .rec-dir{font-size:11px;color:var(--t2);margin-top:2px} |
| .rec-conf{text-align:right;flex-shrink:0} |
| .rec-strike-row{display:flex;flex-wrap:wrap;gap:10px} |
| .rec-chip{display:flex;flex-direction:column;padding:7px 12px;border-radius:6px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06)} |
| .rec-chip-l{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);margin-bottom:3px} |
| .rec-chip-v{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace} |
|
|
| /* P&L row */ |
| .pnl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} |
| .pnl-box{padding:9px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg)} |
| .pnl-l{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);margin-bottom:3px} |
| .pnl-v{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace} |
|
|
| /* greeks row */ |
| .greeks-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px} |
| .greek-box{padding:8px 10px;background:var(--surface2);border-radius:6px;text-align:center} |
| .greek-sym{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:2px} |
| .greek-val{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--t1);font-weight:500} |
| .greek-lbl{font-size:9px;color:var(--t3);margin-top:1px} |
|
|
| /* plain english */ |
| .plain-block{padding:16px 20px;border-bottom:1px solid var(--border);background:#FAFCFF} |
| .plain-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:flex;align-items:center;gap:5px} |
| .plain-text{font-size:13px;line-height:1.75;color:var(--t2)} |
| .plain-text strong{color:var(--t1);font-weight:600} |
|
|
| /* risk + pass */ |
| .risk-block{padding:12px 20px;border-bottom:1px solid var(--border);background:#FFFBF5} |
| .risk-tag{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);margin-bottom:5px} |
| .risk-text{font-size:12px;line-height:1.65;color:#78350F} |
|
|
| .pass-block{padding:12px 20px;border-bottom:1px solid var(--border)} |
| .pass-tag{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);margin-bottom:5px} |
| .pass-text{font-size:12px;line-height:1.65;color:var(--t2)} |
|
|
| /* alt trade */ |
| .alt-block{padding:12px 20px;border-bottom:1px solid var(--border)} |
| .alt-tag{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);margin-bottom:6px} |
| .alt-inner{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg);border-radius:7px;border:1px solid var(--border)} |
| .alt-text{font-size:12px;line-height:1.6;color:var(--t2)} |
|
|
| /* scores */ |
| .scores-block{padding:14px 20px} |
| .scores-title{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:10px} |
| .score-row{display:flex;align-items:center;gap:8px;margin-bottom:5px} |
| .score-nm{font-size:11px;color:var(--t2);min-width:130px} |
| .score-tr{flex:1;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden} |
| .score-fi{height:100%;border-radius:3px;transition:width 1s ease} |
| .score-n{font-size:11px;font-weight:700;min-width:26px;text-align:right;font-family:'JetBrains Mono',monospace} |
|
|
| /* loading state */ |
| .card-loading{padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:10px} |
| .ld-spinner{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite} |
| .ld-text{font-size:13px;color:var(--t3)} |
| .ld-steps{font-size:11px;color:var(--border2);text-align:center;line-height:1.8} |
|
|
| /* error state */ |
| .card-err{padding:28px 20px;text-align:center} |
| .card-err-ico{font-size:30px;margin-bottom:8px} |
| .card-err-msg{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:14px} |
| .btn-retry{padding:7px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s} |
| .btn-retry:hover{background:var(--blue-l)} |
|
|
| /* strategy color classes */ |
| .s-sp{background:var(--purple-l);border-color:#C4B5FD}.b-sp{background:var(--purple-l);color:var(--purple)} |
| .s-sc{background:var(--amber-l);border-color:#FCD34D}.b-sc{background:var(--amber-l);color:var(--amber)} |
| .s-bc{background:var(--green-l);border-color:#6EE7B7}.b-bc{background:var(--green-l);color:var(--green)} |
| .s-bp{background:var(--red-l);border-color:#FCA5A5}.b-bp{background:var(--red-l);color:var(--red)} |
| .s-st{background:var(--blue-l);border-color:#93C5FD}.b-st{background:var(--blue-l);color:var(--blue)} |
| .s-sg{background:var(--blue-l);border-color:#BFDBFE}.b-sg{background:var(--blue-l);color:var(--blue)} |
| .s-ic{background:#F0FDF4;border-color:#86EFAC}.b-ic{background:#F0FDF4;color:#16A34A} |
| .s-bs{background:var(--green-l);border-color:#6EE7B7}.b-bs{background:var(--green-l);color:var(--green)} |
| .s-ps{background:var(--red-l);border-color:#FCA5A5}.b-ps{background:var(--red-l);color:var(--red)} |
| .s-df{background:var(--bg);border-color:var(--border)}.b-df{background:var(--bg);color:var(--t2)} |
|
|
| footer{padding:20px 28px;text-align:center;font-size:11px;color:var(--t3);border-top:1px solid var(--border);line-height:1.8;background:var(--surface)} |
| @media(max-width:700px){.page{padding:14px}.stats-band{grid-template-columns:repeat(2,1fr)}.pnl-row{grid-template-columns:repeat(2,1fr)}.greeks-row{grid-template-columns:repeat(2,1fr)}.hdr{padding:0 14px}} |
| </style> |
| </head> |
| <body> |
|
|
| |
| <header class="hdr"> |
| <div class="hdr-in"> |
| <div class="logo"> |
| <div class="logo-mark">π</div> |
| <div> |
| <div class="logo-title">Options Intelligence</div> |
| <div class="logo-sub">MSFT Β· BMNR Β· IREN Β· CRCL β Live AI Recommendations</div> |
| </div> |
| </div> |
| <div class="hdr-right"> |
| <span class="hdr-vix" id="hdr-vix"></span> |
| <span class="hdr-time" id="hdr-time"></span> |
| <button class="btn-refresh" id="btn-refresh" onclick="refreshAll()" disabled> |
| <svg id="ref-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 019-9 9.75 9.75 0 016.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 01-9 9 9.75 9.75 0 01-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg> |
| Refresh |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="gate"> |
| <div class="gate-card"> |
| <div class="gate-logo">π</div> |
| <div class="gate-h">Options Intelligence Dashboard</div> |
| <div class="gate-p">Live AI-powered options recommendations for <strong>MSFT, BMNR, IREN, CRCL</strong>. Each refresh searches live market data and generates a fresh trade recommendation with plain English explanations.</div> |
| <div class="gate-lbl">Anthropic API Key</div> |
| <input type="password" id="gate-key" class="gate-inp" placeholder="sk-ant-api03-β¦"/> |
| <div class="gate-hint">Your key stays in your browser only β never stored anywhere. Get one free at <a href="https://console.anthropic.com" target="_blank">console.anthropic.com</a>. Cost per refresh: ~$0.08β0.12.</div> |
| <div class="gate-err" id="gate-err"></div> |
| <button class="btn-start" onclick="startApp()">Launch Dashboard β</button> |
| <div class="feat-grid"> |
| <div class="feat"><div class="feat-ic">π</div><div>Live web search for current prices, IV and news on every refresh</div></div> |
| <div class="feat"><div class="feat-ic">π°</div><div>News sources shown β know where the information came from</div></div> |
| <div class="feat"><div class="feat-ic">π¬</div><div>Plain English explanation of every recommendation</div></div> |
| <div class="feat"><div class="feat-ic">π―</div><div>Exact strike, expiry, entry price and breakevens</div></div> |
| <div class="feat"><div class="feat-ic">β‘</div><div>Greeks: Delta, Gamma, Theta, Vega for every trade</div></div> |
| <div class="feat"><div class="feat-ic">β οΈ</div><div>Risk scenario and "skip if" conditions per ticker</div></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="app" style="display:none"> |
| <div class="page"> |
|
|
| |
| <div class="summary-strip"> |
| <div class="summary-hdr"> |
| <span class="summary-hdr-title">π At-a-Glance Summary β What to trade today</span> |
| <span style="font-size:11px;color:var(--t3)" id="summary-ts"></span> |
| </div> |
| <table class="summary-table" id="summary-tbl"> |
| <thead> |
| <tr> |
| <th>Ticker</th> |
| <th>Price</th> |
| <th>Strategy</th> |
| <th>Strike</th> |
| <th>Expiry / DTE</th> |
| <th>Entry (Mid)</th> |
| <th>Max Profit</th> |
| <th>Max Loss</th> |
| <th>Confidence</th> |
| </tr> |
| </thead> |
| <tbody id="summary-body"> |
| <tr class="summary-loading"> |
| <td colspan="9" style="padding:18px 16px;color:var(--t3);font-style:italic;font-size:12px">β³ Loading live dataβ¦</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
|
|
| |
| <div class="cards-grid" id="cards-grid"></div> |
|
|
| </div> |
| <footer> |
| Options Intelligence Β· Powered by Claude AI + Live Web Search<br/> |
| <strong>β Not financial advice.</strong> Options trading involves substantial risk of loss. Always verify recommendations independently before placing any trade. |
| </footer> |
| </div> |
|
|
| <script> |
| 'use strict'; |
| |
| // ββ CONFIG ββββββββββββββββββββββββββββββββββββββββββββββββββ |
| const TICKERS = [ |
| {sym:'MSFT', name:'Microsoft Corporation'}, |
| {sym:'BMNR', name:'BitMine Immersion Technologies'}, |
| {sym:'IREN', name:'Iris Energy'}, |
| {sym:'CRCL', name:'Circle Internet Financial'}, |
| ]; |
| |
| // Strategy type β CSS class key |
| const TYPE_MAP = { |
| sell_put:'sp', sell_call:'sc', buy_call:'bc', buy_put:'bp', |
| straddle:'st', strangle:'sg', condor:'ic', |
| bull_spread:'bs', bear_spread:'ps', |
| }; |
| |
| let API_KEY = ''; |
| let running = false; |
| let results = {}; // sym β parsed data |
| |
| // ββ GATE βββββββββββββββββββββββββββββββββββββββββββββββββββββ |
| document.getElementById('gate-key').addEventListener('keydown', e => { if(e.key==='Enter') startApp(); }); |
| |
| function startApp(){ |
| const k = document.getElementById('gate-key').value.trim(); |
| const err = document.getElementById('gate-err'); |
| if(!k.startsWith('sk-ant-')){ err.textContent='β Key must start with sk-ant-'; err.style.display='block'; return; } |
| err.style.display='none'; |
| API_KEY = k; |
| document.getElementById('gate').style.display='none'; |
| document.getElementById('app').style.display='block'; |
| document.getElementById('btn-refresh').disabled=false; |
| initCards(); |
| refreshAll(); |
| } |
| |
| // ββ INIT CARDS ββββββββββββββββββββββββββββββββββββββββββββββββ |
| function initCards(){ |
| const grid = document.getElementById('cards-grid'); |
| grid.innerHTML=''; |
| TICKERS.forEach((t,i)=>{ |
| const d=document.createElement('div'); |
| d.className='tcard'; |
| d.id='card-'+t.sym; |
| d.style.animationDelay=(i*0.08)+'s'; |
| d.innerHTML=loadingHTML(t); |
| grid.appendChild(d); |
| }); |
| } |
| |
| function loadingHTML(t){ |
| return `<div class="tcard-hdr"><div><div class="tcard-ticker">${t.sym}</div><div class="tcard-name">${t.name}</div></div></div> |
| <div class="card-loading"><div class="ld-spinner"></div><div class="ld-text">Searching live dataβ¦</div> |
| <div class="ld-steps">Fetching price & options chain<br>Calculating IV Rank & Greeks<br>Generating AI recommendation</div></div>`; |
| } |
| |
| // ββ REFRESH ALL βββββββββββββββββββββββββββββββββββββββββββββββ |
| async function refreshAll(){ |
| if(running) return; |
| running=true; |
| results={}; |
| const btn=document.getElementById('btn-refresh'); |
| const ico=document.getElementById('ref-icon'); |
| btn.disabled=true; ico.classList.add('spin'); |
| document.getElementById('summary-body').innerHTML= |
| '<tr><td colspan="9" style="padding:18px 16px;color:var(--t3);font-style:italic;font-size:12px">β³ Loadingβ¦</td></tr>'; |
| |
| // Reset cards |
| TICKERS.forEach(t=>{ document.getElementById('card-'+t.sym).innerHTML=loadingHTML(t); }); |
| |
| // Run all in parallel |
| await Promise.allSettled(TICKERS.map(t=>fetchAndRender(t))); |
| |
| // Rebuild summary after all done |
| buildSummary(); |
| |
| const now=new Date(); |
| const ts=now.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit'}); |
| document.getElementById('hdr-time').textContent='Updated '+ts; |
| document.getElementById('summary-ts').textContent='Last updated '+ts; |
| |
| ico.classList.remove('spin'); |
| btn.disabled=false; |
| running=false; |
| } |
| |
| // ββ FETCH + RENDER ONE TICKER βββββββββββββββββββββββββββββββββ |
| async function fetchAndRender(ticker){ |
| try{ |
| const d=await callClaude(ticker); |
| results[ticker.sym]=d; |
| renderCard(ticker,d); |
| }catch(e){ |
| renderError(ticker,e.message); |
| } |
| } |
| |
| // ββ CLAUDE API ββββββββββββββββββββββββββββββββββββββββββββββββ |
| async function callClaude(ticker){ |
| const today=new Date().toISOString().split('T')[0]; |
| const dow=new Date().toLocaleDateString('en-US',{weekday:'long'}); |
| |
| const resp=await fetch('https://api.anthropic.com/v1/messages',{ |
| method:'POST', |
| headers:{ |
| 'Content-Type':'application/json', |
| 'x-api-key':API_KEY, |
| 'anthropic-version':'2023-06-01', |
| 'anthropic-dangerous-direct-browser-access':'true', |
| }, |
| body:JSON.stringify({ |
| model:'claude-sonnet-4-20250514', |
| max_tokens:1800, |
| tools:[{type:'web_search_20250305',name:'web_search'}], |
| system:`You are a senior options trader and quantitative analyst. Today is ${dow} ${today}. |
| Your job: Search for LIVE current data on the given stock ticker, then produce a precise options recommendation as JSON. |
| RULES: |
| 1. Always search the web first β never use stale training data for prices or IV |
| 2. Search for: current stock price, today's % change, options IV, recent news/catalysts, upcoming earnings, current VIX |
| 3. After gathering data, return ONLY valid JSON matching the exact schema. No markdown fences, no prose outside the JSON. |
| 4. Include the actual source name (e.g. "Reuters", "Yahoo Finance", "Bloomberg") for any news cited.`, |
| messages:[{role:'user',content:buildPrompt(ticker,today)}], |
| }), |
| }); |
| |
| if(!resp.ok){ |
| const e=await resp.json().catch(()=>({})); |
| throw new Error((e.error&&e.error.message)||'API error '+resp.status); |
| } |
| |
| const data=await resp.json(); |
| // Extract text blocks (web search tool may produce mixed content blocks) |
| const text=(data.content||[]).filter(b=>b.type==='text').map(b=>b.text).join(''); |
| |
| // Robust JSON extraction |
| let js=text; |
| const fm=js.match(/```(?:json)?\s*([\s\S]*?)```/); |
| if(fm) js=fm[1]; |
| const a=js.indexOf('{'), b=js.lastIndexOf('}'); |
| if(a!==-1&&b!==-1) js=js.slice(a,b+1); |
| |
| try{ return JSON.parse(js); } |
| catch(e){ throw new Error('Could not parse AI response β try refreshing.'); } |
| } |
| |
| // ββ PROMPT ββββββββββββββββββββββββββββββββββββββββββββββββββββ |
| function buildPrompt(ticker,today){ |
| return `Analyse ticker: ${ticker.sym} (${ticker.name}). Today: ${today}. |
| |
| STEP 1 β Search the web for: |
| β’ Current price and today's % change for ${ticker.sym} |
| β’ Current implied volatility (IV) and options chain activity |
| β’ Most recent news or catalyst (past 7 days) β note the SOURCE |
| β’ Next earnings date for ${ticker.sym} |
| β’ Current VIX level and US 3-month T-bill yield |
| |
| STEP 2 β Respond with ONLY this exact JSON (no other text): |
| |
| { |
| "ticker": "${ticker.sym}", |
| "company": "${ticker.name}", |
| "price": <number>, |
| "price_change_pct": <number e.g. 1.23>, |
| "price_trend": "<BULLISH|BEARISH|NEUTRAL>", |
| "vix": <number>, |
| "risk_free_rate": <number e.g. 4.8>, |
| "iv_estimate": <number e.g. 42.0>, |
| "iv_rank": <number 0-100>, |
| "iv_regime": "<HIGH_SELL_PREMIUM|LOW_BUY_OPTIONS|NEUTRAL>", |
| "hv_30d": <number>, |
| "rsi_estimate": <number>, |
| "sma20": <number>, |
| "sma50": <number>, |
| "earnings_date": "<YYYY-MM-DD or Unknown>", |
| "days_to_earnings": <number or null>, |
| "has_liquid_options": <true|false>, |
| "options_note": "<one line on liquidity>", |
| "news_headline": "<most important recent news headline in one sentence>", |
| "news_source": "<source name e.g. Reuters, Yahoo Finance, Bloomberg, SEC filing>", |
| "news_date": "<YYYY-MM-DD or approximate>", |
| "news_impact": "<BULLISH|BEARISH|NEUTRAL β how this news affects the options strategy>", |
| "data_quality": "<LIVE|ESTIMATED>", |
| |
| "top_strategy": { |
| "name": "<Sell Put|Sell Covered Call|Buy Call|Buy Put|Buy Straddle|Buy Strangle|Iron Condor|Bull Call Spread|Bear Put Spread>", |
| "type_class": "<sell_put|sell_call|buy_call|buy_put|straddle|strangle|condor|bull_spread|bear_spread>", |
| "direction": "<Bullish|Bearish|Neutral|Non-Directional>", |
| "confidence": "<HIGH|MEDIUM|LOW>", |
| "strike": "<e.g. $415>", |
| "expiry": "<e.g. Apr 17 2025>", |
| "dte": "<e.g. 42 DTE>", |
| "entry_mid": "<e.g. $3.20>", |
| "max_profit": "<e.g. $320 per contract>", |
| "max_loss": "<e.g. $680 per contract>", |
| "breakeven": "<e.g. $411.80 or Up: $420 / Down: $400>", |
| "delta": "<e.g. -0.28>", |
| "gamma": "<e.g. 0.012>", |
| "theta": "<e.g. -$0.09/day>", |
| "vega": "<e.g. $0.18 per 1pt IV>", |
| "technical_rationale": "<2-3 sentences: the professional analysis using IV rank, trend, Greeks, VIX>", |
| "plain_english": "<3-4 sentences in simple language explaining what this trade is, why it makes sense right now, and what outcome you are expecting. Avoid jargon. Write as if explaining to a smart friend who does not trade options.>", |
| "risk_scenario": "<one specific event that immediately kills this trade>", |
| "pass_if": "<two specific conditions under which you skip this trade today>" |
| }, |
| |
| "alternative_strategy": { |
| "name": "<strategy name>", |
| "type_class": "<type class>", |
| "direction": "<direction>", |
| "strike": "<strike>", |
| "expiry": "<expiry>", |
| "entry_mid": "<mid price>", |
| "rationale": "<2 sentences: why this is the second best option>" |
| }, |
| |
| "strategy_scores": [ |
| {"name":"Sell Put","score":<0-100>}, |
| {"name":"Sell Call","score":<0-100>}, |
| {"name":"Buy Call","score":<0-100>}, |
| {"name":"Buy Put","score":<0-100>}, |
| {"name":"Buy Straddle","score":<0-100>}, |
| {"name":"Iron Condor","score":<0-100>}, |
| {"name":"Bull Spread","score":<0-100>}, |
| {"name":"Bear Spread","score":<0-100>} |
| ] |
| } |
| |
| If ${ticker.sym} has no liquid options (very small cap / newly listed), set has_liquid_options:false and adjust top_strategy to an equity-level recommendation. Always include your news source.`; |
| } |
| |
| // ββ BUILD SUMMARY TABLE βββββββββββββββββββββββββββββββββββββββ |
| function buildSummary(){ |
| const tbody=document.getElementById('summary-body'); |
| if(!Object.keys(results).length){ tbody.innerHTML='<tr><td colspan="9" style="padding:16px;color:var(--t3);font-size:12px">No results yet.</td></tr>'; return; } |
| tbody.innerHTML=''; |
| TICKERS.forEach(t=>{ |
| const d=results[t.sym]; |
| if(!d){ |
| const tr=document.createElement('tr'); |
| tr.innerHTML=`<td class="sticker">${t.sym}</td><td colspan="8" style="color:var(--t3);font-size:12px;font-style:italic">Failed to load</td>`; |
| tbody.appendChild(tr); |
| return; |
| } |
| const ts=d.top_strategy||{}; |
| const tc=TYPE_MAP[ts.type_class]||'df'; |
| const chgSign=d.price_change_pct>=0?'+':''; |
| const chgCls=d.price_change_pct>0?'up':d.price_change_pct<0?'dn':'fl'; |
| const confCls=ts.confidence==='HIGH'?'conf-high':ts.confidence==='MEDIUM'?'conf-med':'conf-low'; |
| const tr=document.createElement('tr'); |
| tr.innerHTML=` |
| <td><span class="sticker">${t.sym}</span><br><span style="font-size:10px;color:var(--t3)">${t.name}</span></td> |
| <td><span class="sprice">$${fmt(d.price)}</span><span class="schg ${chgCls}">${chgSign}${fmt(d.price_change_pct)}%</span></td> |
| <td><span class="strategy-pill b-${tc}">${ts.name||'β'}</span></td> |
| <td><span class="mono">${ts.strike||'β'}</span></td> |
| <td><span class="mono" style="font-size:11px">${ts.expiry||'β'}<br><span style="color:var(--t3)">${ts.dte||''}</span></span></td> |
| <td><span class="mono">${ts.entry_mid||'β'}</span></td> |
| <td style="color:var(--green);font-weight:600;font-size:12px">${ts.max_profit||'β'}</td> |
| <td style="color:var(--red);font-weight:600;font-size:12px">${ts.max_loss||'β'}</td> |
| <td><span class="conf-badge ${confCls}">${ts.confidence||'β'}</span></td>`; |
| tbody.appendChild(tr); |
| }); |
| } |
| |
| // ββ RENDER CARD βββββββββββββββββββββββββββββββββββββββββββββββ |
| function renderCard(ticker,d){ |
| const card=document.getElementById('card-'+ticker.sym); |
| if(!card) return; |
| |
| // Update VIX in header once |
| if(d.vix && document.getElementById('hdr-vix').style.display==='none'||!document.getElementById('hdr-vix').textContent){ |
| const vixEl=document.getElementById('hdr-vix'); |
| vixEl.textContent=`VIX ${fmt(d.vix)}`; |
| vixEl.style.display='block'; |
| } |
| |
| const ts=d.top_strategy||{}; |
| const alt=d.alternative_strategy||{}; |
| const tc=TYPE_MAP[ts.type_class]||'df'; |
| const altc=TYPE_MAP[alt.type_class]||'df'; |
| const chgSign=d.price_change_pct>=0?'+':''; |
| const chgCls=d.price_change_pct>0?'up':d.price_change_pct<0?'dn':'fl'; |
| const ivFill=Math.min(100,d.iv_rank||0); |
| const ivColor=d.iv_rank>60?'var(--red)':d.iv_rank<35?'var(--green)':'var(--amber)'; |
| const regClass=d.iv_regime==='HIGH_SELL_PREMIUM'?'rt-sell':d.iv_regime==='LOW_BUY_OPTIONS'?'rt-buy':'rt-neutral'; |
| const regLabel=d.iv_regime==='HIGH_SELL_PREMIUM'?'Sell Premium β':d.iv_regime==='LOW_BUY_OPTIONS'?'Buy Options β':'Neutral IV'; |
| const trendColor=d.price_trend==='BULLISH'?'var(--green)':d.price_trend==='BEARISH'?'var(--red)':'var(--amber)'; |
| const dq=d.data_quality||''; |
| const dqPill=dq.includes('LIVE')? |
| `<span style="font-size:10px;padding:2px 7px;border-radius:4px;background:var(--green-m);color:var(--green);font-weight:700">β LIVE</span>`: |
| `<span style="font-size:10px;padding:2px 7px;border-radius:4px;background:var(--amber-m);color:var(--amber);font-weight:700">β EST</span>`; |
| const confCls=ts.confidence==='HIGH'?'conf-high':ts.confidence==='MEDIUM'?'conf-med':'conf-low'; |
| const scores=(d.strategy_scores||[]).sort((a,b)=>b.score-a.score); |
| const newsImpactColor=d.news_impact==='BULLISH'?'var(--green)':d.news_impact==='BEARISH'?'var(--red)':'var(--t3)'; |
| |
| card.innerHTML=` |
| |
| <div class="tcard-hdr"> |
| <div> |
| <div class="tcard-ticker">${d.ticker} ${dqPill}</div> |
| <div class="tcard-name">${d.company}</div> |
| </div> |
| <div class="tcard-price"> |
| <div class="price-big">$${fmt(d.price)}</div> |
| <div class="price-chg ${chgCls}">${chgSign}${fmt(d.price_change_pct)}%</div> |
| </div> |
| </div> |
| |
| |
| <div class="stats-band"> |
| <div class="sc"> |
| <div class="sc-l">Trend</div> |
| <div class="sc-v" style="color:${trendColor}">${d.price_trend||'β'}</div> |
| <div class="sc-s">RSI ${fmt(d.rsi_estimate,0)}</div> |
| </div> |
| <div class="sc"> |
| <div class="sc-l">ATM IV</div> |
| <div class="sc-v">${fmt(d.iv_estimate)}%</div> |
| <div class="sc-s">HV30 ${fmt(d.hv_30d)}%</div> |
| </div> |
| <div class="sc"> |
| <div class="sc-l">Earnings</div> |
| <div class="sc-v" style="font-size:12px">${d.earnings_date&&d.earnings_date!=='Unknown'?d.earnings_date:'β'}</div> |
| <div class="sc-s">${d.days_to_earnings?d.days_to_earnings+'d away':''}</div> |
| </div> |
| <div class="sc"> |
| <div class="sc-l">Options</div> |
| <div class="sc-v" style="font-size:12px;color:${d.has_liquid_options?'var(--green)':'var(--red)'}"> |
| ${d.has_liquid_options?'β Liquid':'β Thin'} |
| </div> |
| <div class="sc-s" style="font-size:9px">${(d.options_note||'').substring(0,28)}</div> |
| </div> |
| </div> |
| |
| |
| <div class="iv-bar-wrap"> |
| <div class="iv-bar-row"> |
| <span class="iv-bar-lbl">IV Rank: <strong>${fmt(d.iv_rank,0)}</strong> / 100</span> |
| <span class="iv-regime-tag ${regClass}">${regLabel}</span> |
| </div> |
| <div class="iv-track"><div class="iv-fill" style="width:${ivFill}%;background:${ivColor}"></div></div> |
| </div> |
| |
| |
| ${d.news_headline?`<div class="news-row"> |
| <span class="news-tag" style="color:${newsImpactColor}">News</span> |
| <div> |
| <div class="news-text">${esc(d.news_headline)}</div> |
| <div class="news-src">π° Source: <strong>${esc(d.news_source||'Unknown')}</strong>${d.news_date?' Β· '+d.news_date:''} Β· Impact: <span style="color:${newsImpactColor};font-weight:600">${d.news_impact||'β'}</span></div> |
| </div> |
| </div>`:''} |
| |
| |
| <div class="rec-block"> |
| <div class="rec-block-title">β Top Recommendation</div> |
| |
| <div class="rec-banner s-${tc}"> |
| <div class="rec-top-row"> |
| <div> |
| <div class="rec-strat-name">${ts.name||'β'}</div> |
| <div class="rec-dir">${ts.direction||''}</div> |
| </div> |
| <div class="rec-conf"> |
| <span class="conf-badge ${confCls}">${ts.confidence||'β'}</span> |
| <div style="font-size:9px;color:var(--t3);margin-top:4px;text-align:right">confidence</div> |
| </div> |
| </div> |
| <div class="rec-strike-row"> |
| <div class="rec-chip"> |
| <span class="rec-chip-l">Strike</span> |
| <span class="rec-chip-v">${ts.strike||'β'}</span> |
| </div> |
| <div class="rec-chip"> |
| <span class="rec-chip-l">Expiry</span> |
| <span class="rec-chip-v" style="font-size:11px">${ts.expiry||'β'}</span> |
| </div> |
| <div class="rec-chip"> |
| <span class="rec-chip-l">DTE</span> |
| <span class="rec-chip-v">${ts.dte||'β'}</span> |
| </div> |
| <div class="rec-chip"> |
| <span class="rec-chip-l">Entry Mid</span> |
| <span class="rec-chip-v">${ts.entry_mid||'β'}</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="pnl-row"> |
| <div class="pnl-box"><div class="pnl-l">Max Profit</div><div class="pnl-v" style="color:var(--green)">${ts.max_profit||'β'}</div></div> |
| <div class="pnl-box"><div class="pnl-l">Max Loss</div><div class="pnl-v" style="color:var(--red)">${ts.max_loss||'β'}</div></div> |
| <div class="pnl-box"><div class="pnl-l">Breakeven</div><div class="pnl-v" style="font-size:11px">${ts.breakeven||'β'}</div></div> |
| </div> |
| |
| |
| <div class="greeks-row"> |
| <div class="greek-box"><div class="greek-sym">Ξ</div><div class="greek-val">${ts.delta||'β'}</div><div class="greek-lbl">Delta</div></div> |
| <div class="greek-box"><div class="greek-sym">Ξ</div><div class="greek-val">${ts.gamma||'β'}</div><div class="greek-lbl">Gamma</div></div> |
| <div class="greek-box"><div class="greek-sym">ΞΈ</div><div class="greek-val">${ts.theta||'β'}</div><div class="greek-lbl">Theta/day</div></div> |
| <div class="greek-box"><div class="greek-sym">Ξ½</div><div class="greek-val">${ts.vega||'β'}</div><div class="greek-lbl">Vega/pt</div></div> |
| </div> |
| |
| |
| ${ts.technical_rationale?`<div style="font-size:12px;line-height:1.7;color:var(--t2);margin-bottom:0">${esc(ts.technical_rationale)}</div>`:''} |
| </div> |
| |
| |
| ${ts.plain_english?`<div class="plain-block"> |
| <div class="plain-title">π¬ In Plain English</div> |
| <div class="plain-text">${esc(ts.plain_english)}</div> |
| </div>`:''} |
| |
| |
| ${ts.risk_scenario?`<div class="risk-block"> |
| <div class="risk-tag">β Key Risk</div> |
| <div class="risk-text">${esc(ts.risk_scenario)}</div> |
| </div>`:''} |
| |
| |
| ${ts.pass_if?`<div class="pass-block"> |
| <div class="pass-tag">π« Skip this trade ifβ¦</div> |
| <div class="pass-text">${esc(ts.pass_if)}</div> |
| </div>`:''} |
| |
| |
| ${alt.name?`<div class="alt-block"> |
| <div class="alt-tag">π Alternative Trade</div> |
| <div class="alt-inner"> |
| <span class="strategy-pill b-${altc}" style="font-size:10px;flex-shrink:0">${alt.name}</span> |
| <div class="alt-text"><strong>${alt.strike||''} ${alt.expiry||''}</strong> Β· Mid ${alt.entry_mid||'β'}<br>${esc(alt.rationale||'')}</div> |
| </div> |
| </div>`:''} |
| |
| |
| <div class="scores-block"> |
| <div class="scores-title">All Strategy Scores</div> |
| ${scores.map(s=>{ |
| const sc=s.score||0; |
| const col=sc>=70?'var(--green)':sc>=50?'var(--blue)':sc>=35?'var(--amber)':'var(--border2)'; |
| return `<div class="score-row"> |
| <span class="score-nm">${s.name}</span> |
| <div class="score-tr"><div class="score-fi" style="width:${sc}%;background:${col}"></div></div> |
| <span class="score-n" style="color:${col}">${sc}</span> |
| </div>`; |
| }).join('')} |
| </div>`; |
| } |
| |
| // ββ RENDER ERROR ββββββββββββββββββββββββββββββββββββββββββββββ |
| function renderError(ticker,msg){ |
| const card=document.getElementById('card-'+ticker.sym); |
| if(!card) return; |
| card.innerHTML=` |
| <div class="tcard-hdr"><div><div class="tcard-ticker">${ticker.sym}</div><div class="tcard-name">${ticker.name}</div></div></div> |
| <div class="card-err"> |
| <div class="card-err-ico">β οΈ</div> |
| <div class="card-err-msg">${esc(msg)}</div> |
| <button class="btn-retry" onclick="retryOne('${ticker.sym}')">β© Retry ${ticker.sym}</button> |
| </div>`; |
| } |
| |
| async function retryOne(sym){ |
| const t=TICKERS.find(x=>x.sym===sym); |
| if(!t) return; |
| document.getElementById('card-'+sym).innerHTML=loadingHTML(t); |
| await fetchAndRender(t); |
| buildSummary(); |
| } |
| |
| // ββ HELPERS βββββββββββββββββββββββββββββββββββββββββββββββββββ |
| function fmt(n,dec=2){ |
| if(n===null||n===undefined||n==='') return 'β'; |
| const x=parseFloat(n); |
| return isNaN(x)?String(n):x.toFixed(dec); |
| } |
| function esc(s){ |
| return (s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); |
| } |
| </script> |
| </body> |
| </html> |
|
|
