<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Поликопи — новая структура</title>
<style>
:root{
--text:#9ca3af; --text-h:#f3f4f6; --bg:#16171d; --panel:#1f2028;
--border:#2e303a; --accent:#c084fc; --accent-bg:rgba(192,132,252,.15);
--green:#22c55e; --red:#ef4444; --muted:#6b7280;
--sans:system-ui,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0c0d12;color:var(--text);font-family:var(--sans);padding:32px 20px 60px;line-height:1.45}
h1{color:var(--text-h);font-size:24px;margin-bottom:4px}
.lead{color:var(--muted);margin-bottom:28px;font-size:14px}
h2{color:var(--text-h);font-size:16px;margin:34px 0 14px;display:flex;align-items:center;gap:8px}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--accent-bg);color:var(--accent)}
/* ---------- TREE ---------- */
.tree{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px 24px;font-size:14px;max-width:760px}
.tree ul{list-style:none;padding-left:22px;position:relative}
.tree>ul{padding-left:4px}
.tree li{position:relative;padding:5px 0}
.tree ul ul li::before{content:"";position:absolute;left:-14px;top:0;bottom:50%;border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:12px;border-radius:0 0 0 4px}
.tree ul ul li::after{content:"";position:absolute;left:-14px;top:50%;bottom:0;border-left:1px solid var(--border)}
.tree ul ul li:last-child::after{display:none}
.node{display:inline-flex;align-items:center;gap:8px}
.node b{color:var(--text-h)}
.ic{width:20px;text-align:center}
.badge{font-size:10.5px;padding:1px 7px;border-radius:6px;font-weight:600}
.b-keep{background:rgba(34,197,94,.15);color:var(--green)}
.b-tab{background:var(--accent-bg);color:var(--accent)}
.b-cut{background:rgba(239,68,68,.13);color:var(--red)}
.b-new{background:rgba(59,130,246,.16);color:#60a5fa}
.b-hidden{background:rgba(107,114,128,.18);color:#9ca3af}
.path{color:var(--muted);font-family:ui-monospace,Consolas,monospace;font-size:12px}
/* ---------- PHONES ---------- */
.phones{display:flex;gap:26px;flex-wrap:wrap;margin-top:8px}
.phone{width:300px;background:var(--bg);border:8px solid #000;border-radius:34px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;height:600px}
.pcap{text-align:center;color:var(--muted);font-size:12px;margin-top:8px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.brand{color:var(--text-h);font-weight:700;font-size:15px}
.wcta{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent);font-size:12px;padding:5px 11px;border-radius:20px;font-weight:600}
.screen{flex:1;overflow-y:auto;padding:14px 14px 8px}
.stitle{color:var(--text-h);font-size:18px;font-weight:700;margin-bottom:2px}
.ssub{color:var(--muted);font-size:12px;margin-bottom:14px}
.sorts{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.chip{font-size:11px;padding:5px 10px;border-radius:18px;border:1px solid var(--border);color:var(--text)}
.chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:12px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#7c3aed);flex-shrink:0}
.nm{color:var(--text-h);font-weight:600;font-size:14px}
.sm{color:var(--muted);font-size:11.5px}
.stat{margin-left:auto;text-align:right}
.pos{color:var(--green);font-weight:700;font-size:14px}
.neg{color:var(--red);font-weight:700;font-size:14px}
.copybtn{background:var(--accent);color:#0c0d12;border:none;font-weight:700;font-size:12px;padding:6px 13px;border-radius:18px}
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:4px;margin-bottom:14px}
.tab{flex:1;text-align:center;font-size:12.5px;padding:7px 0;border-radius:8px;color:var(--text)}
.tab.on{background:var(--accent);color:#0c0d12;font-weight:700}
.nav{display:flex;border-top:1px solid var(--border);background:var(--bg)}
.nav div{flex:1;text-align:center;padding:9px 0 11px;font-size:10.5px;color:var(--muted)}
.nav div.on{color:var(--accent)}
.nav .nic{font-size:19px;display:block;margin-bottom:2px}
.more-item{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid var(--border)}
.more-item .mi{font-size:20px}
.more-item .ml{color:var(--text-h);font-size:14px}
.more-item .ar{margin-left:auto;color:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 0;font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
</style>
</head>
<body>
<h1>Поликопи — предлагаемая структура</h1>
<p class="lead">Нижнее меню: 5 → 4 пункта. «Ещё»: 6 → 3. Копитрейд переезжает табами в «Мои сделки».</p>
<h2>🌳 Дерево меню</h2>
<div class="tree">
<ul>
<li><span class="node"><span class="ic">🐋</span><b>Leaders</b> <span class="path">/</span> <span class="badge b-keep">главная</span></span>
<ul><li><span class="node sm">тап по киту → подключить копирование (аллокация, лимиты)</span></li></ul>
</li>
<li><span class="node"><span class="ic">📈</span><b>Мои сделки</b> <span class="path">/portfolio</span> <span class="badge b-keep">nav</span></span>
<ul>
<li><span class="node"><b>Позиции</b> <span class="badge b-tab">таб</span></span></li>
<li><span class="node"><b>Подписки</b> <span class="badge b-tab">таб ← бывш. My Copies</span></span></li>
<li><span class="node"><b>История</b> <span class="badge b-tab">таб</span></span></li>
<li><span class="node"><b>P&L</b> <span class="badge b-tab">таб ← полный дашборд (KPI + графики)</span></span></li>
</ul>
</li>
<li><span class="node"><span class="ic">👛</span><b>Wallet</b> <span class="path">/wallet</span> <span class="badge b-new">↑ поднят в nav</span></span></li>
<li><span class="node"><span class="ic">☰</span><b>Ещё</b> <span class="path">/more</span> <span class="badge b-keep">nav</span></span>
<ul>
<li><span class="node"><span class="ic">🏆</span>Leaderboard <span class="path">/leaderboard</span> <span class="badge b-keep">оставить</span></span></li>
<li><span class="node sm" style="text-decoration:line-through">👛 Wallet</span> <span class="badge b-cut">убран — теперь внизу</span></li>
<li><span class="node"><span class="ic">⚙️</span>Settings <span class="path">/settings</span> <span class="badge b-keep">оставить</span></span></li>
<li><span class="node"><span class="ic">📖</span>Как это работает <span class="badge b-new">новое (опц.)</span></span></li>
<li><span class="node sm" style="text-decoration:line-through">🔔 Price Alerts · 📊 Screener · 📋 Copy Trading</span> <span class="badge b-cut">убрать</span></li>
</ul>
</li>
<li style="margin-top:10px"><span class="node sm">Контекстные (без пункта меню): <b style="color:var(--text-h)">MarketDetail</b> <span class="path">/market/:id</span>, <b style="color:var(--text-h)">WhaleProfile</b> <span class="path">/whale</span> <span class="badge b-keep">оставить</span></span></li>
<li><span class="node sm">Сироты: <span class="path">/signals /feed /search /whales /trade</span> <span class="badge b-cut">выпилить</span></span></li>
<li><span class="node sm">Приватное: <b style="color:var(--text-h)">Analytics</b> <span class="path">/analytics/*</span> <span class="badge b-hidden">за basic-auth</span></span></li>
</ul>
<div class="legend">
<span><span class="badge b-keep">оставить</span></span>
<span><span class="badge b-tab">таб в «Мои сделки»</span></span>
<span><span class="badge b-new">новое / поднято</span></span>
<span><span class="badge b-cut">убрать</span></span>
<span><span class="badge b-hidden">скрытое</span></span>
</div>
</div>
<h2>📱 Как выглядят экраны <span class="tag">тёмная тема · реальные цвета</span></h2>
<div class="phones">
<!-- LEADERS -->
<div>
<div class="phone">
<div class="topbar"><span class="brand">🐋 Поликопи</span><span class="wcta">$248.50</span></div>
<div class="screen">
<div class="stitle">Leaders</div>
<div class="ssub">Копируй умные деньги — выбери кита</div>
<div class="sorts"><span class="chip on">⭐ Quality</span><span class="chip">P&L</span><span class="chip">Win-rate</span><span class="chip">Volume</span></div>
<div class="card"><div class="row"><div class="av"></div><div><div class="nm">Silent Fox 🦊</div><div class="sm">PF 1.8 · WR 64% · 142 сделок</div></div><button class="copybtn">Копировать</button></div></div>
<div class="card"><div class="row"><div class="av"></div><div><div class="nm">Iron Whale 🐳</div><div class="sm">PF 1.5 · WR 58% · 89 сделок</div></div><button class="copybtn">Копировать</button></div></div>
<div class="card"><div class="row"><div class="av"></div><div><div class="nm">Night Owl 🦉</div><div class="sm">PF 1.4 · WR 55% · 210 сделок</div></div><button class="copybtn">Копировать</button></div></div>
</div>
<div class="nav">
<div class="on"><span class="nic">🐋</span>Leaders</div>
<div><span class="nic">📈</span>Мои сделки</div>
<div><span class="nic">👛</span>Wallet</div>
<div><span class="nic">☰</span>Ещё</div>
</div>
</div>
<div class="pcap">Leaders — главная</div>
</div>
<!-- MY TRADES with tabs -->
<div>
<div class="phone">
<div class="topbar"><span class="brand">📈 Мои сделки</span><span class="wcta">$248.50</span></div>
<div class="screen">
<div class="tabs" style="font-size:11px"><span class="tab">Позиции</span><span class="tab">Подписки</span><span class="tab">История</span><span class="tab on">P&L</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px">
<div class="card" style="margin:0;padding:10px"><div class="sm">Net P&L</div><div class="pos" style="font-size:18px">+$132.40</div><div class="sm" style="font-size:10px">реал +98 · плав +34</div></div>
<div class="card" style="margin:0;padding:10px"><div class="sm">Win-rate</div><div class="nm" style="font-size:18px">61%</div><div class="sm" style="font-size:10px">37W / 24L</div></div>
<div class="card" style="margin:0;padding:10px"><div class="sm">Profit Factor</div><div class="nm" style="font-size:18px">1.74</div><div class="sm" style="font-size:10px">ср.+$8 · ср.−$5</div></div>
<div class="card" style="margin:0;padding:10px"><div class="sm">Сделок</div><div class="nm" style="font-size:18px">61</div><div class="sm" style="font-size:10px">18 рынков</div></div>
</div>
<div class="card" style="padding:10px"><div class="sm" style="margin-bottom:6px">Кумулятивный P&L</div>
<svg viewBox="0 0 240 60" width="100%" height="56"><polygon points="0,52 0,46 40,40 80,42 120,28 160,20 200,12 240,6 240,52" fill="rgba(34,197,94,.15)"/><polyline points="0,46 40,40 80,42 120,28 160,20 200,12 240,6" fill="none" stroke="var(--green)" stroke-width="2"/></svg>
</div>
<div class="card" style="padding:10px"><div class="sm" style="margin-bottom:8px">Дневной P&L · 30д</div>
<div style="display:flex;align-items:center;gap:3px;height:44px">
<div style="flex:1;height:60%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:30%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:40%;background:var(--red);border-radius:2px"></div><div style="flex:1;height:80%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:25%;background:var(--red);border-radius:2px"></div><div style="flex:1;height:55%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:70%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:35%;background:var(--green);border-radius:2px"></div><div style="flex:1;height:45%;background:var(--red);border-radius:2px"></div><div style="flex:1;height:90%;background:var(--green);border-radius:2px"></div>
</div>
</div>
</div>
<div class="nav">
<div><span class="nic">🐋</span>Leaders</div>
<div class="on"><span class="nic">📈</span>Мои сделки</div>
<div><span class="nic">👛</span>Wallet</div>
<div><span class="nic">☰</span>Ещё</div>
</div>
</div>
<div class="pcap">Мои сделки — Подписки тут стали табом</div>
</div>
<!-- MORE -->
<div>
<div class="phone">
<div class="topbar"><span class="brand">☰ Ещё</span><span class="wcta">$248.50</span></div>
<div class="screen">
<div class="more-item"><span class="mi">🏆</span><span class="ml">Leaderboard</span><span class="ar">›</span></div>
<div class="more-item"><span class="mi">📖</span><span class="ml">Как это работает</span><span class="ar">›</span></div>
<div class="more-item"><span class="mi">⚙️</span><span class="ml">Settings</span><span class="ar">›</span></div>
<div style="margin-top:18px;padding:12px;border:1px dashed var(--red);border-radius:10px;color:var(--red);font-size:12px">Убрано: 👛 Wallet (теперь внизу) · 🔔 Price Alerts · 📊 Screener · 📋 Copy Trading</div>
</div>
<div class="nav">
<div><span class="nic">🐋</span>Leaders</div>
<div><span class="nic">📈</span>Мои сделки</div>
<div><span class="nic">👛</span>Wallet</div>
<div class="on"><span class="nic">☰</span>Ещё</div>
</div>
</div>
<div class="pcap">Ещё — почищено до 3 пунктов</div>
</div>
</div>
</body>
</html>
📜 Git History
6c47fa4chore: local Polikopi project home + Phase 1 redesign artifacts12 days ago
Show last diff
Loading...