counter-concept.html

<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',-apple-system,Roboto,Arial,sans-serif}
body{width:1480px;background:#070b14;color:#e8ecf4;padding:36px 40px}
h1{font-size:34px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,#22e06a,#7fd9ff,#ff5b7f);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:14px;color:#8a96b0;margin:6px 0 24px}
.sec{font-size:13px;font-weight:700;color:#7fd9ff;text-transform:uppercase;letter-spacing:1px;margin:6px 0 12px;display:flex;align-items:center;gap:8px}
/* ---- mode toggle ---- */
.toggle-wrap{display:flex;justify-content:center;margin-bottom:24px}
.toggle{display:flex;border-radius:16px;overflow:hidden;border:1px solid #243456;width:560px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toggle .half{flex:1;padding:18px 22px;text-align:center}
.toggle .copy{background:linear-gradient(160deg,#0e2a1c,#0a1a14)}
.toggle .fade{background:linear-gradient(160deg,#2a0e16,#140a10)}
.toggle .t{font-size:22px;font-weight:800}
.toggle .copy .t{color:#22e06a}.toggle .fade .t{color:#ff5b7f}
.toggle .d{font-size:12px;color:#9aa6c0;margin-top:4px}
.toggle .mid{display:flex;align-items:center;justify-content:center;width:54px;font-size:24px;background:#0a0f1a;color:#5b8a82}
/* ---- two panels ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.panel{border-radius:16px;padding:18px;border:1px solid #1e2a44}
.panel.copy{background:linear-gradient(165deg,#0c1c14,#0a1410);border-top:3px solid #22e06a}
.panel.fade{background:linear-gradient(165deg,#1c0c12,#14080c);border-top:3px solid #ff5b7f}
.panel h3{font-size:17px;margin-bottom:4px}
.panel .pd{font-size:12px;color:#9aa6c0;margin-bottom:14px}
.card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#0a0f1a;border:1px solid #182238;margin-bottom:10px}
.av{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.av.g{background:#103a26;border:1px solid #22e06a55}.av.r{background:#3a1018;border:1px solid #ff5b7f55}
.card .nm{font-weight:700;font-size:14px}
.card .mt{font-size:11px;color:#8a96b0;margin-top:2px}
.badge{margin-left:auto;text-align:right}
.badge .sc{font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace}
.sc.g{color:#22e06a}.sc.r{color:#ff5b7f}
.badge .lb{font-size:9px;color:#6a7690;text-transform:uppercase}
.act{font-size:11px;padding:3px 10px;border-radius:8px;font-weight:700;margin-top:4px;display:inline-block}
.act.buy{background:#103a26;color:#22e06a}.act.fade{background:#3a1018;color:#ff7a96}
/* ---- mechanics ---- */
.mech{display:flex;align-items:center;gap:18px;background:#0a0f1a;border:1px solid #182238;border-radius:14px;padding:18px 22px;margin-bottom:14px}
.mech .box{flex:1;text-align:center}
.mech .lab{font-size:11px;color:#8a96b0;text-transform:uppercase;letter-spacing:.5px}
.mech .val{font-size:20px;font-weight:800;margin-top:6px}
.mech .arrow{font-size:30px;color:#ff5b7f}
.yes{color:#22e06a}.no{color:#ff5b7f}
/* ---- risk cap ---- */
.riskbar{position:relative;height:54px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#3a1018 0%,#3a1018 20%,#0e2a1c 20%,#0e2a1c 80%,#3a1018 80%,#3a1018 100%);border:1px solid #243456;margin:10px 0}
.riskbar .zone{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-align:center;line-height:1.2}
.riskbar .z1{left:0;width:20%;color:#ff7a96}.riskbar .z2{left:20%;width:60%;color:#22e06a}.riskbar .z3{left:80%;width:20%;color:#ff7a96}
.scale{display:flex;justify-content:space-between;font-size:11px;color:#6a7690;font-family:'JetBrains Mono',monospace;margin-top:4px}
/* ---- columns ---- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.note{font-size:12.5px;line-height:1.6;color:#c4ccdb}
.note b{color:#7fd9ff}
ul{list-style:none;margin-top:8px}li{font-size:12.5px;padding:5px 0 5px 22px;position:relative;line-height:1.45}
li::before{content:'▸';position:absolute;left:4px;color:#7fd9ff}
.rec{background:#0e1d12;border:1px solid #22e06a44;border-radius:8px;padding:3px 8px;font-size:10px;color:#22e06a;font-weight:700;margin-left:6px}
/* themes row */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:10px}
.th{border-radius:12px;padding:14px 12px;text-align:center;border:1px solid #243456}
.th .ic{font-size:26px}.th .nm{font-size:13px;font-weight:700;margin-top:6px}.th .d{font-size:10.5px;color:#8a96b0;margin-top:4px}
.th.star{background:linear-gradient(160deg,#10121e,#0a0a14)}
.th.dn{background:linear-gradient(160deg,#101a2a,#0a1018)}
.th.bull{background:linear-gradient(160deg,#0e1d12,#1c0c12)}
.th.hunt{background:linear-gradient(160deg,#0a1820,#14080c)}
.th.mir{background:linear-gradient(160deg,#141022,#0a0a14)}
.pillrec{display:inline-block;background:#22e06a;color:#06120a;font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;margin-top:6px}
</style></head><body>

<h1>🔄 Counter-trading — концепт «Двух сторон»</h1>
<div class="sub">Как это будет выглядеть и работать · обсуждаем ДО кода · 23 июня 2026</div>

<div class="sec">① Переключатель режима — одна кнопка переворачивает весь экран</div>
<div class="toggle-wrap"><div class="toggle">
  <div class="half copy"><div class="t">☀️ COPY</div><div class="d">копируешь лучших китов · 1-в-1</div></div>
  <div class="mid">⇄</div>
  <div class="half fade"><div class="t">🌑 FADE</div><div class="d">ставишь ПРОТИВ худших · зеркально</div></div>
</div></div>

<div class="sec">② Один экран — два состояния (тема и список переворачиваются)</div>
<div class="grid2">
  <div class="panel copy"><h3>☀️ Copy Mode</h3><div class="pd">Светлая тема · сортировка по EDGE ↓ · топ-киты сверху</div>
    <div class="card"><div class="av g">🦈</div><div><div class="nm">Стальной Бульдозер</div><div class="mt">WR 71% · Sharpe 1.4 · DD 9%</div></div><div class="badge"><div class="sc g">EDGE 8.7</div><div class="lb">copy</div><span class="act buy">КОПИРОВАТЬ →</span></div></div>
    <div class="card"><div class="av g">🎯</div><div><div class="nm">Мудрый Оракул</div><div class="mt">WR 64% · Sharpe 1.1 · DD 14%</div></div><div class="badge"><div class="sc g">EDGE 7.2</div><div class="lb">copy</div><span class="act buy">КОПИРОВАТЬ →</span></div></div>
  </div>
  <div class="panel fade"><h3>🌑 Fade Mode <span style="font-size:12px;color:#ff7a96">(тёмная сторона)</span></h3><div class="pd">Тёмная тема · сортировка по EDGE ↑ · ХУДШИЕ сверху = цели для фейда</div>
    <div class="card"><div class="av r">💀</div><div><div class="nm">Фартовый Лонгшот</div><div class="mt">WR 28% · сливает · DD 61%</div></div><div class="badge"><div class="sc r">EDGE 1.3</div><div class="lb">fade target</div><span class="act fade">ФЕЙДИТЬ →</span></div></div>
    <div class="card"><div class="av r">🃏</div><div><div class="nm">Жадный Чалкоед</div><div class="mt">WR 33% · favorite-farmer · DD 48%</div></div><div class="badge"><div class="sc r">EDGE 2.1</div><div class="lb">fade target</div><span class="act fade">ФЕЙДИТЬ →</span></div></div>
  </div>
</div>

<div class="sec">③ Механика фейда — мы покупаем ОБРАТНЫЙ исход</div>
<div class="mech">
  <div class="box"><div class="lab">Таргет покупает</div><div class="val yes">YES @ 0.70</div></div>
  <div class="arrow">→ зеркало →</div>
  <div class="box"><div class="lab">Мы автоматически покупаем</div><div class="val no">NO @ 0.30</div></div>
  <div class="box" style="flex:1.4;text-align:left;border-left:1px solid #243456;padding-left:18px"><div class="note">Шортов на Polymarket нет. «Противоположная сторона» = купить <b>обратный токен</b>. Если таргет сливает — рынок чаще идёт против него → наш NO выигрывает. Твой конфиг (аллокация/лимиты) тот же, меняется только сторона.</div></div>
</div>

<div class="cols">
  <div>
    <div class="sec">④ Риск-кап (вопрос 2 — объясняю просто)</div>
    <div class="note">Проблема: если фейдить фаворита <b>YES @ 0.95</b>, то наш <b>NO @ 0.05</b> — это лотерейный билет: 95% времени теряем 5¢, редко срываем большой куш. Дёргано и рискованно. <b>Решение:</b> разрешаем фейд только когда цена таргета в «здоровой» зоне.</div>
    <div class="riskbar">
      <div class="zone z1">🚫 блок<br>0–0.20</div>
      <div class="zone z2">✅ фейдим тут<br>0.20 – 0.80</div>
      <div class="zone z3">🚫 блок<br>0.80–1.0</div>
    </div>
    <div class="scale"><span>0.00</span><span>0.20</span><span>0.80</span><span>1.00</span></div>
    <div class="note" style="margin-top:8px">Крайние ставки (почти решённые рынки) пропускаем — там фейд бессмысленный. Порог настраиваемый.<span class="rec">моя рекомендация: 0.20–0.80</span></div>
  </div>
  <div>
    <div class="sec">⑤ Выходы (вопрос 3 — что советую)</div>
    <div class="note">Когда таргет закрывает свою позу — что делать с нашим встречным NO? Три варианта:</div>
    <ul>
      <li><b>Зеркалить выход</b> — таргет вышел из YES → мы продаём NO. <span class="rec">РЕКОМЕНДУЮ дефолтом</span></li>
      <li><b>Держать до резолюции</b> — игнорим его выход, ждём итог рынка (выше доходность, выше риск)</li>
      <li><b>Свои TP/SL</b> — закрываемся по своей цели прибыли/просадки, независимо от таргета</li>
    </ul>
    <div class="note" style="margin-top:6px">Почему зеркалить: таргет вышел — значит исчез сигнал, против которого мы играли. Держать «голую» ставку без причины = чистое казино. Дефолт безопасный, остальные — опционально в конфиге.</div>
  </div>
</div>

<div class="sec" style="margin-top:24px">⑥ Тема «противоположностей» (вопрос 4 — выбери вайб)</div>
<div class="themes">
  <div class="th star"><div class="ic">☀️🌑</div><div class="nm">Light / Dark Side</div><div class="d">«переходишь на тёмную сторону». Звёздные войны вайб</div><span class="pillrec">мой фаворит</span></div>
  <div class="th dn"><div class="ic">🌞🌙</div><div class="nm">День / Ночь</div><div class="d">плавная смена темы день→ночь при свитче</div></div>
  <div class="th bull"><div class="ic">🐂🐻</div><div class="nm">Bull / Bear</div><div class="d">за кита / против кита, классика трейдинга</div></div>
  <div class="th hunt"><div class="ic">🦈🎯</div><div class="nm">Hunt / Fade</div><div class="d">охотишься со стаей / стреляешь по слабым</div></div>
  <div class="th mir"><div class="ic">🪞☯</div><div class="nm">Mirror / Inverse</div><div class="d">флип-анимация, зеркальный переворот UI</div></div>
</div>

<div class="note" style="margin-top:20px;background:#0d1426;border:1px solid #243456;border-radius:12px;padding:16px 20px">
<b>⚙️ Порядок (как ты сказал — функционал сначала):</b> 1) рабочий фейд (тумблер + Fade-вкладка + инверсия в daemon + backend-поле <code>mode</code>) → 2) риск-кап → 3) выходы → <i>потом</i> геймификация/смена темы (Light/Dark Side анимация). Тема — это «обёртка» поверх готовой механики, безопасно добавить последней.
</div>

</body></html>
📜 Git History

162b229docs: counter-trading concept mockup (two-sides / fade mode)11 days ago
Show last diff