prombez-analytics/index.html

740 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ИИ-агент — Аналитика производственной безопасности</title>
<style>
:root {
--ink: #0F1218;
--blue: #2563EB;
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--green: #059669;
--green-50: #ECFDF5;
--red: #DC2626;
--red-50: #FEF2F2;
--amber: #D97706;
--amber-50: #FFFBEB;
--white: #FFFFFF;
--gray-50: #F9FAFB;
--gray-100: #F2F4F7;
--gray-200: #E5E7EB;
--gray-500: #5B6573;
--gray-600: #4B5563;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
color: var(--ink);
background: var(--white);
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* Hero */
.hero {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: var(--white);
padding: 100px 0 80px;
}
.hero-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
color: var(--white);
padding: 6px 16px;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
margin-bottom: 24px;
backdrop-filter: blur(10px);
}
.hero h1 {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
max-width: 700px;
margin-bottom: 20px;
}
.hero p {
font-size: 19px;
color: rgba(255,255,255,0.8);
max-width: 560px;
margin-bottom: 36px;
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-primary {
background: var(--white);
color: #1D4ED8;
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,0.4);
}
.btn-outline:hover {
border-color: var(--white);
}
/* Section */
.section {
padding: 80px 0;
}
.section-label {
display: inline-block;
background: var(--blue-50);
color: var(--blue);
padding: 4px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.section h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.2;
}
.section-subtitle {
font-size: 17px;
color: var(--gray-500);
max-width: 600px;
margin-bottom: 40px;
}
/* Quick Links */
.quick-links {
background: var(--gray-50);
}
.quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.quick-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 28px;
text-decoration: none;
color: var(--ink);
transition: border-color 0.2s, box-shadow 0.2s;
display: flex;
align-items: flex-start;
gap: 16px;
}
.quick-card:hover {
border-color: var(--blue);
box-shadow: 0 4px 16px rgba(37,99,235,0.08);
}
.quick-card-icon {
font-size: 28px;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.quick-card-icon.blue { background: var(--blue-50); }
.quick-card-icon.green { background: var(--green-50); }
.quick-card-icon.red { background: var(--red-50); }
.quick-card h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 4px;
}
.quick-card p {
font-size: 14px;
color: var(--gray-500);
}
/* Blocks */
.blocks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
.block-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 32px;
transition: border-color 0.2s;
}
.block-card:hover {
border-color: var(--blue-100);
}
.block-number {
font-size: 13px;
font-weight: 700;
color: var(--blue);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.block-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.block-card ul {
list-style: none;
}
.block-card li {
font-size: 15px;
color: var(--gray-600);
padding: 6px 0;
padding-left: 20px;
position: relative;
}
.block-card li::before {
content: '';
position: absolute;
left: 0;
top: 13px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blue);
}
/* Steps */
.steps {
display: grid;
gap: 16px;
counter-reset: step;
}
.step {
display: flex;
gap: 20px;
align-items: flex-start;
}
.step-num {
width: 44px;
height: 44px;
background: var(--blue);
color: var(--white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
flex-shrink: 0;
counter-increment: step;
}
.step-num::before {
content: counter(step);
}
.step-text h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 4px;
}
.step-text p {
font-size: 15px;
color: var(--gray-500);
}
/* Categories */
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.cat-tag {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.cat-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.cat-dot.d1 { background: #2563EB; }
.cat-dot.d2 { background: #7C3AED; }
.cat-dot.d3 { background: #DC2626; }
.cat-dot.d4 { background: #EA580C; }
.cat-dot.d5 { background: #D97706; }
.cat-dot.d6 { background: #059669; }
.cat-dot.d7 { background: #0891B2; }
.cat-dot.d8 { background: #4F46E5; }
.cat-dot.d9 { background: #DB2777; }
/* Dashboard Preview */
.dash-preview {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 16px;
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.dash-metric {
text-align: center;
padding: 20px;
background: var(--white);
border-radius: 10px;
}
.dash-metric .value {
font-size: 36px;
font-weight: 800;
color: var(--blue);
line-height: 1;
margin-bottom: 6px;
}
.dash-metric .label {
font-size: 14px;
color: var(--gray-500);
}
.dash-chart {
grid-column: 1 / -1;
background: var(--white);
border-radius: 10px;
padding: 24px;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.chart-bars {
display: flex;
align-items: flex-end;
gap: 16px;
height: 160px;
}
.chart-bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.chart-bar {
width: 40px;
border-radius: 6px 6px 0 0;
transition: height 0.3s;
}
.chart-bar-label {
font-size: 11px;
color: var(--gray-500);
font-weight: 600;
max-width: 60px;
text-align: center;
line-height: 1.2;
}
/* CTA */
.cta {
background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
color: var(--white);
text-align: center;
padding: 80px 0;
}
.cta h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
}
.cta p {
color: rgba(255,255,255,0.7);
margin-bottom: 28px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.cta .btn {
background: var(--white);
color: #1D4ED8;
}
/* Footer */
.footer {
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
padding: 32px 0;
text-align: center;
}
.footer p {
font-size: 14px;
color: var(--gray-500);
}
/* Mobile */
@media (max-width: 640px) {
.hero { padding: 64px 0 48px; }
.hero h1 { font-size: 32px; }
.hero p { font-size: 16px; }
.section { padding: 48px 0; }
.section h2 { font-size: 26px; }
.blocks-grid { grid-template-columns: 1fr; }
.dash-preview { padding: 24px; }
.dash-metric .value { font-size: 28px; }
}
</style>
</head>
<body>
<!-- Hero -->
<header class="hero">
<div class="container">
<span class="hero-badge">AI Analytics</span>
<h1>ИИ-агент аналитики производственной безопасности</h1>
<p>Автоматический сбор, анализ и визуализация результатов внутренних проверок. Контроль выполнения плана и формирование управленческих отчётов.</p>
<div class="hero-actions">
<a href="#quick" class="btn btn-primary">Инструменты</a>
<a href="#blocks" class="btn btn-outline">Возможности</a>
<a href="#steps" class="btn btn-outline">Как работать</a>
</div>
</div>
</header>
<!-- Quick Links -->
<section id="quick" class="section quick-links">
<div class="container">
<span class="section-label">Инструменты</span>
<h2>Быстрый доступ</h2>
<p class="section-subtitle">Основные рабочие инструменты команды</p>
<div class="quick-grid">
<a href="#" class="quick-card">
<span class="quick-card-icon blue">📋</span>
<div>
<h3>Google Forms — проверки</h3>
<p>Заполнить форму по результатам проверки</p>
</div>
</a>
<a href="#" class="quick-card">
<span class="quick-card-icon green">📊</span>
<div>
<h3>Google Sheets — данные</h3>
<p>Просмотр и выгрузка всех записей проверок</p>
</div>
</a>
<a href="#" class="quick-card">
<span class="quick-card-icon green">📅</span>
<div>
<h3>План проверок</h3>
<p>Таблица плановых показателей по подразделениям</p>
</div>
</a>
<a href="#" class="quick-card">
<span class="quick-card-icon blue">🤖</span>
<div>
<h3>Дашборд ИИ-агента</h3>
<p>Интерактивная аналитика и визуализация</p>
</div>
</a>
<a href="#" class="quick-card">
<span class="quick-card-icon green">📄</span>
<div>
<h3>Месячный отчёт</h3>
<p>Автоматическая аналитическая справка (PDF)</p>
</div>
</a>
<a href="#" class="quick-card">
<span class="quick-card-icon red">📖</span>
<div>
<h3>Инструкция</h3>
<p>Руководство по работе с системой</p>
</div>
</a>
</div>
</div>
</section>
<!-- Functional Blocks -->
<section id="blocks" class="section">
<div class="container">
<span class="section-label">Функционал</span>
<h2>6 аналитических блоков</h2>
<p class="section-subtitle">Что умеет ИИ-агент и какую информацию выдаёт автоматически</p>
<div class="blocks-grid">
<div class="block-card">
<span class="block-number">Блок №1</span>
<h3>Анализ нарушений</h3>
<ul>
<li>Общее количество выявленных нарушений</li>
<li>Количество по каждому виду нарушений</li>
<li>Доля каждого вида</li>
<li>Распределение по подразделениям и регионам</li>
<li>Рейтинг подразделений (лучшие / худшие)</li>
<li>Рейтинг видов нарушений</li>
</ul>
</div>
<div class="block-card">
<span class="block-number">Блок №2</span>
<h3>Анализ динамики</h3>
<ul>
<li>Сравнение: текущий месяц vs предыдущий</li>
<li>Сравнение с аналогичным периодом прошлого года</li>
<li>Процент роста / снижения</li>
<li>Тренды по каждому виду нарушений</li>
<li>Динамика по подразделениям</li>
</ul>
</div>
<div class="block-card">
<span class="block-number">Блок №3</span>
<h3>Проблемные зоны</h3>
<ul>
<li>Повторяющиеся нарушения</li>
<li>Подразделения с устойчиво высоким уровнем</li>
<li>Ухудшение показателей</li>
<li>Наиболее частые нарушения</li>
<li>Автоматические выводы — «проблемное направление X, оно даёт 27% нарушений»</li>
</ul>
</div>
<div class="block-card">
<span class="block-number">Блок №4</span>
<h3>Контроль плана проверок</h3>
<ul>
<li>Выполнение (%) = Факт / План × 100</li>
<li>Рейтинг подразделений по выполнению</li>
<li>Перечень с низким исполнением</li>
<li>Анализ по регионам</li>
<li>Перевыполнение / невыполнение</li>
</ul>
</div>
<div class="block-card">
<span class="block-number">Блок №5</span>
<h3>Аналитическая справка</h3>
<ul>
<li>Общая информация за месяц</li>
<li>Количество проверок и выполнение плана</li>
<li>ТОП-3 распространённых нарушений</li>
<li>Подразделения-лидеры и аутсайдеры</li>
<li>Тенденции месяца</li>
</ul>
</div>
<div class="block-card">
<span class="block-number">Блок №6</span>
<h3>Рекомендации</h3>
<ul>
<li>Внеплановые проверки по проблемным зонам</li>
<li>Целевые инструктажи</li>
<li>Дополнительное обучение</li>
<li>Выборочный аудит документации</li>
<li>Усиление контроля</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Dashboard Preview -->
<section class="section" style="background: var(--gray-50);">
<div class="container">
<span class="section-label">Дашборд</span>
<h2>Визуализация данных</h2>
<p class="section-subtitle">Пример того, как выглядит аналитическая панель ИИ-агента</p>
<div class="dash-preview">
<div class="dash-metric">
<div class="value">247</div>
<div class="label">Нарушений за месяц</div>
</div>
<div class="dash-metric">
<div class="value">87%</div>
<div class="label">Выполнение плана</div>
</div>
<div class="dash-metric">
<div class="value">142</div>
<div class="label">Проведено проверок</div>
</div>
<div class="dash-metric">
<div class="value">32</div>
<div class="label">Устранено за месяц</div>
</div>
<div class="dash-chart">
<div class="chart-bars">
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 120px; background: #2563EB;"></div>
<span class="chart-bar-label">Янв</span>
</div>
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 90px; background: #2563EB;"></div>
<span class="chart-bar-label">Фев</span>
</div>
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 140px; background: #2563EB;"></div>
<span class="chart-bar-label">Мар</span>
</div>
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 100px; background: #2563EB;"></div>
<span class="chart-bar-label">Апр</span>
</div>
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 160px; background: #DC2626;"></div>
<span class="chart-bar-label">Май</span>
</div>
<div class="chart-bar-wrapper">
<div class="chart-bar" style="height: 130px; background: #2563EB;"></div>
<span class="chart-bar-label">Июн</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How to work -->
<section id="steps" class="section">
<div class="container">
<span class="section-label">Процесс</span>
<h2>Как работать с системой</h2>
<p class="section-subtitle">4 шага от проверки до управленческого отчёта</p>
<div class="steps">
<div class="step">
<div class="step-num"></div>
<div class="step-text">
<h3>Заполните Google Forms после проверки</h3>
<p>Проверяющий вносит данные: дата, подразделение, регион, вид и количество нарушений, описание. Данные автоматически попадают в Google Sheets.</p>
</div>
</div>
<div class="step">
<div class="step-num"></div>
<div class="step-text">
<h3>ИИ-агент обрабатывает данные</h3>
<p>Автоматический сбор новых записей, классификация нарушений по 9 категориям, расчёт выполнения плана проверок.</p>
</div>
</div>
<div class="step">
<div class="step-num"></div>
<div class="step-text">
<h3>Смотрите дашборд в реальном времени</h3>
<p>Интерактивные графики динамики, структура нарушений, рейтинги подразделений и регионов. Обновляется ежедневно и по запросу.</p>
</div>
</div>
<div class="step">
<div class="step-num"></div>
<div class="step-text">
<h3>Получайте готовый отчёт и рекомендации</h3>
<p>1-го числа каждого месяца — автоматическая аналитическая справка с выводами и рекомендациями. Отчёт в PDF, Excel и PowerPoint.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Categories -->
<section class="section" style="background: var(--gray-50);">
<div class="container">
<span class="section-label">Классификация</span>
<h2>9 категорий нарушений</h2>
<p class="section-subtitle">ИИ-агент автоматически распределяет нарушения по категориям</p>
<div class="cat-grid">
<span class="cat-tag"><span class="cat-dot d1"></span> Документация по БиОТ</span>
<span class="cat-tag"><span class="cat-dot d2"></span> Наряды-допуски</span>
<span class="cat-tag"><span class="cat-dot d3"></span> Пожарная безопасность</span>
<span class="cat-tag"><span class="cat-dot d4"></span> Транспортная безопасность</span>
<span class="cat-tag"><span class="cat-dot d5"></span> Промышленная безопасность</span>
<span class="cat-tag"><span class="cat-dot d6"></span> Санитарно-бытовые требования</span>
<span class="cat-tag"><span class="cat-dot d7"></span> Средства индивидуальной защиты</span>
<span class="cat-tag"><span class="cat-dot d8"></span> Обучение и проверка знаний</span>
<span class="cat-tag"><span class="cat-dot d9"></span> Электробезопасность</span>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container">
<h2>Начните использовать ИИ-агента</h2>
<p>Подключите Google Forms к системе и получайте аналитику автоматически. Все вопросы — в рабочий чат команды.</p>
<a href="#quick" class="btn">Перейти к инструментам</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>ИИ-агент аналитики производственной безопасности &middot; Внутренний портал команды &middot; 2026</p>
</div>
</footer>
</body>
</html>