neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive dashboard KPI research 2026

Browse Source
This commit is contained in:
neo committed 2026-06-20 18:40:58 +05:00
commit 7ce84fc18e
2 files changed
+967
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+469
View File
@@ -0,0 +1,469 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROI24 — Живые цифры бизнеса</title>
<style>
/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-primary: #050505;
--bg-surface: #0f0f10;
--bg-card: #1a1a1c;
--border: #2a2a2e;
--border-hover: #444;
--text-primary: #f0f0f0;
--text-secondary: #a0a0a5;
--accent: #00ff9d; /* Green for money/profit */
--accent-dim: rgba(0, 255, 157, 0.15);
--error: #ff4d4d;
--warning: #ffc107;
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-main);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }
/* === LAYOUT === */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
section { padding: 80px 0; }
/* === NAVIGATION === */
nav {
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 32px; font-size: 0.9rem; color: var(--text-secondary); }
.btn {
padding: 12px 24px;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--accent);
color: #000;
}
.btn-primary:hover {
background: #00cc7d;
transform: translateY(-2px);
box-shadow: 0 10px 20px var(--accent-dim);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text-primary);
}
.btn-outline:hover {
border-color: var(--text-primary);
}
/* === HERO === */
.hero {
padding: 120px 0 80px;
text-align: center;
position: relative;
}
.hero h1 {
font-size: clamp(3rem, 8vw, 5.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.04em;
margin-bottom: 24px;
background: linear-gradient(to bottom, #ffffff, #a0a0a0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 40px;
}
.hero-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 60px;
}
/* === DASHBOARD PREVIEW (THE MONEY SHOT) === */
.dashboard-wrapper {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
margin-top: 40px;
position: relative;
overflow: hidden;
}
/* Glow effect behind dashboard */
.dashboard-wrapper::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.dash-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 1;
}
.dash-title { font-size: 1.1rem; font-weight: 700; }
.dash-badge {
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 100px;
background: var(--accent-dim);
color: var(--accent);
border: 1px solid rgba(0,255,157,0.2);
display: flex;
align-items: center;
gap: 6px;
}
.live-dot {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
/* Metrics Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.metric-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 20px;
border-radius: 12px;
transition: all 0.2s;
}
.metric-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.metric-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.metric-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; }
.metric-trend { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
.trend-up { color: var(--accent); }
.trend-down { color: var(--error); }
/* Chart Area */
.chart-area {
height: 200px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
gap: 12px;
}
.chart-bar {
flex: 1;
background: var(--border);
border-radius: 4px 4px 0 0;
transition: height 0.5s ease;
}
.chart-bar.highlight {
background: var(--accent);
box-shadow: 0 0 10px var(--accent-dim);
}
/* === FEATURES === */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-item h3 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.feature-item p { color: var(--text-secondary); }
/* === PRICING === */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.price-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
}
.price-card.featured {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(0,255,157,0.05) 0%, var(--bg-surface) 100%);
}
.price-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.price-amount { font-size: 2.5rem; font-weight: 800; margin-bottom: 24px; font-family: var(--font-mono); }
.price-period { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
.price-features { list-style: none; margin-bottom: 32px; flex-grow: 1; }
.price-features li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.price-features li::before {
content: '✓';
color: var(--accent);
font-weight: bold;
}
/* === FOOTER === */
footer {
border-top: 1px solid var(--border);
padding: 48px 0;
margin-top: 80px;
text-align: center;
color: var(--text-secondary);
font-size: 0.85rem;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.metrics-grid { grid-template-columns: 1fr 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.features { grid-template-columns: 1fr; }
.nav-links { display: none; }
}
</style>
</head>
<body>
<div class="container">
<!-- NAV -->
<nav>
<div class="logo">ROI<span>24</span></div>
<div class="nav-links">
<a href="#features">Возможности</a>
<a href="#pricing">Тарифы</a>
<a href="#demo">Демо</a>
</div>
<a href="#cta" class="btn btn-outline">Войти</a>
</nav>
<!-- HERO -->
<header class="hero">
<h1>Живые цифры<br>вашего бизнеса</h1>
<p>Подключаем 1С, банк и рекламу. Вы видите выручку, маржу и кассу каждое утро. Без бухгалтерских задержек и таблиц Excel.</p>
<div class="hero-actions">
<a href="#demo" class="btn btn-primary">Смотреть демо</a>
<a href="#pricing" class="btn btn-outline">Тарифы</a>
</div>
<!-- DASHBOARD PREVIEW -->
<div class="dashboard-wrapper" id="demo">
<div class="dash-header">
<div class="dash-title">Dashboard | Интернет-магазин</div>
<div class="dash-badge">
<div class="live-dot"></div> Live Sync
</div>
</div>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-label">Выручка (Сегодня)</div>
<div class="metric-value">124 500 ₽</div>
<div class="metric-trend trend-up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
+12.5%
</div>
</div>
<div class="metric-card">
<div class="metric-label">Маржа (Сегодня)</div>
<div class="metric-value">38 150 ₽</div>
<div class="metric-trend trend-up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
+8.2%
</div>
</div>
<div class="metric-card">
<div class="metric-label">Заказы (Всего)</div>
<div class="metric-value">47</div>
<div class="metric-trend trend-down">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
-2.1%
</div>
</div>
<div class="metric-card">
<div class="metric-label">Касса (Баланс)</div>
<div class="metric-value" style="color: var(--accent)">1 245 000 ₽</div>
<div class="metric-trend" style="color: var(--text-secondary)">
Обновлено 2 мин назад
</div>
</div>
</div>
<div class="chart-area" id="revenue-chart">
<!-- Bars injected via JS for animation -->
</div>
</div>
</header>
<!-- FEATURES -->
<section id="features">
<div class="features">
<div class="feature-item">
<h3>Автообновление</h3>
<p>Данные синхронизируются с 1С, банками и рекламными кабинетами каждые 4 часа. Не нужно ждать отчётов в понедельник.</p>
</div>
<div class="feature-item">
<h3>Все каналы в одном месте</h3>
<p>Сравнивайте ROI Директа, ВКонтакте и маркетплейсов на одном экране. Видно, какой канал приносит деньги прямо сейчас.</p>
</div>
<div class="feature-item">
<h3>AI-прогнозы</h3>
<p>Система анализирует тренды и предсказывает выручку на завтра. Получайте алерты, если что-то идёт не так.</p>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing">
<h2 style="font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px;">Тарифы</h2>
<div class="pricing-grid">
<div class="price-card">
<div class="price-name">Старт</div>
<div class="price-amount">10 000 ₽<span class="price-period">/мес</span></div>
<ul class="price-features">
<li>1 источник данных (1С или Банк)</li>
<li>3 дашборда</li>
<li>Обновление 1 раз в день</li>
<li>Поддержка по Email</li>
</ul>
<a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Начать</a>
</div>
<div class="price-card featured">
<div class="price-name">Бизнес</div>
<div class="price-amount">25 000 ₽<span class="price-period">/мес</span></div>
<ul class="price-features">
<li>До 4 источников (1С, Банк, CRM, Рекламы)</li>
<li>10 дашбордов</li>
<li>Обновление каждые 4 часа</li>
<li>AI-прогнозы и алерты</li>
<li>Выгрузка в PDF/Excel</li>
</ul>
<a href="#" class="btn btn-primary" style="width:100%; justify-content:center;">Попробовать</a>
</div>
<div class="price-card">
<div class="price-name">Под ключ</div>
<div class="price-amount">50 000 ₽<span class="price-period">/мес</span></div>
<ul class="price-features">
<li>Все источники + Маркетплейсы</li>
<li>Кастомные метрики под бизнес</li>
<li>Обновление каждые 30 минут</li>
<li>Выделенный менеджер</li>
</ul>
<a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Связаться</a>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta" style="text-align: center;">
<h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 24px;">Перестаньте управлять "на ощупь"</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 1.1rem;">
Подключим дашборд за 3 дня. Первые 7 дней — бесплатно.
</p>
<a href="https://t.me/" class="btn btn-primary" style="padding: 16px 32px; font-size: 1.1rem;">
Обсудить проект в Telegram
</a>
</section>
</div>
<footer>
<div class="container">
<p>ROI24 © 2026. Все права защищены.</p>
<p style="margin-top: 8px; opacity: 0.5;">Не является публичной офертой. ИНН 0000000000</p>
</div>
</footer>
<script>
// === Simple Chart Animation ===
document.addEventListener('DOMContentLoaded', () => {
const chartContainer = document.getElementById('revenue-chart');
const barCount = 12;
const heights = [40, 55, 45, 60, 70, 65, 80, 90, 85, 95, 88, 100]; // Mock data
// Generate bars
heights.forEach((h, i) => {
const bar = document.createElement('div');
bar.className = 'chart-bar' + (i === heights.length - 1 ? ' highlight' : '');
bar.style.height = '0%'; // Start at 0
chartContainer.appendChild(bar);
// Animate on load
setTimeout(() => {
bar.style.height = h + '%';
}, 100 + (i * 50));
});
// Simple Hover Effect for Metric Cards
const cards = document.querySelectorAll('.metric-card');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.borderColor = 'var(--accent)';
});
card.addEventListener('mouseleave', () => {
card.style.borderColor = 'var(--border)';
});
});
});
</script>
</body>
</html>