phase2-themes.html

<!DOCTYPE html><html><head><meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@600;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',sans-serif}
body{background:#0e0f13;padding:30px 26px 40px}
.h{color:#f3f4f6;font-size:22px;font-weight:800;margin-bottom:4px}
.sub{color:#7b8294;font-size:12.5px;margin-bottom:22px;max-width:1000px;line-height:1.5}
.grid{display:flex;gap:20px;flex-wrap:wrap}
.col{width:250px}
.card{background:var(--bg);border:1px solid var(--bd);border-radius:18px;padding:15px;display:flex;flex-direction:column}
.tb{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.bz{color:var(--tx);font-weight:800;font-size:14px}
.bal{background:var(--ac);color:#06140d;font-weight:800;font-size:11px;padding:6px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace}
.wc{background:var(--panel);border:1px solid var(--bd);border-radius:13px;padding:12px}
.r{display:flex;align-items:center;gap:10px}
.av{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--ac),var(--acd));display:flex;align-items:center;justify-content:center;font-size:17px}
.nm{color:var(--tx);font-weight:700;font-size:13px;display:flex;align-items:center;gap:5px}
.eg{font-size:8px;font-weight:700;background:var(--acbg);color:var(--ac);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace}
.ns{color:var(--mu);font-size:9.5px;margin-top:2px;font-family:'JetBrains Mono',monospace}
.roi{margin-left:auto;color:#22e06a;font-weight:800;font-size:15px;font-family:'JetBrains Mono',monospace}
.meta{display:flex;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bds);font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mu)}
.meta b{color:var(--tx)} .pos{color:#22e06a!important} .neg{color:#ff7a7a!important}
.btn{margin-top:11px;width:100%;background:var(--ac);color:#06140d;border:none;font-weight:800;font-size:12px;padding:10px;border-radius:10px}
.nav{display:flex;margin-top:12px}
.nav span{flex:1;text-align:center;font-size:15px;opacity:.4}
.nav span.on{opacity:1;color:var(--ac)}
.label{color:#f3f4f6;font-size:14px;font-weight:700;margin-top:13px;display:flex;align-items:center;gap:8px}
.dot{width:13px;height:13px;border-radius:50%}
.desc{color:#7b8294;font-size:11px;margin-top:3px;line-height:1.45}
.def{font-size:9px;font-weight:700;color:#22e06a;background:rgba(34,224,106,.15);padding:2px 7px;border-radius:5px}

.t-green{--bg:#08161b;--panel:#0f2730;--bd:#18404a;--bds:#163740;--tx:#eafff4;--mu:#5b8a82;--ac:#22e06a;--acd:#0d8f55;--acbg:rgba(34,224,106,.18)}
.t-ocean{--bg:#081320;--panel:#0d1e30;--bd:#16324a;--bds:#13283b;--tx:#eaf3ff;--mu:#5b7a96;--ac:#2f97ff;--acd:#0d5fb0;--acbg:rgba(47,151,255,.18)}
.t-nebula{--bg:#120e1f;--panel:#1b1630;--bd:#2e2547;--bds:#241d3a;--tx:#f1ecff;--mu:#7d7298;--ac:#a78bfa;--acd:#6d28d9;--acbg:rgba(167,139,250,.18)}
.t-sunset{--bg:#1a1108;--panel:#241808;--bd:#3d2c12;--bds:#2f2210;--tx:#fff3e6;--mu:#9a8259;--ac:#ffae3b;--acd:#b86f0d;--acbg:rgba(255,174,59,.18)}
.t-crimson{--bg:#1a0b10;--panel:#26111a;--bd:#46212f;--bds:#371924;--tx:#ffeef2;--mu:#9a6577;--ac:#ff4d7d;--acd:#b01242;--acbg:rgba(255,77,125,.18)}
.t-cyber{--bg:#05080a;--panel:#0a1014;--bd:#152229;--bds:#101b20;--tx:#e6fbff;--mu:#5a8088;--ac:#22e0d6;--acd:#0d8f88;--acbg:rgba(34,224,214,.18)}
</style></head>
<body>
<div class="h">🐋 Поликопи — цветовые темы</div>
<div class="sub">Зелёная (Olympus) — по умолчанию. Profit/loss всегда зелёный/красный (семантика денег) — меняется только акцент + оттенок фона. Скажи, какие добавляем (рекомендую дефолт + 2-3).</div>
<div class="grid">

  <div class="col"><div class="card t-green">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#22e06a"></span>Green / Olympus <span class="def">DEFAULT</span></div><div class="desc">Электрик-зелёный + navy. Утверждённая база.</div></div>

  <div class="col"><div class="card t-ocean">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#2f97ff"></span>Ocean / Blue</div><div class="desc">Электрик-синий + глубокий navy. Чисто, «доверие банка».</div></div>

  <div class="col"><div class="card t-nebula">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#a78bfa"></span>Nebula / Violet</div><div class="desc">Фиолет + тёмно-сливовый. Премиум, наш прошлый бренд-цвет.</div></div>

  <div class="col"><div class="card t-sunset">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#ffae3b"></span>Sunset / Amber</div><div class="desc">Тёплое золото + кофейный фон. Уютно, «голд-премиум».</div></div>

  <div class="col"><div class="card t-crimson">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#ff4d7d"></span>Crimson / Rose</div><div class="desc">Малиново-розовый + винный фон. Дерзко, «degen».</div></div>

  <div class="col"><div class="card t-cyber">
    <div class="tb"><div class="bz">🐋 Поликопи</div><div class="bal">$248.50</div></div>
    <div class="wc"><div class="r"><div class="av">🐋</div><div><div class="nm">DeepBlue.eth <span class="eg">EDGE 9.4</span></div><div class="ns">POLITICS · 4 мин</div></div><div class="roi">+312%</div></div>
      <div class="meta"><span>P&L <b class="pos">+$38K</b></span><span>🔥 <b>847</b></span><span>📈 <b class="pos">+24%</b></span></div></div>
    <button class="btn">Копировать</button>
    <div class="nav"><span class="on">🐋</span><span>📈</span><span>👛</span><span>☰</span></div>
  </div><div class="label"><span class="dot" style="background:#22e0d6"></span>Cyber / Cyan</div><div class="desc">Бирюза + почти чёрный. Хай-тек, «терминал из будущего».</div></div>

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

e822e64feat(theme): multi color themes via data-accent layer (green default + ocean/nebula/cyber)12 days ago
Show last diff