<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',system-ui,sans-serif; }
body { background:#0a1420; padding:24px; width:660px; }
.card {
background:linear-gradient(160deg,#0f1e2e 0%,#0c1826 100%);
border:1px solid rgba(52,211,153,.18);
border-radius:20px; padding:22px 20px;
box-shadow:0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
/* header */
.hd { display:flex; align-items:center; gap:14px; }
.ava { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#34d399,#059669);
display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 4px 14px rgba(52,211,153,.35); }
.nm { font-size:21px; font-weight:700; color:#eaf6ef; }
.addr { font-size:12px; color:#5f7488; font-family:monospace; margin-top:2px; }
.badge { margin-left:auto; background:rgba(52,211,153,.14); color:#34d399; font-size:11px;
font-weight:700; padding:5px 11px; border-radius:20px; border:1px solid rgba(52,211,153,.3); }
.tags { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.tag { font-size:11px; font-weight:600; color:#a9c0d4; background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07); padding:4px 10px; border-radius:8px; }
.sub { font-size:12px; color:#6b7f92; margin:18px 2px 8px; text-transform:uppercase; letter-spacing:.6px;
display:flex; align-items:center; gap:7px; }
.sub .nn { font-size:9px; font-weight:700; color:#34d399; background:rgba(52,211,153,.12);
padding:1px 6px; border-radius:5px; letter-spacing:.3px; }
.sub .old { color:#6b7f92; background:rgba(255,255,255,.05); }
/* stat grids */
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
border-radius:12px; padding:11px 8px; text-align:center; }
.stat .lbl { font-size:10px; color:#6b7f92; text-transform:uppercase; letter-spacing:.4px; }
.stat .val { font-size:18px; font-weight:700; margin-top:4px; color:#eaf6ef; }
.pos { color:#34d399; } .neg { color:#f87171; }
/* price-band table */
.tbl { width:100%; border-collapse:collapse; margin-top:4px; }
.tbl th { font-size:10px; color:#6b7f92; text-transform:uppercase; letter-spacing:.4px;
text-align:right; padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.06); }
.tbl th:first-child { text-align:left; }
.tbl td { font-size:13px; padding:9px 8px; text-align:right; color:#c9d6e0;
border-bottom:1px solid rgba(255,255,255,.04); }
.tbl td:first-child { text-align:left; font-weight:600; color:#eaf6ef; }
.tbl tr.best td:first-child { color:#34d399; }
.tbl tr.best { background:rgba(52,211,153,.06); }
.chip { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; margin-left:6px; }
.chip.edge { background:rgba(52,211,153,.16); color:#34d399; }
.chip.avoid { background:rgba(248,113,113,.14); color:#f87171; }
/* equity chart */
.equity { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
border-radius:12px; padding:12px 10px 6px; }
.eqmeta { display:flex; justify-content:space-between; align-items:center; padding:2px 6px 0; }
.eqval { font-size:16px; font-weight:700; color:#34d399; }
.eqcap { font-size:10px; color:#6b7f92; }
/* markets + trades */
.row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
border-radius:10px; margin-bottom:6px; }
.row .q { font-size:13px; color:#dbe7f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
.row .meta { font-size:11px; color:#6b7f92; display:flex; gap:12px; white-space:nowrap; }
.row .vol { color:#a9c0d4; font-weight:600; }
.tbuy { color:#34d399; font-weight:700; font-size:11px; }
.tsell { color:#f87171; font-weight:700; font-size:11px; }
.tout { font-size:11px; color:#8fa6ba; }
.twin { color:#34d399; font-weight:700; font-size:11px; }
.tloss { color:#f87171; font-weight:700; font-size:11px; }
.topen { color:#e5b95c; font-weight:600; font-size:11px; }
.tleft { display:flex; align-items:center; gap:8px; overflow:hidden; }
.tright { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.tamt { font-size:12px; color:#c9d6e0; font-weight:600; }
.tprice { font-size:11px; color:#6b7f92; }
/* current settings */
.settings { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.set { background:rgba(52,211,153,.05); border:1px solid rgba(52,211,153,.15);
border-radius:12px; padding:10px; }
.set .lbl { font-size:10px; color:#6b7f92; text-transform:uppercase; }
.set .val { font-size:16px; font-weight:700; color:#34d399; margin-top:3px; }
.set .hint { font-size:10px; color:#7f9257; margin-top:2px; }
.rec { margin-top:14px; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.22);
border-radius:12px; padding:12px 14px; font-size:12.5px; color:#bfe8d3; line-height:1.5; }
.rec b { color:#34d399; }
.bar { height:5px; border-radius:3px; background:rgba(255,255,255,.07); margin-top:8px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:3px; }
</style>
</head>
<body>
<div class="card">
<!-- header -->
<div class="hd">
<div class="ava">🐋</div>
<div>
<div class="nm">Steady Orca</div>
<div class="addr">0x0346af…c21b</div>
</div>
<div class="badge">● Активен</div>
</div>
<div class="tags">
<span class="tag">🏛️ Politics</span>
<span class="tag">🎯 Дешёвые входы</span>
<span class="tag">📅 Средний горизонт</span>
</div>
<!-- overall -->
<div class="sub">Общая стата</div>
<div class="grid4">
<div class="stat"><div class="lbl">ROI</div><div class="val pos">+18.4%</div></div>
<div class="stat"><div class="lbl">Win Rate</div><div class="val">46% <span style="font-size:10px;color:#6b7f92">·82 res.</span></div></div>
<div class="stat"><div class="lbl">Копий</div><div class="val">63</div></div>
<div class="stat"><div class="lbl">P&L</div><div class="val pos">+$33.77</div></div>
</div>
<!-- volume / trades (from old card) -->
<div class="sub">Объём и сделки <span class="nn old">из старой</span></div>
<div class="grid4">
<div class="stat"><div class="lbl">Total Volume</div><div class="val">$142K</div></div>
<div class="stat"><div class="lbl">Сделок</div><div class="val">318</div></div>
<div class="stat"><div class="lbl">Ср. сделка</div><div class="val">$447</div></div>
<div class="stat"><div class="lbl">Самая большая</div><div class="val">$4.2K</div></div>
</div>
<!-- price band breakdown (NEW) -->
<div class="sub">Эффективность по цене входа <span class="nn">новое</span></div>
<table class="tbl">
<thead>
<tr><th>Диапазон</th><th>Сделок</th><th>WR</th><th>ROI</th><th>P&L</th></tr>
</thead>
<tbody>
<tr class="best"><td>≤ 0.40 <span class="chip edge">эдж</span></td><td>21</td><td>44%</td><td>+22.1%</td><td>+$19.40</td></tr>
<tr><td>0.40–0.60</td><td>27</td><td>48%</td><td>+11.3%</td><td>+$14.02</td></tr>
<tr><td>0.60–0.80</td><td>11</td><td>64%</td><td>−2.4%</td><td>−$1.90</td></tr>
<tr><td>≥ 0.80 <span class="chip avoid">избегать</span></td><td>4</td><td>75%</td><td>−13.0%</td><td>−$2.75</td></tr>
</tbody>
</table>
<!-- behaviour stats (NEW) -->
<div class="sub">Поведение кита <span class="nn">новое</span></div>
<div class="grid4">
<div class="stat"><div class="lbl">Ср. цена входа</div><div class="val">0.52¢</div></div>
<div class="stat"><div class="lbl">Сделок / событие</div><div class="val">1.8</div></div>
<div class="stat"><div class="lbl">Ср. холд</div><div class="val">3.1д</div></div>
<div class="stat"><div class="lbl">Дней активен</div><div class="val">58</div></div>
</div>
<!-- P&L chart (from old card) -->
<div class="sub">Динамика P&L <span class="nn old">из старой</span></div>
<div class="equity">
<svg viewBox="0 0 620 150" style="width:100%;height:auto;display:block">
<line x1="48" y1="20" x2="610" y2="20" stroke="#22303f" stroke-dasharray="3 3" opacity=".5"/>
<line x1="48" y1="88" x2="610" y2="88" stroke="#3a4c5c" opacity=".85"/>
<line x1="48" y1="128" x2="610" y2="128" stroke="#22303f" stroke-dasharray="3 3" opacity=".5"/>
<text x="42" y="24" text-anchor="end" font-size="9" fill="#6b7f92">+$38</text>
<text x="42" y="91" text-anchor="end" font-size="9" fill="#6b7f92">$0</text>
<text x="42" y="131" text-anchor="end" font-size="9" fill="#6b7f92">−$12</text>
<path d="M48,110 L120,96 L190,102 L260,72 L330,66 L400,44 L470,52 L540,30 L610,34"
fill="#16a34a" opacity="0.09"
transform="translate(0,0)" />
<path d="M48,110 L120,96 L190,102 L260,72 L330,66 L400,44 L470,52 L540,30 L610,34 L610,88 L48,88 Z"
fill="#16a34a" opacity="0.09"/>
<path d="M48,110 L120,96 L190,102 L260,72 L330,66 L400,44 L470,52 L540,30 L610,34"
fill="none" stroke="#34d399" stroke-width="2" stroke-linejoin="round"/>
<text x="48" y="146" text-anchor="start" font-size="9" fill="#6b7f92">May 5</text>
<text x="329" y="146" text-anchor="middle" font-size="9" fill="#6b7f92">Jun 3</text>
<text x="610" y="146" text-anchor="end" font-size="9" fill="#6b7f92">Jul 1</text>
</svg>
<div class="eqmeta">
<span class="eqval">+$33.77</span>
<span class="eqcap">по 82 резолвнутым</span>
</div>
</div>
<!-- top markets (from old card) -->
<div class="sub">Топ рынки <span class="nn old">из старой</span></div>
<div class="row"><div class="q">Will Trump win the 2024 election?</div><div class="meta"><span>12 trades</span><span class="vol">$18.4K</span></div></div>
<div class="row"><div class="q">Fed rate cut in September?</div><div class="meta"><span>8 trades</span><span class="vol">$9.1K</span></div></div>
<div class="row"><div class="q">Bitcoin above $100k by 2025?</div><div class="meta"><span>5 trades</span><span class="vol">$6.7K</span></div></div>
<!-- recent trades (from old card) -->
<div class="sub">Последние сделки <span class="nn old">из старой</span></div>
<div class="row">
<div class="tleft"><span class="tbuy">BUY</span><span class="tout">Yes</span><span class="q">Fed rate cut in September?</span></div>
<div class="tright"><span class="twin">🟢 +$210 · +47%</span><span class="tamt">$447</span><span class="tprice">вход 38¢</span></div>
</div>
<div class="row">
<div class="tleft"><span class="tbuy">BUY</span><span class="tout">No</span><span class="q">Bitcoin above $100k?</span></div>
<div class="tright"><span class="topen">в игре</span><span class="tamt">$620</span><span class="tprice">вход 52¢</span></div>
</div>
<div class="row">
<div class="tleft"><span class="tsell">SELL</span><span class="tout">Yes</span><span class="q">Will Trump win 2024?</span></div>
<div class="tright"><span class="tloss">🔴 −$95 · −100%</span><span class="tamt">$210</span><span class="tprice">вход 71¢</span></div>
</div>
<!-- current copy settings (NEW) -->
<div class="sub">Текущие настройки копирования <span class="nn">новое</span></div>
<div class="settings">
<div class="set"><div class="lbl">Ценовой бэнд</div><div class="val">0.05–0.60</div><div class="hint">✓ ловит эдж-зону</div></div>
<div class="set"><div class="lbl">Позиций на кита</div><div class="val">2</div><div class="hint">потолок открытых</div></div>
<div class="set"><div class="lbl">Позиций / событие</div><div class="val">3</div><div class="hint">спред по исходам</div></div>
</div>
<!-- recommendation (NEW) -->
<div class="rec">
💡 <b>Рекомендация:</b> кит зарабатывает на дешёвых входах (≤0.40 → ROI +22%),
но теряет на фаворитах (≥0.80 → −13%). Текущий priceMax <b>0.60</b> уже режет убыточную зону —
настройки оптимальны. Можно сузить до <b>0.50</b>, чтобы ещё плотнее сидеть в эдже.
<div class="bar"><span style="width:76%;background:linear-gradient(90deg,#34d399,#059669)"></span></div>
</div>
</div>
</body>
</html>