1<!DOCTYPE html><html><head> 2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="format-detection" content="telephone=no,date=no,address=no,email=no"> 3<meta name="apple-mobile-web-app-capable" content="yes"> 4<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 5<meta name="theme-color" content="#111111"><meta name="color-scheme" content="dark light"> 6<title>hypr.run - Demo</title> 7<link rel="canonical" href="https://hypr.run/demo"> 8<meta name="description" content="Test drive the hypr trading dashboard with demo accounts: quick-tap perps, the 3-phase engine, spot stop losses, and webhook automation - no signup.">
9<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
9 10<meta property="og:title" content="hypr()"><meta property="og:description" content="Trade. Automate. Live your life."><meta property="og:image" content="https://hypr.run/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://hypr.run/og-image.png"><link rel="icon" href="/favicon.ico?v=3" sizes="any"><link rel="icon" href="/icon.svg?v=3" type="image/svg+xml"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3"><link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3">
vendor: 63 bytes, line 10
10<script async src="https://www.googletagmanager.com/gtag/js?id=
10AW-18082618206
vendor: 11 bytes, line 10
10"></script>
10<script>
vendor: 118 bytes, line 10
10window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());gtag("config","
10AW-18082618206
vendor: 3 bytes, line 10
10");
10</script>
10<script> 11(function(){ 12var s=sessionStorage,k='_hs',rk='_hr',sid=s.getItem(k); 13if(!sid){sid=Math.random().toString(36).slice(2)+Math.random().toString(36).slice(2);s.setItem(k,sid)} 14var ref=new URLSearchParams(location.search).get('ref'); 15if(ref)s.setItem(rk,ref); 16var src=s.getItem(rk)||''; 17var d={path:location.pathname,referrer:document.referrer||'',screen:screen.width+'x'+screen.height,sid:sid,event:'pageview'}; 18if(src)d.src=src; 19navigator.sendBeacon('/api/track',new Blob([JSON.stringify(d)],{type:'application/json'})); 20window.hyprTrack=function(e,x){var p={path:location.pathname,sid:sid,event:e};if(src)p.src=src;if(x)p.referrer=x;navigator.sendBeacon('/api/track',new Blob([JSON.stringify(p)],{type:'application/json'}))}; 21})(); 22</script>
22<style> 23:root { --bg-body: #0a0a0a; 24 --bg-card: #1a1a1a; 25 --bg-hover: #252525; 26 --bg-input: #111111; 27 --text-primary: #ffffff; 28 --text-secondary: #c0c0c0; 29 --text-muted: #888888; 30 --text-disabled: #555555; 31 --accent-line: #00a8e8; 32 --accent-solid: #5bc0de; 33 --success: #22c55e; 34 --danger: #ff4757; 35 --warning: #f0ad4e; 36 --border: #333333; 37 --border-subtle: #222222; } 38*{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%} 39body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-body);color:var(--text-primary);font-weight:300;min-height:100vh;min-height:100dvh;padding:20px;overflow-x:hidden} 40button,input,select,textarea{font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none} 41.container{max-width:400px;margin:0 auto} 42h1{font-size:24px;font-weight:600;margin-bottom:8px;color:var(--text-primary)} 43p{color:var(--text-secondary);line-height:1.5;margin-bottom:16px} 44.w{color:var(--text-primary)} 45.card{background:var(--bg-card);border-radius:12px;padding:20px;margin-bottom:16px} 46label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:6px} 47input[type="text"],input[type="password"],input[type="number"]{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:14px;color:var(--text-primary);font-size:15px;margin-bottom:16px} 48input:focus{outline:none;border-color:var(--accent-line)} 49.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;margin-bottom:10px} 50.btn-primary{background:var(--accent-solid);color:#000} 51.btn-secondary{background:var(--bg-hover);color:var(--text-primary)} 52.btn-outline{background:transparent;border:1px solid #5bc0de;color:#5bc0de} 53.btn-danger{background:var(--danger);color:#fff} 54.btn:active{transform:scale(0.93);opacity:0.8} 55.btn svg{width:16px;height:16px} 56.webhook-box{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;margin-bottom:12px} 57.webhook-url{font-family:monospace;font-size:12px;color:var(--accent-line);word-break:break-all;flex:1} 58.copy-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px} 59.copy-btn svg{width:16px;height:16px} 60.hint{font-size:11px;color:var(--text-disabled);margin-top:-12px;margin-bottom:16px} 61.steps{display:flex;justify-content:center;gap:8px;margin-bottom:20px} 62.step{width:8px;height:8px;border-radius:50%;background:var(--border);position:relative} 63.step.active{background:var(--accent-line)} 64.step.done{background:var(--success)} 65.logo{text-align:center;margin-bottom:24px} 66.logo-main{font-size:32px;font-weight:700;letter-spacing:2px;font-family:'Courier New',Courier,monospace} 67.logo-sub{font-size:14px;color:var(--accent-line);margin-top:2px;font-family:'Courier New',Courier,monospace;letter-spacing:1px;font-weight:700} 68ol{padding-left:20px;margin-bottom:16px} 69ol li{color:var(--text-secondary);margin-bottom:8px;line-height:1.5} 70.success-icon{color:var(--success)} 71</style> 72<style> 73body{padding:0;max-width:800px;margin:0 auto;overflow-x:hidden;background:#000} 74.header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-subtle)} 75.header-left{display:flex;align-items:center;gap:10px} 76.menu-btn,.bell-btn{background:none;border:none;color:var(--text-muted);padding:4px;cursor:pointer;display:flex;align-items:center} 77.menu-btn svg{width:20px;height:20px} 78.bell-btn svg{width:18px;height:18px} 79.account-name{font-weight:600;font-size:15px;line-height:20px} 80.main{padding:20px} 81.pnl-section{margin-bottom:8px} 82.pnl-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;padding-top:4px} 83.pnl-value{font-size:24px;font-weight:700;color:#fff} 84.pnl-change{font-size:13px;margin-top:3px;opacity:1} 85.pnl-breakdown{font-size:12px;color:#bbb;margin-top:4px;letter-spacing:0.3px} 86.pnl-toggle{display:flex;gap:0;background:var(--bg-card);border-radius:6px;padding:2px} 87.pnl-toggle-btn{padding:6px 12px;font-size:12px;font-weight:600;color:#555;
87cursor:pointer;border-radius:5px;transition:all 0.15s} 88.pnl-toggle-btn.active{background:#333;color:#fff} 89.pnl-tabs{display:flex;gap:0;margin-bottom:12px;background:var(--bg-card);border-radius:8px;padding:2px} 90.pnl-tab{padding:4px 8px;font-size:11px;font-weight:600;color:#555;cursor:pointer;border-radius:4px;transition:all 0.15s} 91.pnl-tab.active{background:var(--accent-solid);color:#000} 92.pnl-chart{width:100%;height:250px;border-radius:8px;overflow:hidden;margin:8px 0} 93.pnl-stats{display:flex;gap:8px;margin-bottom:4px} 94.pnl-stat{flex:1;text-align:center} 95.pnl-stat-label{font-size:9px;color:#888;margin-bottom:1px;text-transform:uppercase;letter-spacing:0.5px} 96.pnl-stat-val{font-size:11px;font-weight:600;color:#bbb} 97.banner{display:flex;align-items:flex-start;padding:2px 0 2px 16px;margin:0 0 14px 0;border-left:3px solid #5bc0de;animation:bannerIn 0.3s ease-out} 98.banner-body{flex:1;min-width:0} 99.banner-text{font-size:14px;font-weight:300;color:#c0c0c0;line-height:1.5} 100.banner-text a{color:#5bc0de;text-decoration:none} 101.banner-x{background:none;border:none;color:#555;font-size:18px;cursor:pointer;padding:0 0 0 12px;line-height:1;flex-shrink:0} 102.banner-x:active{transform:scale(0.85);opacity:0.6} 103.banner.hiding{animation:bannerOut 0.25s ease-in forwards} 104@keyframes bannerIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}} 105@keyframes bannerOut{0%{opacity:1;max-height:60px;margin-bottom:12px}100%{opacity:0;max-height:0;margin-bottom:0;padding:0 16px;overflow:hidden}} 106.action-btns{display:flex;gap:10px;margin-top:20px} 107.action-btns .btn{flex:1} 108.act-section{margin-top:28px} 109.act-title{font-size:11px;color:#999;text-transform:uppercase;margin-bottom:12px;letter-spacing:1px;border-bottom:1px solid #333;padding-bottom:6px} 110.activity-row{padding:7px 2px;margin:0;background:transparent;border-radius:0;font-size:12px;line-height:1.4;word-break:break-word;display:flex;align-items:center;gap:8px} 111.activity-row .dot{width:6px;height:6px;min-width:6px;border-radius:50%;flex-shrink:0} 112.activity-row .dot.green{background:#22c55e} 113.activity-row .dot.red{background:#ff4757} 114.activity-row .dot.gray{background:#666} 115.activity-row .dot.blue{background:#5bc0de} 116.activity-row .dot.yellow{background:#f0ad4e} 117.activity-row .dot.white{background:#fff} 118.activity-row .act-text{flex:1;min-width:0;color:#c0c0c0} 119.activity-row .act-ts{color:#555;font-size:10px;flex-shrink:0;white-space:nowrap} 120.alert{padding:7px 2px;margin:0;background:transparent;border-radius:0;font-size:12px;display:flex;align-items:center;gap:8px} 121.alert .dot{width:6px;height:6px;min-width:6px;border-radius:50%;flex-shrink:0} 122.alert .dot.red{background:#ff4757} 123.alert .dot.yellow{background:#f0ad4e} 124.alert .dot.gray{background:#666} 125.alert .alert-text{flex:1;min-width:0;color:#c0c0c0} 126.alert .alert-ts{color:#555;font-size:10px;flex-shrink:0;white-space:nowrap} 127.alert .alert-src{font-size:9px;color:#555;font-weight:500;letter-spacing:0.5px;flex-shrink:0} 128.alerts-scroll{max-height:200px;overflow-y:auto;scrollbar-width:none} 129.alerts-scroll::-webkit-scrollbar{display:none} 130.menu-overlay2{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:100;display:none} 131.menu-overlay2.show{display:block} 132.dmenu{position:fixed;top:0;left:0;width:280px;height:100%;background:#0d0d0d;border-right:1px solid #1f1f1f;padding:20px;transform:translateX(-100%);transition:transform 0.25s ease} 133.menu-overlay2.show .dmenu{transform:translateX(0)} 134.dmenu-header{display:flex;justify-content:space-between;align-items:center;padding:8px 0;margin-bottom:2px} 135.dmenu-close{background:none;border:none;color:#888;cursor:pointer;font-size:24px} 136.dmenu-close:active{transform:scale(0.85);opacity:0.6} 137.dmenu-section{font-size:10px;color:#555;text-transform:uppercase;margin:20px 0 8px;letter-spacing:1px} 138.dmenu-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:8px;color:#aaa;text-decoration:none;font-size:14px} 139.dmenu-item svg{width:16px;height:16px} 140.dmenu-item:hover{background:#1a1a1a} 141.demo-banner{text-align:center;padding:8px;font-size:11px;color:#888;background:var(--bg-card);border-bottom:1px solid var(--border-subtle)} 142.demo-banner a{color:var(--accent-solid);text-decoration:none} 143.bell-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:#22c55e;border-radius:50%} 144.bell-btn{position:relative} 145.webhook-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 16px} 146.webhook-modal.show{display:flex} 147.webhook-content{background:#111;border-radius:12px;width:100%;max-width:400px;max-height:80vh;overflow-y:auto} 148.webhook-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-subtle)} 149.webhook-header h3{margin:0;font-size:16px;font-weight:600} 150.webhook-list{padding:8px 12px} 151.webhook-item{padding:10px;margin:6px 0;background:var(--bg-input);border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} 152.webhook-item .status{font-size:10px;font-weight:700;letter-spacing:0.5px;padding:2px 6px;border-radius:4px;flex-shrink:0} 153.webhook-item .time{margin-left:auto;color:#555;font-size:11px;flex-shrink:0} 154.webhook-item.success{border-left:3px solid #22c55e} 155.webhook-item.success .status{color:#22c55e} 156.webhook-item.fail{border-left:3px solid #ff4757} 157.webhook-item.fail .status{color:#ff4757} 158.webhook-item.skipped{border-left:3px solid #888} 159.webhook-item.skipped .status{color:#888} 160</style> 161</head><body> 162 163<div class="demo-banner">Pick up the phone, do your business, put it down.<br><a href="/setup/1" onclick="hyprTrack('click:demo-get-started')">Create an account</a> to go live.</div> 164<div class="menu-overlay2" id="demoMenuOverlay" onclick="closeDemoMenu()">
165 <div class="dmenu" onclick="event.stopPropagation()"> 166 <div class="dmenu-header"> 167 <div style="font-size:16px;font-weight:700;letter-spacing:1px;font-family:'Courier New',Courier,monospace;line-height:1"><a href="/" style="text-decoration:none;color:#fff">hypr<span style="color:#00a8e8">(</span><span style="color:#555">sys</span><span style="color:#00a8e8">, </span><span style="color:#555">dgn</span><span style="color:#00a8e8">, </span><span style="color:#555">ctl</span><span style="color:#00a8e8">)</span></a></div> 168 <button class="dmenu-close" onclick="closeDemoMenu()" style="display:flex;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button> 169 </div> 170 <div class="dmenu-section" style="display:flex;justify-content:space-between;align-items:center"><span>Accounts</span><span>Tokens</span></div> 171 <a class="dmenu-item" href="/token-economy">Demo<span style="margin-left:auto;color:#5bc0de;font-weight:600">376</span></a> 172 <a class="dmenu-item" href="/guide?from=demo">Setup Guide</a> 173 <a class="dmenu-item" href="/automated-trades?from=demo" style="padding-left:32px;font-size:13px">Automated Trades</a> 174 <a class="dmenu-item" href="/alerts-strategies?from=demo" style="padding-left:32px;font-size:13px">Alerts & Strategies</a> 175 <a class="dmenu-item" href="/webhooks?from=demo">Webhooks & Snippets</a> 176 <a class="dmenu-item" href="/security?from=demo">Security</a> 177 <a class="dmenu-item" href="/about?from=demo">About</a> 178 <a class="dmenu-item" href="/pulse">The Pulse - Live HL Stats</a> 179 <div class="dmenu-section">Get Started</div> 180 <a class="dmenu-item" href="/setup/1" style="color:#5bc0de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Create Account</a> 181 </div> 182</div> 183 184<div class="header"> 185 <div class="header-left"> 186 <button class="menu-btn" onclick="openDemoMenu()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button> 187 <span class="account-name">Demo</span> 188 </div> 189 <button class="bell-btn" onclick="showDemoWebhooks()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="bell-dot"></span></button> 190</div> 191 192<div class="webhook-modal" id="webhookModal" onclick="if(event.target===this)closeDemoWebhooks()"> 193 <div class="webhook-content"> 194 <div class="webhook-header"> 195 <h3>Notifications</h3> 196 <button onclick="closeDemoWebhooks()" style="background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button> 197 </div> 198 <div class="webhook-list"> 199 <div class="activity-row"><span class="dot green"></span><span class="act-text">LONG BTC $1,000 @ $70,860.00 SL -8.5%</span><span class="act-ts">14:32:05</span></div> 200 <div class="activity-row"><span class="dot green"></span><span class="act-text">hypr(SL) HYPE triggered @ $26.50</span><span class="act-ts">12:15:42</span></div> 201 <div class="activity-row"><span class="dot green"></span><span class="act-text">SHORT XRP $500 @ $2.42 SL -8.5%</span><span class="act-ts">09:30:18</span></div> 202 <div class="activity-row"><span class="dot green"></span><span class="act-text">CLOSE BTC @ $69,100.00 PnL +$240</span><span class="act-ts">08:45:33</span></div> 203 <div class="activity-row"><span class="dot red"></span><span class="act-text">LONG SOL $200 - insufficient balance</span><span class="act-ts">08:12:07</span></div> 204 <div class="activity-row"><span class="dot green"></span><span class="act-text">hypr(SL) BTC triggered @ $64,500.00</span><span class="act-ts">03:22:51</span></div> 205 <div class="activity-row"><span class="dot gray"></span><span class="act-text">LONG ETH $150 - already positioned</span><span class="act-ts">02:18:30</span></div> 206 </div> 207 </div> 208</div> 209 210<div class="main"> 211<div class="banner" id="appBanner" style="border-left-color:#5bc0de"><div class="banner-body"><span class="banner-text">Trade Review & Analysis live on accounts page, check it out. Perps have a toggle to pre-select Quick-Tap | Limit Price | Auto 3-Phase for true 2 tap entries. <a href="mailto:[email protected]" target="_blank" style="color:#5bc0de;text-decoration:none">Questions?</a></span></div><button class="banner-x" onclick="dismissDemoBanner()">×</button></div> 212<div class="pnl-section"> 213<div class="pnl-header"> 214 <div> 215 <div class="pnl-value" id="pnlValue">--</div> 216 <div class="pnl-change" id="pnlChange"></div> 217 <div class="pnl-breakdown"><span style="color:#888">Perps</span> <span style="color:#bbb">$4,801</span> <span style="color:#555">·</span> <span style="color:#888">Spot</span> <span style="color:#bbb">$65,281</span></div> 218 </div>
219 <div class="pnl-controls"> 220 <div class="pnl-toggle"> 221 <div class="pnl-toggle-btn active" onclick="setPnlMode('accountValue')">Value</div> 222 <div class="pnl-toggle-btn" onclick="setPnlMode('pnl')">PnL</div> 223 </div> 224 </div> 225</div> 226<div class="pnl-tabs"> 227 <div class="pnl-tab" onclick="setPnlPeriod('day')">24H</div> 228 <div class="pnl-tab active" onclick="setPnlPeriod('week')">7D</div> 229 <div class="pnl-tab" onclick="setPnlPeriod('month')">30D</div> 230 <div class="pnl-tab" onclick="setPnlPeriod('allTime')">ALL</div> 231</div> 232<div class="pnl-chart" id="pnlChart"></div> 233<div class="pnl-stats"> 234 <div class="pnl-stat"><div class="pnl-stat-label">Volume</div><div class="pnl-stat-val" id="statVol">--</div></div> 235 <div class="pnl-stat"><div class="pnl-stat-label">High</div><div class="pnl-stat-val" id="statHigh">--</div></div> 236 <div class="pnl-stat"><div class="pnl-stat-label">Low</div><div class="pnl-stat-val" id="statLow">--</div></div> 237</div> 238</div> 239 240 <div class="action-btns"> 241 <a href="/demo/dashboard" class="btn btn-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg> Trading Dashboard</a> 242 </div> 243 <a href="/trade-review-demo" class="btn btn-outline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg> Trade Review & Analysis</a> 244 245 <div class="act-section"> 246 <div class="act-title">Activity</div> 247 <div class="activity-row"><span class="dot green"></span><span class="act-text">Long BTC $150 @ $68,120 (5x) SL 8.5%</span><span class="act-ts">02-25 14:32</span></div> 248 <div class="activity-row"><span class="dot green"></span><span class="act-text">Bought ETH $150 @ $1,945</span><span class="act-ts">02-25 09:15</span></div> 249 <div class="activity-row"><span class="dot white"></span><span class="act-text">Sold SOL ALL @ $142.50</span><span class="act-ts">02-24 23:45</span></div> 250 <div class="activity-row"><span class="dot gray"></span><span class="act-text">Closed BTC @ $69,100</span><span class="act-ts">02-24 20:12</span></div> 251 <div class="activity-row"><span class="dot red"></span><span class="act-text">Short DOGE $50 @ $0.182 (3x)</span><span class="act-ts">02-24 09:30</span></div> 252 </div> 253 <div class="act-section"> 254 <div class="act-title">Alerts</div> 255 <div class="alerts-scroll"> 256 <div class="alert"><span class="alert-src">SPOT</span><span class="dot red"></span><span class="alert-text">FAIL SOL Insufficient balance</span><span class="alert-ts">02-15 22:10</span></div> 257 <div class="alert"><span class="alert-src">SPOT</span><span class="dot red"></span><span class="alert-text">FAIL HYPE No balance</span><span class="alert-ts">02-14 15:28</span></div> 258 <div class="alert"><span class="alert-src">SPOT</span><span class="dot gray"></span><span class="alert-text">SL SOL triggered @ $136.80</span><span class="alert-ts">02-15 23:45</span></div> 259 <div class="alert"><span class="alert-src">PERPS</span><span class="dot gray"></span><span class="alert-text">SL BTC triggered @ $63,500</span><span class="alert-ts">02-15 16:45</span></div> 260 <div class="alert"><span class="alert-src">PERPS</span><span class="dot red"></span><span class="alert-text">FAIL DOGE Insufficient margin</span><span class="alert-ts">02-14 09:28</span></div> 261 </div> 262 </div> 263</div> 264
265<script> 266const now = Math.floor(Date.now()/1000); 267const baseVal = 70082; 268 269function genData(hours, pointsPerHour) { 270 const data = []; 271 const total = hours * pointsPerHour; 272 let val = baseVal - 200; 273 let momentum = 0; 274 const seed = 73; 275 function rng(i) { let x = Math.sin(seed + i * 127.1) * 43758.5453; return x - Math.floor(x); } 276 for (let i = 0; i < total; i++) { 277 const t = now - (total - i) * Math.floor(3600 / pointsPerHour); 278 const r = rng(i) - 0.48; 279 momentum = momentum * 0.95 + r * 0.3; 280 val += momentum * 8; 281 if (rng(i * 3 + 7) < 0.02) val -= 8 + rng(i * 5) * 12; 282 val += 0.08; 283 data.push({time: t, value: val}); 284 } 285 return data; 286} 287 288const periods = { 289 day: genData(24, 4), 290 week: genData(168, 1), 291 month: genData(720, 0.25), 292 allTime: genData(2160, 0.08) 293}; 294 295// Generate PnL data (centered around zero) 296const pnlPeriods = {}; 297Object.keys(periods).forEach(k => { 298 const d = periods[k]; 299 const first = d[0].value; 300 pnlPeriods[k] = d.map(p => ({time: p.time, value: p.value - first})); 301}); 302 303let currentPeriod = 'week'; 304let currentMode = 'accountValue'; 305let chart = null; 306 307function setPnlPeriod(p) { 308 currentPeriod = p; 309 document.querySelectorAll('.pnl-tab').forEach(t => t.classList.remove('active')); 310 event.target.classList.add('active'); 311 renderDemo(); 312} 313 314function setPnlMode(m) { 315 currentMode = m; 316 document.querySelectorAll('.pnl-toggle-btn').forEach(t => t.classList.remove('active')); 317 event.target.classList.add('active'); 318 renderDemo(); 319} 320 321function renderDemo() { 322 const data = currentMode === 'pnl' ? pnlPeriods[currentPeriod] : periods[currentPeriod]; 323 if (!data || data.length === 0) return; 324 325 const lastVal = data[data.length-1].value; 326 const firstVal = data[0].value; 327 const pnlEl = document.getElementById('pnlValue'); 328 const changeEl = document.getElementById('pnlChange'); 329 330 if (currentMode === 'pnl') { 331 const sign = lastVal >= 0 ? '+' : ''; 332 pnlEl.textContent = sign + '$' + lastVal.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2}); 333 changeEl.textContent = ''; 334 } else { 335 pnlEl.textContent = '$' + lastVal.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2}); 336 const change = lastVal - firstVal; 337 const pct = firstVal !== 0 ? ((change / firstVal) * 100).toFixed(2) : '0.00'; 338 const sign = change >= 0 ? '+' : ''; 339 const color = change >= 0 ? '#22c55e' : '#ef4444'; 340 changeEl.innerHTML = '<span style="color:' + color + '">' + sign + '$' + Math.abs(change).toLocaleString(undefined,{maximumFractionDigits:2}) + ' (' + sign + pct + '%)</span>'; 341 } 342 343 const values = data.map(d => d.value); 344 document.getElementById('statHigh').textContent = '$' + Math.max(...values).toLocaleString(undefined, {maximumFractionDigits:2}); 345 document.getElementById('statLow').textContent = '$' + Math.min(...values).toLocaleString(undefined, {maximumFractionDigits:2}); 346 347 const vlms = {day: '1,840', week: '12,450', month: '48,200', allTime: '142,600'}; 348 document.getElementById('statVol').textContent = '$' + (vlms[currentPeriod] || '0'); 349 350 const container = document.getElementById('pnlChart'); 351 container.innerHTML = ''; 352
353 const isPositive = currentMode === 'pnl' ? lastVal >= 0 : lastVal >= firstVal; 354 const lineColor = isPositive ? 'rgba(91,192,222,0.85)' : 'rgba(255,255,255,0.75)'; 355 356 chart = LightweightCharts.createChart(container, { 357 width: container.clientWidth, 358 height: 250, 359 layout: { background: { type: 'solid', color: 'transparent' }, textColor: '#555', fontSize: 10 }, 360 grid: { vertLines: { visible: false }, horzLines: { color: '#1a1a1a' } }, 361 timeScale: { borderVisible: false, timeVisible: true, secondsVisible: false }, 362 rightPriceScale: { borderVisible: false }, 363 crosshair: { vertLine: { color: '#222', width: 1, style: 0, labelBackgroundColor: '#1a1a1a' }, horzLine: { color: '#222', width: 1, style: 0, labelBackgroundColor: '#5bc0de' } }, 364 handleScale: false, 365 handleScroll: false, 366 }); 367 368 const s = chart.addAreaSeries({ 369 lineColor: lineColor, 370 topColor: isPositive ? 'rgba(91,192,222,0.20)' : 'rgba(255,255,255,0.28)', 371 bottomColor: isPositive ? 'rgba(91,192,222,0.01)' : 'rgba(255,255,255,0.01)', 372 lineWidth: 2, 373 lastValueVisible: true, 374 priceLineColor: '#5bc0de', 375 priceFormat: { type: 'custom', formatter: (p) => '$' + p.toLocaleString(undefined, {maximumFractionDigits:2}) }, 376 }); 377 s.setData(data); 378 chart.timeScale().fitContent(); 379 new ResizeObserver(() => { chart.applyOptions({ width: container.clientWidth }); }).observe(container); 380} 381 382function openDemoMenu(){document.getElementById('demoMenuOverlay').classList.add('show')} 383function closeDemoMenu(){document.getElementById('demoMenuOverlay').classList.remove('show')} 384function showDemoWebhooks(){document.getElementById('webhookModal').classList.add('show');const d=document.querySelector('.bell-dot');if(d)d.remove()} 385function closeDemoWebhooks(){document.getElementById('webhookModal').classList.remove('show')} 386renderDemo(); 387var DEMO_BANNER_ID='4c4c776f8eda'; 388(function(){if(DEMO_BANNER_ID){try{if(localStorage.getItem('banner_'+DEMO_BANNER_ID)==='dismissed'){var b=document.getElementById('appBanner');if(b)b.style.display='none';}}catch(e){}} })(); 389function dismissDemoBanner(){var b=document.getElementById('appBanner');if(!b)return;b.classList.add('hiding');setTimeout(function(){b.style.display='none';},250);try{localStorage.setItem('banner_'+DEMO_BANNER_ID,'dismissed');}catch(e){}} 390</script>
390 391</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.