phase2-merge-discussion.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}

/* ===== Olympus palette + Stand layout ===== */
.O{background:#0c1c22}
.ph{width:330px;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:710px}
.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;margin:2px 0 13px;font-family:'JetBrains Mono',monospace}
.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 13px;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:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#22e06a,#0d8f55);display:flex;align-items:center;justify-content:center;font-size:18px;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}
.ns{color:#5b8a82;font-size:10.5px;margin-top:2px;font-family:'JetBrains Mono',monospace}
.spark{width:54px;height:26px;margin-left:auto}
.roi{text-align:right;width:64px}.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:13px;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}
.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}

.cap{margin-top:14px;width:330px}.cn{color:#f3f4f6;font-size:15px;font-weight:700}
.cd{color:#7b8294;font-size:11.5px;margin-top:4px;line-height:1.55}

/* discussion card variants column */
.disc{width:360px}
.dh{color:#eafff4;font-size:14px;font-weight:700;margin:2px 0 10px}
.optlabel{color:#22e06a;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;margin:14px 0 7px}
.optlabel:first-child{margin-top:0}
.dcard{background:#0f2730;border:1px solid #18404a;border-radius:15px;padding:13px;margin-bottom:4px}
/* live dot */
.live{width:7px;height:7px;border-radius:50%;background:#22e06a;display:inline-block;box-shadow:0 0 0 3px rgba(34,224,106,.18)}
.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}
.pnl{color:#22e06a;font-weight:700;font-size:11px;font-family:'JetBrains Mono',monospace}
.note{color:#7b8294;font-size:11px;line-height:1.5;margin-top:6px}
</style></head>
<body>
<div class="h">🐋 Поликопи — Фаза 2 (v6): раскладка Stand + цвета Olympus</div>
<div class="sub">Слева — совмещённый вариант (то, что понравилось: терминальная раскладка варианта 3 в navy+зелёной палитре варианта 1). Справа — 2 варианта НАПОЛНЕНИЯ карточки, чтобы предметно обсудить, какие данные показывать.</div>
<div class="wrap">

  <!-- merged phone -->
  <div>
  <div class="ph O">
    <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="ts">SMART MONEY · POLYMARKET · 30D</div>
        <div class="seg"><div class="on">ROI</div><div>WIN</div><div>EDGE</div><div>AUM</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="ns">$1.2M · 847 cp</div></div><svg class="spark" viewBox="0 0 54 26"><polyline points="0,22 11,18 22,19 33,11 44,13 54,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>WIN <b>92%</b></span><span>DD <b>−14%</b></span><span>ENTRY <b>$0.61</b></span><span>LAG <b>12s</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="ns">$680K · 512 cp</div></div><svg class="spark" viewBox="0 0 54 26"><polyline points="0,19 11,20 22,13 33,15 44,8 54,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>WIN <b>88%</b></span><span>DD <b>−21%</b></span><span>ENTRY <b>$0.58</b></span><span>LAG <b>11s</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="ns">$410K · 390 cp</div></div><svg class="spark" viewBox="0 0 54 26"><polyline points="0,16 11,18 22,14 33,16 44,12 54,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>WIN <b>81%</b></span><span>DD <b>−9%</b></span><span>ENTRY <b>$0.44</b></span><span>LAG <b>13s</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">✦ Совмещённый: Stand-раскладка + Olympus-цвета</div>
    <div class="cd">Navy #0c1c22 · электрик-зелёный #22E06A · моноширинные цифры. Терминальная плотность, equity-спарклайн, мета-строка метрик, круглая +-кнопка.</div>
  </div>
  </div>

  <!-- discussion: card data options -->
  <div class="disc">
    <div class="dh">🤔 Какие данные на карточке? — 2 варианта</div>

    <div class="optlabel">A) RISK-FOCUSED (как сейчас) — для осторожных</div>
    <div class="dcard">
      <div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="vf">EDGE 9.4</span></div><div class="ns">$1.2M · 847 cp</div></div><svg class="spark" viewBox="0 0 54 26"><polyline points="0,22 11,18 22,19 33,11 44,13 54,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>WIN <b>92%</b></span><span>DD <b>−14%</b></span><span>ENTRY <b>$0.61</b></span><span>LAG <b>12s</b></span></div>
    </div>
    <div class="note">Акцент на риск/качество: win-rate, просадка, честная цена входа, лаг копии. Хорошо для дифференциации «честность».</div>

    <div class="optlabel">B) SOCIAL + ACTIVITY — для вовлечения</div>
    <div class="dcard">
      <div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="cat">POLITICS</span></div><div class="ns"><span class="live"></span> активен 4 мин назад</div></div><svg class="spark" viewBox="0 0 54 26"><polyline points="0,22 11,18 22,19 33,11 44,13 54,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>WIN <b>92%</b></span><span>P&L <b class="pnl">+$38K</b></span><span>🔥 <b>847 копируют</b></span></div>
    </div>
    <div class="note">Акцент на живость/соц-доказательство: онлайн-статус, категория, абсолютный P&L в $, «847 копируют» как FOMO. Хорошо для конверсии/удержания.</div>

    <div class="dh" style="margin-top:18px">📋 Пул возможных полей (выбрать набор)</div>
    <div class="note" style="margin-top:0">
      • ROI (период 7/30/90д — переключатель)<br>
      • Win-rate · Max drawdown · Sharpe/стабильность<br>
      • EDGE-скор (наш композит) · equity-спарклайн<br>
      • AUM · кол-во копирующих (соц-доказательство)<br>
      • P&L в $ (абсолют) · средн. время удержания<br>
      • Категория (Politics/Sports/Crypto) · активность/онлайн<br>
      • Честная цена входа · лаг копии (наши фишки честности)<br>
      • Свободные слоты копирующих / лимит (дефицит → FOMO)
    </div>
  </div>

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

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