phase2-branding.html

<!DOCTYPE html>
<html lang="ru"><head><meta charset="utf-8">
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,'Segoe UI',Roboto,sans-serif}
body{background:#0a0b0f;padding:30px 26px 50px}
.h{color:#f3f4f6;font-size:23px;font-weight:800;margin-bottom:4px}
.sub{color:#6b7280;font-size:13px;margin-bottom:26px}
.lab{color:#9ca3af;font-size:12px}
.wrap{display:flex;gap:30px;align-items:flex-start}
.col{width:300px}
.cap{margin-top:14px}
.cname{color:#f3f4f6;font-size:15px;font-weight:700}
.cdesc{color:#6b7280;font-size:11.5px;margin-top:3px;line-height:1.5}
.swatch{display:flex;gap:5px;margin-top:9px}
.sw{width:20px;height:20px;border-radius:5px;border:1px solid rgba(255,255,255,.12)}

/* phone shell */
.phone{width:300px;border:8px solid #000;border-radius:34px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.6);display:flex;flex-direction:column;height:620px}
.tb{display:flex;align-items:center;justify-content:space-between;padding:14px 15px 11px}
.brand{font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px}
.bal{font-size:12px;padding:5px 11px;border-radius:20px;font-weight:700}
.scr{flex:1;overflow:hidden;padding:13px 13px 6px}
.tt{font-size:19px;font-weight:800;margin-bottom:1px}
.ts{font-size:11.5px;margin-bottom:13px}
.chips{display:flex;gap:6px;margin-bottom:13px}
.chip{font-size:10.5px;padding:5px 10px;border-radius:18px;font-weight:600}
.card{padding:12px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.av{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.nm{font-weight:700;font-size:13.5px}
.mt{font-size:11px;margin-top:2px}
.right{margin-left:auto;text-align:right}
.roi{font-weight:800;font-size:15px}
.cp{margin-left:auto;border:none;font-weight:800;font-size:11.5px;padding:7px 14px;border-radius:18px;cursor:pointer}
.nav{display:flex;border-top:1px solid rgba(255,255,255,.07)}
.nav div{flex:1;text-align:center;padding:9px 0 11px;font-size:10px}
.nic{font-size:18px;display:block;margin-bottom:3px}

/* ============ DIR 1 — DEEP WHALE (ocean) ============ */
.d1{background:#070d14}
.d1 .tb{border-bottom:1px solid #11202e}
.d1 .brand{color:#e6f1f7}
.d1 .bal{background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.35)}
.d1 .tt{color:#e6f1f7}.d1 .ts{color:#5b7387}
.d1 .chip{background:#0d1722;color:#5b7387;border:1px solid #16293a}
.d1 .chip.on{background:rgba(34,211,238,.14);color:#22d3ee;border-color:#22d3ee}
.d1 .card{background:linear-gradient(180deg,#0c1825,#0a131d);border:1px solid #14283a;border-radius:15px}
.d1 .av{background:linear-gradient(135deg,#22d3ee,#0e7490)}
.d1 .nm{color:#e6f1f7}.d1 .mt{color:#5b7387}
.d1 .roi{color:#34d399}
.d1 .cp{background:#22d3ee;color:#04222b}
.d1 .nav{background:#070d14}
.d1 .nav div{color:#41566a}.d1 .nav div.on{color:#22d3ee}

/* ============ DIR 2 — VIOLET PREMIUM (evolved current) ============ */
.d2{background:#0c0d14}
.d2 .tb{border-bottom:1px solid #20212e}
.d2 .brand{background:linear-gradient(90deg,#c084fc,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.d2 .bal{background:rgba(192,132,252,.13);color:#c4b5fd;border:1px solid rgba(192,132,252,.3)}
.d2 .tt{color:#f4f3fb}.d2 .ts{color:#6c6f85}
.d2 .chip{background:#171823;color:#8b8ea3;border:1px solid #262838}
.d2 .chip.on{background:rgba(192,132,252,.15);color:#c084fc;border-color:#c084fc}
.d2 .card{background:#15161f;border:1px solid #242636;border-radius:16px}
.d2 .av{background:linear-gradient(135deg,#c084fc,#7c3aed)}
.d2 .nm{color:#f4f3fb}.d2 .mt{color:#6c6f85}
.d2 .roi{color:#34d399}
.d2 .cp{background:linear-gradient(90deg,#c084fc,#a855f7);color:#15101e}
.d2 .nav{background:#0c0d14}
.d2 .nav div{color:#55586e}.d2 .nav div.on{color:#c084fc}

/* ============ DIR 3 — PRO TERMINAL (data-dense) ============ */
.d3{background:#0b0c0c}
.d3 .tb{border-bottom:1px solid #1c1d1d}
.d3 .brand{color:#e8e8e3;font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}
.d3 .bal{background:#101110;color:#10b981;border:1px solid #1f3a30;font-family:ui-monospace,monospace;border-radius:6px}
.d3 .tt{color:#e8e8e3;font-family:ui-monospace,monospace;letter-spacing:.5px}.d3 .ts{color:#6b6f6b}
.d3 .chip{background:#121313;color:#8a8f8a;border:1px solid #232423;border-radius:5px}
.d3 .chip.on{background:#10221a;color:#10b981;border-color:#1f5c44}
.d3 .card{background:#101110;border:1px solid #1f2120;border-radius:7px}
.d3 .av{background:linear-gradient(135deg,#34d399,#047857);border-radius:7px}
.d3 .nm{color:#e8e8e3}.d3 .mt{color:#6b6f6b;font-family:ui-monospace,monospace}
.d3 .roi{color:#10b981;font-family:ui-monospace,monospace}
.d3 .cp{background:#10b981;color:#04140d;border-radius:6px;font-family:ui-monospace,monospace}
.d3 .nav{background:#0b0c0c}
.d3 .nav div{color:#5a5e5a;font-family:ui-monospace,monospace}.d3 .nav div.on{color:#10b981}
</style></head>
<body>
<div class="h">🐋 Поликопи — Фаза 2: 3 направления брендинга</div>
<div class="sub">Один экран «Лидеры» (главная) в трёх визуальных языках. Структура из Фазы 1 одинакова — меняется только стиль.</div>
<div class="wrap">

  <!-- DIR 1 -->
  <div class="col">
    <div class="phone d1">
      <div class="tb"><div class="brand">🐋 Поликопи</div><div class="bal">$248.50</div></div>
      <div class="scr">
        <div class="tt">Лидеры</div><div class="ts">Топ-киты Polymarket за 30 дней</div>
        <div class="chips"><div class="chip on">ROI</div><div class="chip">Win-rate</div><div class="chip">Объём</div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">DeepBlue.eth</div><div class="mt">847 копиров · 92% win</div></div><div class="right"><div class="roi">+312%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">Копировать</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Leviathan</div><div class="mt">512 копиров · 88% win</div></div><div class="right"><div class="roi">+204%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">Копировать</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Orca_77</div><div class="mt">390 копиров · 81% win</div></div><div class="right"><div class="roi">+161%</div></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="cname">A · «Глубокий кит»</div>
      <div class="cdesc">Океан-палитра, cyan-акцент, премиум-fintech. Кит как герой бренда. Спокойный, дорогой, доверие.</div>
      <div class="swatch"><div class="sw" style="background:#070d14"></div><div class="sw" style="background:#0c1825"></div><div class="sw" style="background:#22d3ee"></div><div class="sw" style="background:#34d399"></div></div>
    </div>
  </div>

  <!-- DIR 2 -->
  <div class="col">
    <div class="phone d2">
      <div class="tb"><div class="brand">🐋 Поликопи</div><div class="bal">$248.50</div></div>
      <div class="scr">
        <div class="tt">Лидеры</div><div class="ts">Топ-киты Polymarket за 30 дней</div>
        <div class="chips"><div class="chip on">ROI</div><div class="chip">Win-rate</div><div class="chip">Объём</div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">DeepBlue.eth</div><div class="mt">847 копиров · 92% win</div></div><div class="right"><div class="roi">+312%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">Копировать</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Leviathan</div><div class="mt">512 копиров · 88% win</div></div><div class="right"><div class="roi">+204%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">Копировать</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Orca_77</div><div class="mt">390 копиров · 81% win</div></div><div class="right"><div class="roi">+161%</div></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="cname">B · «Неон-фиолет» (эволюция)</div>
      <div class="cdesc">Текущий фиолет, но отполированный: градиентный логотип, мягкие карточки, премиум. Меньше всего риска — узнаваемо.</div>
      <div class="swatch"><div class="sw" style="background:#0c0d14"></div><div class="sw" style="background:#15161f"></div><div class="sw" style="background:#c084fc"></div><div class="sw" style="background:#818cf8"></div></div>
    </div>
  </div>

  <!-- DIR 3 -->
  <div class="col">
    <div class="phone d3">
      <div class="tb"><div class="brand">🐋 ПОЛИКОПИ</div><div class="bal">$248.50</div></div>
      <div class="scr">
        <div class="tt">ЛИДЕРЫ</div><div class="ts">Топ-киты Polymarket · 30D</div>
        <div class="chips"><div class="chip on">ROI</div><div class="chip">WIN%</div><div class="chip">VOL</div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">DeepBlue.eth</div><div class="mt">847 cp · 92% win</div></div><div class="right"><div class="roi">+312%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">COPY</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Leviathan</div><div class="mt">512 cp · 88% win</div></div><div class="right"><div class="roi">+204%</div></div></div><div style="margin-top:10px;text-align:right"><button class="cp">COPY</button></div></div>
        <div class="card"><div class="row"><div class="av"></div><div><div class="nm">Orca_77</div><div class="mt">390 cp · 81% win</div></div><div class="right"><div class="roi">+161%</div></div></div></div>
      </div>
      <div class="nav"><div class="on"><span class="nic">🐋</span>LEAD</div><div><span class="nic">📈</span>TRADES</div><div><span class="nic">👛</span>WALLET</div><div><span class="nic">☰</span>MORE</div></div>
    </div>
    <div class="cap"><div class="cname">C · «Про-терминал»</div>
      <div class="cdesc">Bloomberg-вайб: моноширинные цифры, зелёный на чёрном, острые углы, плотность данных. Для «серьёзных» трейдеров.</div>
      <div class="swatch"><div class="sw" style="background:#0b0c0c"></div><div class="sw" style="background:#101110"></div><div class="sw" style="background:#10b981"></div><div class="sw" style="background:#e8e8e3"></div></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