https://www.pandoraburo.ru/barter
Бартер
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пандора CRM</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin" />
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
/* ═══════════ ПЕРЕМЕННЫЕ (светлая, контрастная, БЕЗ свечения) ═══════════ */
#pd-root{
--bg:#f2f2f4; --panel:#ffffff; --panel2:#fafafb; --card:#ffffff;
--txt:#1a1a1e; --txt-strong:#0d0d11; --dim:#52525a; --muted:#6e6e78;
--pink:#c2185b; --green:#2e7d32; --gold:#a36a00; --orange:#d84e00;
--violet:#5e35b1; --red:#c62828; --blue:#1565c0;
--line:#d7d7dd; --line-strong:#b8b8c2;
--shadow:0 1px 3px rgba(20,20,30,.08),0 1px 2px rgba(20,20,30,.05);
--fd:'Unbounded','Arial Black',sans-serif; --fb:'Inter',system-ui,sans-serif; --fm:'JetBrains Mono',monospace;
}
#pd-root *,#pd-root *::before,#pd-root *::after{box-sizing:border-box;margin:0;padding:0}
#pd-root{font-family:var(--fb);background:var(--bg);color:var(--txt);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased}
/* САЙДБАР */
#pd-root .sidebar{position:fixed;left:0;top:0;bottom:0;width:288px;z-index:50;background:#fff;border-right:2px solid var(--line-strong);overflow-y:auto;overflow-x:hidden;padding-bottom:30px}
#pd-root .logo{padding:22px 20px 18px;font-size:1.5rem;font-weight:800;color:var(--txt-strong);font-family:var(--fd);border-bottom:3px solid var(--pink)}
#pd-root .logo .crm{font-size:.8rem;font-weight:700;color:var(--pink);margin-left:6px;letter-spacing:3px}
#pd-root .nav-section{padding:20px 20px 8px;font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
#pd-root .ns-pink{color:var(--pink)} #pd-root .ns-gold{color:var(--gold)} #pd-root .ns-green{color:var(--green)}
#pd-root .ns-violet{color:var(--violet)} #pd-root .ns-orange{color:var(--orange)} #pd-root .ns-blue{color:var(--blue)}
#pd-root .nav-link{display:block;margin:4px 12px;padding:11px 14px;text-decoration:none;font-size:.92rem;font-weight:600;border-radius:9px;border:1px solid transparent;transition:background .18s,color .18s;cursor:pointer;color:#2a2a30}
#pd-root .nav-link:hover{background:#f0f0f4;border-color:var(--line);color:var(--txt-strong)}
#pd-root .nav-link.active{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}
#pd-root .nav-link .badge-count{margin-left:auto;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--pink);color:#fff;min-width:22px;text-align:center}
#pd-root .nav-link.active .badge-count{background:#fff;color:var(--pink)}
/* ОСНОВНАЯ ОБЛАСТЬ */
#pd-root .main-content{margin-left:288px;min-height:100vh;padding:0 26px 60px}
#pd-root .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 4px;margin-bottom:8px;background:var(--bg);border-bottom:2px solid var(--line-strong)}
#pd-root .breadcrumbs{font-size:.95rem;font-weight:800;color:var(--txt-strong)}
#pd-root .user-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ВКЛАДКИ */
#pd-root .tc{display:none;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:28px;margin-bottom:22px;box-shadow:var(--shadow)}
#pd-root .tc.act{display:block}
#pd-root #fc-w h1{margin:0 0 1.4rem;font-size:1.55rem;font-weight:800;color:var(--txt-strong);font-family:var(--fd);padding-bottom:12px;border-bottom:3px solid var(--pink)}
#pd-root .gold{color:var(--gold)} #pd-root .success{color:var(--green)} #pd-root .err{color:var(--red)}
#pd-root .ok{color:var(--green)} #pd-root .warn{color:var(--orange)}
/* КНОПКИ */
#pd-root .btn{padding:.65rem 1.2rem;border:none;border-radius:9px;font-size:.92rem;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(90deg,var(--orange),var(--pink));transition:filter .2s,transform .15s;font-family:var(--fb)}
#pd-root .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
#pd-root .btn-s{padding:.35rem .7rem;font-size:.8rem;width:auto}
#pd-root .btn-secondary{background:#5a5a66} #pd-root .btn-green{background:linear-gradient(90deg,#2e7d32,#1b5e20)}
#pd-root .btn-o{background:#fff;color:var(--gold);border:2px solid var(--gold)} #pd-root .btn-o:hover{background:#fdf6e8}
/* СТАТ-КАРТОЧКИ */
#pd-root .stat-card{background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:18px;box-shadow:var(--shadow);border-top:4px solid var(--line-strong)}
#pd-root .stat-card .label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
#pd-root .stat-card .value{font-family:var(--fd);font-size:1.5rem;font-weight:800;color:var(--txt-strong)}
#pd-root .stat-card.gold .value{color:var(--gold)} #pd-root .stat-card.green .value{color:var(--green)}
#pd-root .stat-card.violet .value{color:var(--violet)} #pd-root .stat-card.pink .value{color:var(--pink)}
#pd-root .stat-card.red .value{color:var(--red)} #pd-root .stat-card.blue .value{color:var(--blue)}
#pd-root .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
/* ДАШБОРД */
#pd-root .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:20px}
#pd-root .dash-card{background:var(--panel);border-radius:14px;padding:20px;border:1px solid var(--line-strong);box-shadow:var(--shadow);border-top:4px solid var(--line-strong)}
#pd-root .dash-card h3{margin:0 0 14px;font-size:.82rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--line)}
#pd-root .dc-gold h3{color:var(--gold)} #pd-root .dc-gold{border-top-color:var(--gold)}
#pd-root .dc-pink h3{color:var(--pink)} #pd-root .dc-pink{border-top-color:var(--pink)}
#pd-root .dc-green h3{color:var(--green)} #pd-root .dc-green{border-top-color:var(--green)}
#pd-root .dc-violet h3{color:var(--violet)} #pd-root .dc-violet{border-top-color:var(--violet)}
#pd-root .dash-card .metric{font-size:2rem;font-weight:800;margin-bottom:6px;font-family:var(--fd)}
#pd-root .dc-gold .metric{color:var(--gold)} #pd-root .dc-pink .metric{color:var(--pink)}
#pd-root .dc-green .metric{color:var(--green)} #pd-root .dc-violet .metric{color:var(--violet)}
#pd-root .dash-card .sub-metric{font-size:.85rem;color:var(--dim)}
#pd-root .dash-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem}
#pd-root .dash-row:last-child{border-bottom:none}
#pd-root .dash-row .k{color:var(--dim);font-weight:600}
#pd-root .dash-row .v{color:var(--txt-strong);font-weight:800;font-family:var(--fm)}
/* ОБЩЕЕ: таблицы, бейджи, модалки, тост (используют все блоки) */
#pd-root .table-wrap{background:#fff;border:1px solid var(--line-strong);border-radius:14px;overflow-x:auto;box-shadow:var(--shadow)}
#pd-root .wh-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:820px}
#pd-root .wh-table thead th{background:var(--panel2);padding:14px 16px;text-align:left;font-weight:800;color:var(--txt-strong);font-size:.75rem;text-transform:uppercase;border-bottom:3px solid var(--line-strong);white-space:nowrap}
#pd-root .wh-table thead th.num{text-align:right}
#pd-root .wh-table tbody td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
#pd-root .wh-table tbody td.num{text-align:right;font-family:var(--fm);font-weight:600}
#pd-root .wh-table tbody tr:hover{background:#f6f2fb}
#pd-root .wh-table tbody tr:last-child td{border-bottom:none}
#pd-root .status-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;white-space:nowrap}
#pd-root .status-badge .dot{width:9px;height:9px;border-radius:50%}
#pd-root .status-badge.active{color:var(--green)} #pd-root .status-badge.active .dot{background:var(--green)}
#pd-root .status-badge.vip{color:var(--gold)} #pd-root .status-badge.vip .dot{background:var(--gold)}
#pd-root .status-badge.inactive{color:var(--muted)} #pd-root .status-badge.inactive .dot{background:var(--muted)}
#pd-root .status-badge.ok{color:var(--green)} #pd-root .status-badge.ok .dot{background:var(--green)}
#pd-root .status-badge.low{color:var(--gold)} #pd-root .status-badge.low .dot{background:var(--gold)}
#pd-root .status-badge.out{color:var(--red)} #pd-root .status-badge.out .dot{background:var(--red)}
#pd-root .icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;font-size:.85rem;background:#fff;color:var(--txt);transition:all .15s}
#pd-root .icon-btn:hover{transform:translateY(-2px)}
#pd-root .icon-btn.edit:hover{background:var(--violet);color:#fff} #pd-root .icon-btn.del:hover{background:var(--red);color:#fff}
#pd-root .icon-btn.in:hover{background:var(--green);color:#fff} #pd-root .icon-btn.out:hover{background:var(--orange);color:#fff}
#pd-root .modal-overlay{position:fixed;inset:0;background:rgba(20,20,30,.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
#pd-root .modal-overlay.active{display:flex}
#pd-root .modal{background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:32px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(20,20,30,.25)}
#pd-root .modal.wide{max-width:720px}
#pd-root .modal h2{font-family:var(--fd);font-size:1.35rem;margin-bottom:24px;color:var(--txt-strong)}
#pd-root .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#pd-root .form-group{margin-bottom:16px}
#pd-root .form-group label{display:block;margin-bottom:6px;font-weight:700;color:var(--txt);font-size:.85rem}
#pd-root .form-group label .req{color:var(--pink)}
#pd-root .form-group input,#pd-root .form-group select,#pd-root .form-group textarea{width:100%;padding:10px 12px;background:#fff;border:2px solid var(--line-strong);border-radius:8px;color:var(--txt);font-size:.92rem;font-family:var(--fb);outline:none;transition:border-color .2s}
#pd-root .form-group input:focus,#pd-root .form-group select:focus{border-color:var(--violet)}
#pd-root .modal-actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}
#pd-root .toast{position:fixed;bottom:24px;right:24px;background:var(--green);color:#fff;padding:14px 24px;border-radius:10px;font-weight:700;font-size:.9rem;transform:translateY(100px);opacity:0;transition:all .3s ease;z-index:2000}
#pd-root .toast.show{transform:translateY(0);opacity:1}
#pd-root .toast.error{background:var(--red)}
#pd-root .ib{background:#eef7ee;border-left:4px solid var(--green);border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.88rem}
@media(max-width:860px){
#pd-root .sidebar{position:static;width:100%;height:auto;overflow:visible;border-right:none;border-bottom:2px solid var(--line-strong)}
#pd-root .main-content{margin-left:0;padding:0 14px 40px}
#pd-root .form-row{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div id="pd-root">
<aside class="sidebar">
<div class="logo">Пандора<span class="crm">CRM</span></div>
<nav id="main-nav">
<div class="nav-section ns-pink">CRM-система</div>
<a class="nav-link active" data-view="dash">? Дашборд</a>
</nav>
</aside>
<main class="main-content">
<header class="topbar">
<div class="breadcrumbs" id="breadcrumbs">Пандора CRM / Дашборд</div>
<div class="user-actions"><span style="font-size:.8rem;color:var(--muted);font-weight:700">Блок 1: Ядро</span></div>
</header>
<div id="fc-w">
<div id="fc-dash" class="tc act">
<h1>Приборная панель <span class="gold">бизнеса</span></h1>
<div class="stats-grid">
<div class="stat-card gold"><div class="label">Выручка (закрытые)</div><div class="value" id="d-rev">0 ₽</div></div>
<div class="stat-card violet"><div class="label">Прогноз выручки</div><div class="value" id="d-forecast">0 ₽</div></div>
<div class="stat-card pink"><div class="label">Клиентов</div><div class="value" id="d-clients">0</div></div>
<div class="stat-card red"><div class="label">Просрочено задач</div><div class="value" id="d-overdue">0</div></div>
<div class="stat-card blue"><div class="label">Стоимость склада</div><div class="value" id="d-stock">0 ₽</div></div>
</div>
<div class="dash-grid">
<div class="dash-card dc-gold"><h3>? Сделки</h3><div id="d-deals"></div></div>
<div class="dash-card dc-violet"><h3>✅ Задачи</h3><div id="d-tasks"></div></div>
<div class="dash-card dc-green"><h3>? Склад</h3><div id="d-wh"></div></div>
</div>
<div class="ib"><strong>Совет:</strong> данные подтягиваются из модулей автоматически. Добавляйте следующие блоки — дашборд оживёт.</div>
</div>
</div>
</main>
<div class="toast" id="main-toast"></div>
</div>
<script>
(function(){'use strict';
/* ═══════════ ЯДРО ═══════════ */
function $(id){return document.getElementById(id);}
function F(n){return new Intl.NumberFormat('ru-RU').format(Math.round(n));}
function todayISO(){var d=new Date();return d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2);}
function showToast(msg,isError){var t=$('main-toast');if(!t)return;t.textContent=msg;t.className='toast show'+(isError?' error':'');setTimeout(function(){t.className='toast';},3000);}
function getLS(key){try{var r=localStorage.getItem(key);return r?JSON.parse(r):[];}catch(e){return[];}}
/* Навигация */
function initNav(){var nav=$('main-nav');if(!nav)return;nav.addEventListener('click',function(e){var link=e.target.closest('.nav-link');if(!link)return;e.preventDefault();var all=nav.querySelectorAll('.nav-link');for(var i=0;i<all.length;i++)all[i].classList.remove('active');link.classList.add('active');var tcs=document.querySelectorAll('#fc-w .tc');for(var j=0;j<tcs.length;j++)tcs[j].classList.remove('act');var view=link.getAttribute('data-view');var t=link.getAttribute('data-t');var target=null;if(view==='dash'){target=$('fc-dash');$('breadcrumbs').textContent='Пандора CRM / Дашборд';}else if(t){target=$('fc-'+t);$('breadcrumbs').textContent='Пандора CRM / '+link.textContent;}if(target){target.classList.add('act');if(window.renderDashboard)renderDashboard();}window.scrollTo({top:0,behavior:'smooth'});});}
/* Дашборд (читает данные всех модулей) */
function renderDashboard(){
var deals=getLS('pandora_deals_v1'),clients=getLS('pandora_clients_v1'),tasks=getLS('pandora_tasks_v1'),wh=getLS('pandora_warehouse_v1');
var won=deals.filter(function(d){return d.stage==='won';});
var rev=won.reduce(function(s,d){return s+(d.amount||0);},0);
var forecast=deals.filter(function(d){return d.stage!=='won'&&d.stage!=='lost';}).reduce(function(s,d){return s+(d.amount||0)*(d.prob||0)/100;},0);
var overdue=tasks.filter(function(t){return t.dueDate&&t.dueDate<todayISO()&&t.status!=='done';}).length;
var stock=wh.reduce(function(s,p){return s+(p.qty||0)*(p.cost||0);},0);
$('d-rev').textContent=F(rev)+' ₽';$('d-forecast').textContent=F(forecast)+' ₽';
$('d-clients').textContent=clients.length;$('d-overdue').textContent=overdue;$('d-stock').textContent=F(stock)+' ₽';
$('d-deals').innerHTML='<div class="dash-row"><span class="k">Всего</span><span class="v">'+deals.length+'</span></div><div class="dash-row"><span class="k">Закрыто</span><span class="v">'+won.length+'</span></div>';
$('d-tasks').innerHTML='<div class="dash-row"><span class="k">Всего</span><span class="v">'+tasks.length+'</span></div><div class="dash-row"><span class="k">Просрочено</span><span class="v">'+overdue+'</span></div>';
var low=wh.filter(function(p){return p.qty<=p.minQty;}).length;
$('d-wh').innerHTML='<div class="dash-row"><span class="k">Позиций</span><span class="v">'+wh.length+'</span></div><div class="dash-row"><span class="k">Мало</span><span class="v">'+low+'</span></div>';
}
window.renderDashboard=renderDashboard;
/* [MODULE-BLOCKS] сюда добавляется JS следующих блоков */
function init(){initNav();renderDashboard();}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}
})();
</script>
</body>
</html>
2026-08-21T05:13:06Z
https://pandoraburo.ru/ssl/layouts/a9/8c8/4b7781a4db8477265eb51f31892.png
1592962
https://www.pandoraburo.ru/