phase2-final.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');
:root{--bg:#0c1c22;--panel:#0f2730;--bd:#18404a;--bds:#163740;--gr:#22e06a;--grd:#0d8f55;--tx:#eafff4;--mu:#5b8a82;--mu2:#4f7972;--rd:#ff7a7a;--bl:#7fd9ff}
*{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:1100px;line-height:1.55}
.wrap{display:flex;gap:26px;align-items:flex-start}
.mono{font-family:'JetBrains Mono',monospace}
.ph{width:328px;background:var(--bg);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:716px}
.scr{flex:1;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid #11323a}
.bz{color:var(--tx);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,var(--gr),var(--grd));display:flex;align-items:center;justify-content:center;font-size:13px}
.bal{background:var(--gr);color:#04221a;font-weight:800;font-size:12px;padding:7px 12px;border-radius:9px;font-family:'JetBrains Mono',monospace}
.pad{padding:13px 14px}
h2{color:var(--tx);font-size:20px;font-weight:800}
.ts{color:var(--mu);font-size:11px;font-family:'JetBrains Mono',monospace}
.nav{display:flex;background:var(--bg);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:var(--gr)}
.nic{font-size:18px;display:block;margin-bottom:3px}
.cap{margin-top:13px;width:328px}.cn{color:#f3f4f6;font-size:14px;font-weight:700}
.cd{color:#7b8294;font-size:11px;margin-top:4px;line-height:1.5}

/* leaders */
.hrow{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:11px}
.per{display:flex;gap:4px;background:var(--panel);border:1px solid var(--bds);border-radius:9px;padding:3px}
.per div{font-size:10px;font-weight:700;color:#6fa298;padding:5px 8px;border-radius:6px;font-family:'JetBrains Mono',monospace}
.per div.on{background:var(--gr);color:#04221a}
.seg{display:flex;gap:6px;margin-bottom:12px}
.seg div{font-size:10px;font-weight:700;color:#6fa298;background:var(--panel);border:1px solid var(--bds);padding:7px 11px;border-radius:8px;font-family:'JetBrains Mono',monospace}
.seg div.on{background:var(--gr);color:#04221a;border-color:var(--gr)}
.card{background:var(--panel);border:1px solid var(--bd);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,var(--gr),var(--grd));display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.nm{color:var(--tx);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:var(--gr);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:var(--bl);background:rgba(127,217,255,.12);padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace}
.act{color:var(--mu);font-size:10px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:5px}
.live{width:7px;height:7px;border-radius:50%;background:var(--gr);display:inline-block;box-shadow:0 0 0 3px rgba(34,224,106,.18)}
.spark{width:48px;height:26px;margin-left:auto}
.roi{text-align:right;width:60px}.roi b{color:var(--gr);font-weight:800;font-size:16px;font-family:'JetBrains Mono',monospace}.roi small{display:block;color:var(--mu);font-size:8.5px}
.add{width:33px;height:33px;border-radius:9px;background:rgba(34,224,106,.15);border:1px solid #1f6b4d;color:var(--gr);font-size:18px;display:flex;align-items:center;justify-content:center;margin-left:8px;flex-shrink:0}
.metaline{display:flex;gap:15px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bds);font-family:'JetBrains Mono',monospace}
.metaline span{color:var(--mu2);font-size:9.5px}.metaline b{color:#cfeee4}
.metaline .pnl{color:var(--gr)}.metaline .fire{color:#ffb347}.metaline .mom{color:var(--gr)}

/* my trades */
.summary{display:flex;gap:10px;margin-bottom:13px}
.scell{flex:1;background:var(--panel);border:1px solid var(--bd);border-radius:13px;padding:11px 12px}
.scell .l{color:var(--mu2);font-size:9.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.scell .v{color:var(--tx);font-weight:800;font-size:18px;margin-top:3px;font-family:'JetBrains Mono',monospace}
.scell .v.gr{color:var(--gr)}
.tabs{display:flex;gap:5px;background:var(--panel);border:1px solid var(--bds);border-radius:11px;padding:4px;margin-bottom:13px}
.tabs div{flex:1;text-align:center;font-size:11px;font-weight:700;color:#6fa298;padding:7px 0;border-radius:8px}
.tabs div.on{background:var(--gr);color:#04221a}
.pos{background:var(--panel);border:1px solid var(--bd);border-radius:14px;padding:12px;margin-bottom:9px}
.posh{display:flex;align-items:center;gap:8px}
.mkt{color:var(--tx);font-weight:700;font-size:12.5px;line-height:1.3}
. side{font-size:8.5px;font-weight:800;padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace}
.side.yes{background:rgba(34,224,106,.16);color:var(--gr)}
.side.no{background:rgba(255,122,122,.16);color:var(--rd)}
.via{color:var(--mu);font-size:10px;margin-top:5px;font-family:'JetBrains Mono',monospace}
.posb{display:flex;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--bds);font-family:'JetBrains Mono',monospace}
.posb .px{color:var(--mu);font-size:10.5px}.posb .px b{color:#cfeee4}
.posb .pl{margin-left:auto;text-align:right}.posb .pl b{color:var(--gr);font-weight:800;font-size:14px}.posb .pl small{display:block;color:var(--mu);font-size:9px}

/* wallet */
.wbal{text-align:center;padding:14px 0 4px}
.wbal .l{color:var(--mu);font-size:11px;font-family:'JetBrains Mono',monospace}
.wbal .v{color:var(--tx);font-weight:800;font-size:38px;margin-top:4px;font-family:'JetBrains Mono',monospace}
.wbtns{display:flex;gap:10px;margin:14px 0}
.wbtns button{flex:1;border:none;font-weight:800;font-size:13px;padding:13px;border-radius:13px;font-family:'JetBrains Mono',monospace}
.wbtns .dep{background:var(--gr);color:#04221a}
.wbtns .wd{background:var(--panel);color:var(--tx);border:1px solid var(--bd)}
.alloc{background:var(--panel);border:1px solid var(--bd);border-radius:14px;padding:13px;margin-bottom:11px}
.alloc .ar{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mu)}
.alloc .ar b{color:var(--tx)}
.abar{height:8px;border-radius:5px;background:var(--bds);margin-top:9px;overflow:hidden}
.abar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--gr),var(--grd))}
.safe{display:flex;align-items:center;gap:8px;background:rgba(34,224,106,.06);border:1px solid #1f6b4d;border-radius:11px;padding:10px 12px;margin-bottom:13px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9fd9cc}
.safe b{color:var(--gr)}
.txr{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #11272d;font-family:'JetBrains Mono',monospace}
.txr .ic{width:30px;height:30px;border-radius:9px;background:var(--panel);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:14px}
.txr .tt{color:var(--tx);font-size:12px;font-weight:600;font-family:'Inter'}
.txr .td{color:var(--mu);font-size:9.5px}
.txr .ta{margin-left:auto;font-size:12px;font-weight:700}
.txr .ta.pos{color:var(--gr)}.txr .ta.neg{color:var(--rd)}

/* more */
.mi{display:flex;align-items:center;gap:13px;padding:15px 4px;border-bottom:1px solid #11272d}
.mi .ic{width:34px;height:34px;border-radius:10px;background:var(--panel);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:17px}
.mi .ml{color:var(--tx);font-size:14px;font-weight:600}
.mi .mr{margin-left:auto;color:var(--mu);font-size:12px;font-family:'JetBrains Mono',monospace}
.mfoot{margin-top:18px;text-align:center;color:var(--mu2);font-size:10px;font-family:'JetBrains Mono',monospace;line-height:1.7}
.mbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,224,106,.08);border:1px solid #1f6b4d;color:var(--gr);font-size:10px;padding:5px 11px;border-radius:20px;margin-top:8px}
</style></head>
<body>
<div class="h">🐋 Поликопи — Фаза 2: финальный визуальный язык на 4 экранах</div>
<div class="sub">Stand-раскладка + Olympus-палитра (navy #0c1c22 · электрик-зелёный #22E06A · моноцифры). Лидеры (хайп, слоты убраны → моментум 7D) · Мои сделки (4 таба) · Кошелёк (non-custodial) · Ещё.</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</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 48 26"><polyline points="0,22 10,18 19,19 29,11 38,13 48,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="mom">+24%</b> 7D</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 48 26"><polyline points="0,19 10,20 19,13 29,15 38,8 48,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="mom">+9%</b> 7D</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 48 26"><polyline points="0,16 10,18 19,14 29,16 38,12 48,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="mom">+15%</b> 7D</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">① Лидеры (хайп · моментум 7D)</div><div class="cd">Слоты убраны → 3-я метрика = моментум 📈 7D. Категория, онлайн, ROI 30/60/90, EDGE-сорт.</div></div></div>

  <!-- MY TRADES -->
  <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">
        <h2 style="margin-bottom:12px">Мои сделки</h2>
        <div class="summary"><div class="scell"><div class="l">Капитал</div><div class="v">$312.40</div></div><div class="scell"><div class="l">Сегодня</div><div class="v gr">+$12.30</div></div></div>
        <div class="tabs"><div class="on">Позиции</div><div>Подписки</div><div>История</div><div>P&L</div></div>
        <div class="pos">
          <div class="posh"><div><div class="mkt">Trump выиграет выборы 2028?</div><div class="via">копия с 🐋 DeepBlue.eth</div></div><span class="side yes" style="margin-left:auto">YES</span></div>
          <div class="posb"><div class="px">вход <b>$0.61</b> → сейчас <b>$0.68</b></div><div class="pl"><b>+$8.40</b><small>+11.5%</small></div></div>
        </div>
        <div class="pos">
          <div class="posh"><div><div class="mkt">Lakers выиграют титул NBA?</div><div class="via">копия с 🐳 Leviathan</div></div><span class="side no" style="margin-left:auto">NO</span></div>
          <div class="posb"><div class="px">вход <b>$0.43</b> → сейчас <b>$0.47</b></div><div class="pl"><b>+$3.90</b><small>+9.3%</small></div></div>
        </div>
        <div class="pos">
          <div class="posh"><div><div class="mkt">BTC выше $150k к 2027?</div><div class="via">копия с 🦈 Orca_77</div></div><span class="side yes" style="margin-left:auto">YES</span></div>
          <div class="posb"><div class="px">вход <b>$0.31</b> → сейчас <b>$0.29</b></div><div class="pl"><b style="color:#ff7a7a">−$2.10</b><small>−6.4%</small></div></div>
        </div>
      </div>
    </div>
    <div class="nav"><div><span class="nic">🐋</span>Лидеры</div><div class="on"><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">② Мои сделки (4 таба)</div><div class="cd">Позиции / Подписки / История / P&L. Каждая позиция показывает, с какого кита скопирована, YES/NO, вход→сейчас, P&L.</div></div></div>

  <!-- WALLET -->
  <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">
        <h2>Кошелёк</h2>
        <div class="wbal"><div class="l">ДОСТУПНЫЙ БАЛАНС</div><div class="v">$248.50</div></div>
        <div class="wbtns"><button class="dep">↓ Пополнить</button><button class="wd">↑ Вывести</button></div>
        <div class="alloc"><div class="ar"><span>Выделено на копирование</span><b>$180 / $248</b></div><div class="abar"><i></i></div></div>
        <div class="safe">🔒 Деньги в твоём Safe · <b>0x7a3f…b21c</b> · non-custodial</div>
        <div style="color:#5b8a82;font-size:10px;font-weight:700;letter-spacing:1px;font-family:'JetBrains Mono',monospace;margin:4px 0 6px">ПОСЛЕДНИЕ ОПЕРАЦИИ</div>
        <div class="txr"><div class="ic">↓</div><div><div class="tt">Пополнение USDC</div><div class="td">22 июн · 14:02</div></div><div class="ta pos">+$100.00</div></div>
        <div class="txr"><div class="ic">📈</div><div><div class="tt">Копи-сделка · DeepBlue</div><div class="td">22 июн · 11:20</div></div><div class="ta pos">+$8.40</div></div>
        <div class="txr"><div class="ic">💸</div><div><div class="tt">Builder fee 0.5%</div><div class="td">22 июн · 11:20</div></div><div class="ta neg">−$0.32</div></div>
      </div>
    </div>
    <div class="nav"><div><span class="nic">🐋</span>Лидеры</div><div><span class="nic">📈</span>Сделки</div><div class="on"><span class="nic">👛</span>Кошелёк</div><div><span class="nic">☰</span>Ещё</div></div>
  </div><div class="cap"><div class="cn">③ Кошелёк (non-custodial)</div><div class="cd">Баланс, пополнить/вывести, аллокация на копии, адрес Safe (не выводим), операции с builder fee.</div></div></div>

  <!-- MORE -->
  <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">
        <h2 style="margin-bottom:8px">Ещё</h2>
        <div class="mi"><div class="ic">🏆</div><div class="ml">Лидерборд</div><div class="mr">›</div></div>
        <div class="mi"><div class="ic">⚙️</div><div class="ml">Настройки</div><div class="mr">›</div></div>
        <div class="mi"><div class="ic">🌐</div><div class="ml">Язык</div><div class="mr">RU ›</div></div>
        <div class="mi"><div class="ic">🌗</div><div class="ml">Тема</div><div class="mr">Тёмная ›</div></div>
        <div class="mi"><div class="ic">📖</div><div class="ml">Как это работает</div><div class="mr">›</div></div>
        <div class="mi"><div class="ic">💬</div><div class="ml">Поддержка</div><div class="mr">›</div></div>
        <div class="mfoot">Поликопи · v2.0<br><span class="mbadge">🔒 Non-custodial · Turnkey</span></div>
      </div>
    </div>
    <div class="nav"><div><span class="nic">🐋</span>Лидеры</div><div><span class="nic">📈</span>Сделки</div><div><span class="nic">👛</span>Кошелёк</div><div class="on"><span class="nic">☰</span>Ещё</div></div>
  </div><div class="cap"><div class="cn">④ Ещё</div><div class="cd">Лидерборд, настройки, язык RU/EN, тема, «как это работает», поддержка. Внизу — траст-бейдж 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