phase2-leaders-profile.html

<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',system-ui,sans-serif}
body{background:#0e0f13;padding:30px 26px 46px}
.h{color:#f3f4f6;font-size:22px;font-weight:800;margin-bottom:5px}
.sub{color:#7b8294;font-size:12.5px;margin-bottom:22px;max-width:1000px;line-height:1.55}
.wrap{display:flex;gap:34px;align-items:flex-start}
.mono{font-family:'JetBrains Mono',monospace}

.ph{width:332px;background:#0c1c22;border:9px solid #000;border-radius:42px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;height:732px}
.scr{flex:1;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 17px 12px;border-bottom:1px solid #11323a}
.bz{color:#eafff4;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.logo{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#22e06a,#0d8f55);display:flex;align-items:center;justify-content:center;font-size:13px}
.bal{background:#22e06a;color:#04221a;font-weight:800;font-size:12px;padding:7px 13px;border-radius:9px;font-family:'JetBrains Mono',monospace}
.pad{padding:13px 15px}
h2{color:#eafff4;font-size:20px;font-weight:800}
.ts{color:#5b8a82;font-size:11px;font-family:'JetBrains Mono',monospace}
.hrow{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.per{display:flex;gap:4px;background:#0f2730;border:1px solid #163740;border-radius:9px;padding:3px}
.per div{font-size:10px;font-weight:700;color:#6fa298;padding:5px 9px;border-radius:6px;font-family:'JetBrains Mono',monospace}
.per div.on{background:#22e06a;color:#04221a}
.seg{display:flex;gap:7px;margin-bottom:13px}
.seg div{font-size:10.5px;font-weight:700;color:#6fa298;background:#0f2730;border:1px solid #163740;padding:7px 12px;border-radius:8px;font-family:'JetBrains Mono',monospace}
.seg div.on{background:#22e06a;color:#04221a;border-color:#22e06a}
.card{background:#0f2730;border:1px solid #18404a;border-radius:15px;padding:13px;margin-bottom:10px}
.r{display:flex;align-items:center;gap:11px}
.av{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#22e06a,#0d8f55);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.nm{color:#eafff4;font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px}
.vf{font-size:8.5px;font-weight:700;background:rgba(34,224,106,.18);color:#22e06a;padding:1px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace}
.subln{display:flex;align-items:center;gap:7px;margin-top:3px}
.cat{font-size:8.5px;font-weight:700;color:#7fd9ff;background:rgba(127,217,255,.12);padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace}
.act{color:#5b8a82;font-size:10px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:5px}
.live{width:7px;height:7px;border-radius:50%;background:#22e06a;display:inline-block;box-shadow:0 0 0 3px rgba(34,224,106,.18)}
.spark{width:50px;height:26px;margin-left:auto}
.roi{text-align:right;width:62px}.roi b{color:#22e06a;font-weight:800;font-size:16px;font-family:'JetBrains Mono',monospace}.roi small{display:block;color:#5b8a82;font-size:8.5px}
.add{width:33px;height:33px;border-radius:9px;background:rgba(34,224,106,.15);border:1px solid #1f6b4d;color:#22e06a;font-size:18px;display:flex;align-items:center;justify-content:center;margin-left:8px;flex-shrink:0}
.metaline{display:flex;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid #163740;font-family:'JetBrains Mono',monospace}
.metaline span{color:#4f7972;font-size:9.5px}.metaline b{color:#cfeee4}
.metaline .pnl{color:#22e06a}.metaline .fire{color:#ffb347}.metaline .slot{color:#ff7a7a}
.nav{display:flex;background:#0c1c22;border-top:1px solid #11323a}
.nav div{flex:1;text-align:center;padding:10px 0 12px;font-size:10px;color:#477068}
.nav div.on{color:#22e06a}
.nic{font-size:18px;display:block;margin-bottom:3px}

/* ===== PROFILE screen ===== */
.pback{display:flex;align-items:center;gap:10px;padding:14px 16px 8px;color:#5b8a82;font-size:12px;font-family:'JetBrains Mono',monospace}
.phead{display:flex;align-items:center;gap:13px;padding:4px 16px 12px}
.bigav{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#22e06a,#0d8f55);display:flex;align-items:center;justify-content:center;font-size:26px}
.pname{color:#eafff4;font-weight:800;font-size:19px;display:flex;align-items:center;gap:7px}
.psub{display:flex;gap:6px;margin-top:5px}
.copybig{margin-left:auto;background:#22e06a;color:#04221a;border:none;font-weight:800;font-size:12px;padding:10px 15px;border-radius:10px}
.chart{margin:4px 16px 0;background:#0f2730;border:1px solid #18404a;border-radius:14px;padding:12px}
.chart .lbl{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chart .lbl b{color:#eafff4;font-size:12px}.chart .lbl .roi90{color:#22e06a;font-weight:800;font-family:'JetBrains Mono',monospace;font-size:15px}
.sect{color:#5b8a82;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:16px 16px 9px;font-family:'JetBrains Mono',monospace}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 16px}
.g{background:#0f2730;border:1px solid #18404a;border-radius:12px;padding:11px 10px}
.g .l{color:#4f7972;font-size:9px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.g .v{color:#eafff4;font-weight:800;font-size:16px;margin-top:3px;font-family:'JetBrains Mono',monospace}
.g .v.gr{color:#22e06a}.g .v.rd{color:#ff7a7a}
.honest{margin:10px 16px 0;background:rgba(34,224,106,.06);border:1px solid #1f6b4d;border-radius:12px;padding:12px}
.honest .ht{color:#22e06a;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.hrow2{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fd9cc;padding:3px 0}
.hrow2 b{color:#eafff4}
.cap{margin-top:14px;width:332px}.cn{color:#f3f4f6;font-size:15px;font-weight:700}
.cd{color:#7b8294;font-size:11.5px;margin-top:4px;line-height:1.55}
</style></head>
<body>
<div class="h">🐋 Поликопи — Фаза 2 (v7): «Лидеры» (хайп) + «Профиль кита» (безопасность)</div>
<div class="sub">По твоим решениям: на карточке — хайп (категория, онлайн, P&L $, сколько копируют, слоты) + 3 метрики + переключатель ROI 30/60/90. Вся безопасность (win-rate, DD, Sharpe, ср. удержание) и честность (реальная цена входа, лаг копии) — спрятаны в профиль кита. EDGE — главный сорт.</div>
<div class="wrap">

  <!-- LEADERS -->
  <div>
  <div class="ph">
    <div class="scr">
      <div class="top"><div class="bz"><span class="logo">🐋</span>Поликопи</div><div class="bal">$248.50</div></div>
      <div class="pad">
        <div class="hrow"><div><h2>Лидеры</h2><div class="ts">SMART MONEY · POLYMARKET</div></div>
          <div class="per"><div class="on">30D</div><div>60D</div><div>90D</div></div></div>
        <div class="seg"><div class="on">EDGE</div><div>ROI</div><div>Копируют</div><div>P&L</div></div>
        <div class="card">
          <div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="vf">EDGE 9.4</span></div><div class="subln"><span class="cat">POLITICS</span><span class="act"><span class="live"></span>4 мин назад</span></div></div><svg class="spark" viewBox="0 0 50 26"><polyline points="0,22 10,18 20,19 30,11 40,13 50,3" fill="none" stroke="#22e06a" stroke-width="2"/></svg><div class="roi"><b>+312%</b><small>ROI 30D</small></div><button class="add">+</button></div>
          <div class="metaline"><span>P&L <b class="pnl">+$38K</b></span><span>🔥 <b class="fire">847</b> копируют</span><span>⚡ <b class="slot">3</b> слота</span></div>
        </div>
        <div class="card">
          <div class="r"><div class="av">🐳</div><div><div class="nm">Leviathan <span class="vf">EDGE 8.1</span></div><div class="subln"><span class="cat">SPORTS</span><span class="act"><span class="live"></span>12 мин назад</span></div></div><svg class="spark" viewBox="0 0 50 26"><polyline points="0,19 10,20 20,13 30,15 40,8 50,7" fill="none" stroke="#22e06a" stroke-width="2"/></svg><div class="roi"><b>+204%</b><small>ROI 30D</small></div><button class="add">+</button></div>
          <div class="metaline"><span>P&L <b class="pnl">+$21K</b></span><span>🔥 <b class="fire">512</b> копируют</span><span>⚡ <b class="slot">7</b> слотов</span></div>
        </div>
        <div class="card">
          <div class="r"><div class="av">🦈</div><div><div class="nm">Orca_77 <span class="vf">EDGE 7.3</span></div><div class="subln"><span class="cat">CRYPTO</span><span class="act">2 ч назад</span></div></div><svg class="spark" viewBox="0 0 50 26"><polyline points="0,16 10,18 20,14 30,16 40,12 50,10" fill="none" stroke="#22e06a" stroke-width="2"/></svg><div class="roi"><b>+161%</b><small>ROI 30D</small></div><button class="add">+</button></div>
          <div class="metaline"><span>P&L <b class="pnl">+$14K</b></span><span>🔥 <b class="fire">390</b> копируют</span><span>⚡ <b class="slot">12</b> слотов</span></div>
        </div>
      </div>
    </div>
    <div class="nav"><div class="on"><span class="nic">🐋</span>Лидеры</div><div><span class="nic">📈</span>Сделки</div><div><span class="nic">👛</span>Кошелёк</div><div><span class="nic">☰</span>Ещё</div></div>
  </div>
  <div class="cap"><div class="cn">① Лидеры — карточка = ХАЙП</div>
    <div class="cd">Категория · онлайн-статус · ROI (переключатель 30/60/90). Строка метрик (3): P&L в $, 🔥 сколько копируют, ⚡ свободные слоты (дефицит → FOMO). EDGE — активный сорт.</div>
  </div>
  </div>

  <!-- PROFILE -->
  <div>
  <div class="ph">
    <div class="scr">
      <div class="pback">← Лидеры</div>
      <div class="phead"><div class="bigav">🐋</div><div><div class="pname">DeepBlue.eth <span class="vf">EDGE 9.4</span></div><div class="psub"><span class="cat">POLITICS</span><span class="act"><span class="live"></span>онлайн</span></div></div><button class="copybig">Копировать</button></div>
      <div class="chart">
        <div class="lbl"><b>Equity curve</b><span class="roi90">+428% 90D</span></div>
        <svg width="100%" height="68" viewBox="0 0 290 68" preserveAspectRatio="none"><polyline points="0,60 30,54 55,57 85,44 110,48 140,33 165,36 195,20 220,24 250,11 290,3" fill="none" stroke="#22e06a" stroke-width="2.5"/><polyline points="0,68 0,60 30,54 55,57 85,44 110,48 140,33 165,36 195,20 220,24 250,11 290,3 290,68" fill="rgba(34,224,106,.1)" stroke="none"/></svg>
        <div class="per" style="margin-top:10px;display:inline-flex"><div>30D</div><div>60D</div><div class="on">90D</div></div>
      </div>
      <div class="sect">Безопасность и качество</div>
      <div class="grid">
        <div class="g"><div class="l">Win-rate</div><div class="v gr">92%</div></div>
        <div class="g"><div class="l">Max DD</div><div class="v rd">−14%</div></div>
        <div class="g"><div class="l">Sharpe</div><div class="v">2.1</div></div>
        <div class="g"><div class="l">Ср. удержание</div><div class="v">1.8д</div></div>
        <div class="g"><div class="l">Profit factor</div><div class="v">3.4</div></div>
        <div class="g"><div class="l">Сделок</div><div class="v">312</div></div>
      </div>
      <div class="honest">
        <div class="ht">🔒 Честность копии</div>
        <div class="hrow2"><span>Твоя реальная цена входа</span><b>$0.61 <span style="color:#5b8a82">(не китовая)</span></b></div>
        <div class="hrow2"><span>Средний лаг копии</span><b>~12 сек</b></div>
        <div class="hrow2"><span>Custody</span><b>Non-custodial · не выводим</b></div>
      </div>
    </div>
    <div class="nav"><div class="on"><span class="nic">🐋</span>Лидеры</div><div><span class="nic">📈</span>Сделки</div><div><span class="nic">👛</span>Кошелёк</div><div><span class="nic">☰</span>Ещё</div></div>
  </div>
  <div class="cap"><div class="cn">② Профиль кита — БЕЗОПАСНОСТЬ внутри</div>
    <div class="cd">Большая equity-кривая (30/60/90), сетка: win-rate, max DD, Sharpe, ср. удержание, profit factor, сделок. Блок «честности»: реальная цена входа, лаг копии, non-custodial — спрятаны сюда, как ты решил.</div>
  </div>
  </div>

</div>
</body></html>
📜 Git History

4814806design: Phase 2 final visual language (Stand layout + Olympus palette) + 4 screens12 days ago
Show last diff