PageSourceSearch

https://hypr.run/demo

html hypr.run collected 2026-10-05 23:19:55 UTC 27,078 bytes, 391 lines download raw bytes

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 &amp; Strategies</a>
175    <a class="dmenu-item" href="/webhooks?from=demo">Webhooks &amp; 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()">&times;</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">&middot;</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 &amp; 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.