Rule-based рекомендации для каждой вкладки дашборда
This commit is contained in:
neo committed
1 parent
6ce58406c6
commit
7dcfdfa033
1 file changed
+211
+211
@@ -498,6 +498,109 @@ h1 {
|
||||
position: relative; z-index: 1;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* ── Rule-Based Recommendations ── */
|
||||
.dash-recs {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 20px;
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
.dash-recs-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.dash-recs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.dash-rec-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dash-rec-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.dash-rec-warn::before { background: var(--amber); }
|
||||
.dash-rec-ok::before { background: var(--accent); }
|
||||
.dash-rec-danger::before { background: var(--red); }
|
||||
.dash-rec-info::before { background: var(--blue); }
|
||||
|
||||
.dash-rec-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.dash-rec-warn .dash-rec-dot { background: var(--amber); }
|
||||
.dash-rec-ok .dash-rec-dot { background: var(--accent); }
|
||||
.dash-rec-danger .dash-rec-dot { background: var(--red); }
|
||||
.dash-rec-info .dash-rec-dot { background: var(--blue); }
|
||||
|
||||
.dash-rec-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.dash-rec-label {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.dash-rec-desc {
|
||||
color: var(--text-sec);
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dash-rec-action {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--accent);
|
||||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dash-rec-item:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.dash-recs {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.dash-rec-item {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.dash-rec-action {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
[data-theme="light"] .dash-mini-desc {
|
||||
color: #000;
|
||||
}
|
||||
@@ -1308,6 +1411,42 @@ h1 {
|
||||
<div class="dash-mini-desc">За 30 дней</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rule-Based Recommendations -->
|
||||
<div class="dash-recs">
|
||||
<div class="dash-recs-title">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||||
</svg>
|
||||
Рекомендации
|
||||
</div>
|
||||
<div class="dash-recs-list">
|
||||
<div class="dash-rec-item dash-rec-warn">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">CAC вырос на 23%</div>
|
||||
<div class="dash-rec-desc">Перерасход бюджета в Яндекс.Директ</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">Смотреть →</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-ok">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">ROI 3.1x — в норме</div>
|
||||
<div class="dash-rec-desc">Выше порога 2.5x</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">OK</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-info">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">CPL 890₽ — ниже рынка</div>
|
||||
<div class="dash-rec-desc">Увеличьте ставки для роста объёма</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">+20%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Конверсии -->
|
||||
@@ -1354,6 +1493,42 @@ h1 {
|
||||
<div class="dash-mini-desc">Заявок → квалифицированных</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rule-Based Recommendations -->
|
||||
<div class="dash-recs">
|
||||
<div class="dash-recs-title">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||||
</svg>
|
||||
Рекомендации
|
||||
</div>
|
||||
<div class="dash-recs-list">
|
||||
<div class="dash-rec-item dash-rec-ok">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">Конверсия 3.2%</div>
|
||||
<div class="dash-rec-desc">В норме для вашей ниши</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">OK</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-warn">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">ВКонтакте: CTR упал</div>
|
||||
<div class="dash-rec-desc">Реклама устарела — обновите креативы</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">ВК →</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-danger">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">Квалификация 24.5%</div>
|
||||
<div class="dash-rec-desc">Низкое качество лидов — проверьте источники</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">! Важно</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: LTV -->
|
||||
@@ -1409,6 +1584,42 @@ h1 {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Rule-Based Recommendations -->
|
||||
<div class="dash-recs">
|
||||
<div class="dash-recs-title">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||||
</svg>
|
||||
Рекомендации
|
||||
</div>
|
||||
<div class="dash-recs-list">
|
||||
<div class="dash-rec-item dash-rec-danger">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">LTV/CAC 31:1 — аномально</div>
|
||||
<div class="dash-rec-desc">Перепроверьте данные: возможна ошибка расчёта</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">Проверить</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-ok">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">Повторные продажи +15%</div>
|
||||
<div class="dash-rec-desc">Клиенты возвращаются — отлично</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">OK</div>
|
||||
</div>
|
||||
<div class="dash-rec-item dash-rec-info">
|
||||
<div class="dash-rec-dot"></div>
|
||||
<div class="dash-rec-text">
|
||||
<div class="dash-rec-label">LTV 45 200₽</div>
|
||||
<div class="dash-rec-desc">Выше среднего по отрасли на 12%</div>
|
||||
</div>
|
||||
<div class="dash-rec-action">→</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── CALLS24 BANNER ── -->
|
||||
<section class="calls24-banner">
|
||||
<div class="calls24-inner">
|
||||
|
||||
Reference in new issue
Block a user