551 lines
18 KiB
HTML
551 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ИИ-агент мониторинга ПБ — АО «Самрук-Казына»</title>
|
||
<style>
|
||
:root {
|
||
--bg-deep: #060E1A;
|
||
--bg-navy: #0A1628;
|
||
--bg-card: #112240;
|
||
--accent: #0088CC;
|
||
--accent-bright: #00A3FF;
|
||
--white: #FFFFFF;
|
||
--gray-text: #8892A4;
|
||
--gray-light: #A8B2C1;
|
||
--border: #1E3250;
|
||
--danger: #EF4444;
|
||
--warning: #F59E0B;
|
||
--success: #10B981;
|
||
}
|
||
|
||
* { 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(--white);
|
||
background: var(--bg-deep);
|
||
}
|
||
|
||
.container { max-width: 1140px; margin: 0 auto; padding: 80px 24px; }
|
||
|
||
/* Hero */
|
||
.hero {
|
||
background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-navy) 50%, #0C1E3A 100%);
|
||
min-height: 100vh;
|
||
display: flex; align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -200px; right: -100px;
|
||
width: 600px; height: 600px;
|
||
background: radial-gradient(circle, rgba(0,163,255,0.08) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
}
|
||
.hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -150px; left: -100px;
|
||
width: 500px; height: 500px;
|
||
background: radial-gradient(circle, rgba(0,136,204,0.06) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
}
|
||
.hero .container { position: relative; z-index: 1; }
|
||
.hero .badge {
|
||
display: inline-block;
|
||
background: rgba(0,163,255,0.12);
|
||
color: var(--accent-bright);
|
||
padding: 6px 16px;
|
||
border-radius: 100px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 28px;
|
||
border: 1px solid rgba(0,163,255,0.2);
|
||
}
|
||
.hero h1 {
|
||
font-size: 52px; font-weight: 800; line-height: 1.08;
|
||
margin-bottom: 20px; max-width: 750px;
|
||
}
|
||
.hero h1 span { color: var(--accent-bright); }
|
||
.hero .subtitle {
|
||
font-size: 19px; color: var(--gray-text); max-width: 580px;
|
||
margin-bottom: 36px; line-height: 1.5;
|
||
}
|
||
.btn-primary {
|
||
display: inline-block;
|
||
background: var(--accent);
|
||
color: var(--white);
|
||
padding: 15px 32px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.btn-primary:hover { background: var(--accent-bright); }
|
||
.btn-outline {
|
||
display: inline-block;
|
||
background: transparent;
|
||
color: var(--white);
|
||
padding: 14px 30px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
border: 2px solid var(--border);
|
||
cursor: pointer;
|
||
transition: border-color 0.2s;
|
||
margin-left: 12px;
|
||
}
|
||
.btn-outline:hover { border-color: var(--accent-bright); }
|
||
|
||
/* Section titles */
|
||
.section-label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: var(--accent-bright);
|
||
margin-bottom: 12px;
|
||
}
|
||
.section h2 {
|
||
font-size: 36px; font-weight: 700;
|
||
margin-bottom: 16px; line-height: 1.2;
|
||
}
|
||
.section .section-desc {
|
||
color: var(--gray-text);
|
||
max-width: 600px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
/* Metrics */
|
||
.metrics {
|
||
background: var(--bg-navy);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.metrics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
text-align: center;
|
||
}
|
||
.metric-value {
|
||
font-size: 40px; font-weight: 800;
|
||
color: var(--accent-bright);
|
||
line-height: 1.1;
|
||
}
|
||
.metric-label {
|
||
font-size: 14px; color: var(--gray-text);
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Modules */
|
||
.modules {
|
||
background: var(--bg-deep);
|
||
}
|
||
.modules-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.module-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.module-card:hover { border-color: var(--accent); }
|
||
.module-card .icon {
|
||
width: 44px; height: 44px;
|
||
background: rgba(0,163,255,0.1);
|
||
border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.module-card h3 {
|
||
font-size: 17px; font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.module-card p {
|
||
font-size: 14px; color: var(--gray-text);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* AI section */
|
||
.ai-section {
|
||
background: var(--bg-navy);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.ai-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
.ai-visual {
|
||
background: linear-gradient(135deg, var(--bg-card), #0C1E3A);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
text-align: center;
|
||
}
|
||
.ai-visual .big-icon {
|
||
font-size: 64px; margin-bottom: 16px;
|
||
}
|
||
.ai-visual h3 {
|
||
font-size: 20px; margin-bottom: 8px;
|
||
color: var(--accent-bright);
|
||
}
|
||
.ai-visual p {
|
||
font-size: 14px; color: var(--gray-text);
|
||
}
|
||
.ai-features {
|
||
list-style: none;
|
||
}
|
||
.ai-features li {
|
||
display: flex; gap: 14px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 15px;
|
||
}
|
||
.ai-features li:last-child { border: none; }
|
||
.ai-features .check {
|
||
color: var(--accent-bright);
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Effects */
|
||
.effects {
|
||
background: var(--bg-deep);
|
||
}
|
||
.effects-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.effect-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
}
|
||
.effect-card .percent {
|
||
font-size: 36px; font-weight: 800;
|
||
color: var(--accent-bright);
|
||
margin-bottom: 4px;
|
||
}
|
||
.effect-card p {
|
||
font-size: 15px; color: var(--gray-text);
|
||
}
|
||
|
||
/* Integration */
|
||
.integration {
|
||
background: var(--bg-navy);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.integration-tags {
|
||
display: flex; flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.tag {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
padding: 8px 18px;
|
||
border-radius: 100px;
|
||
font-size: 14px;
|
||
color: var(--gray-light);
|
||
}
|
||
|
||
/* CTA */
|
||
.cta {
|
||
background: linear-gradient(135deg, var(--bg-deep), #0C1E3A);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.cta-box {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 48px;
|
||
max-width: 640px;
|
||
}
|
||
.cta-box h2 {
|
||
font-size: 28px; margin-bottom: 8px;
|
||
}
|
||
.cta-box p {
|
||
color: var(--gray-text);
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-group label {
|
||
display: block;
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--gray-light);
|
||
margin-bottom: 6px;
|
||
}
|
||
.form-group input,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
background: var(--bg-navy);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
color: var(--white);
|
||
font-size: 15px;
|
||
font-family: inherit;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
}
|
||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||
.btn-submit {
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: var(--accent);
|
||
color: var(--white);
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
transition: background 0.2s;
|
||
}
|
||
.btn-submit:hover { background: var(--accent-bright); }
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: var(--bg-deep);
|
||
border-top: 1px solid var(--border);
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
color: var(--gray-text);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero h1 { font-size: 32px; }
|
||
.container { padding: 48px 20px; }
|
||
.section h2 { font-size: 26px; }
|
||
.modules-grid { grid-template-columns: 1fr 1fr; }
|
||
.metrics-grid { grid-template-columns: 1fr 1fr; }
|
||
.ai-grid { grid-template-columns: 1fr; gap: 32px; }
|
||
.effects-grid { grid-template-columns: 1fr; }
|
||
.btn-outline { margin-left: 0; margin-top: 10px; }
|
||
.cta-box { padding: 28px 20px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.modules-grid { grid-template-columns: 1fr; }
|
||
.metrics-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="badge">Цифровая платформа</div>
|
||
<h1>ИИ-агент мониторинга <span>производственной безопасности</span></h1>
|
||
<p class="subtitle">
|
||
Единая цифровая платформа с искусственным интеллектом для автоматизации контроля исполнения мероприятий, анализа эффективности и подготовки управленческих решений в Группе компаний АО «Самрук-Казына».
|
||
</p>
|
||
<a class="btn-primary" href="#cta">Узнать подробнее</a>
|
||
<a class="btn-outline" href="#modules">Возможности системы</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="metrics">
|
||
<div class="container">
|
||
<div class="metrics-grid">
|
||
<div>
|
||
<div class="metric-value">-80%</div>
|
||
<div class="metric-label">Сокращение ручного сбора отчётности</div>
|
||
</div>
|
||
<div>
|
||
<div class="metric-value">100%</div>
|
||
<div class="metric-label">Прозрачность контроля исполнения</div>
|
||
</div>
|
||
<div>
|
||
<div class="metric-value">24/7</div>
|
||
<div class="metric-label">Мониторинг в реальном времени</div>
|
||
</div>
|
||
<div>
|
||
<div class="metric-value">x5</div>
|
||
<div class="metric-label">Быстрее подготовка отчётов</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="modules" class="modules section">
|
||
<div class="container">
|
||
<span class="section-label">Возможности</span>
|
||
<h2>Модули системы</h2>
|
||
<p class="section-desc">Платформа охватывает все ключевые процессы управления производственной безопасностью — от сбора данных до отчётности перед руководством.</p>
|
||
|
||
<div class="modules-grid">
|
||
<div class="module-card">
|
||
<div class="icon">📊</div>
|
||
<h3>Централизованный сбор данных</h3>
|
||
<p>Сбор отчётности от филиалов и ДО через веб-интерфейс. Единая база данных исполнения Плана.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">📋</div>
|
||
<h3>Управление мероприятиями</h3>
|
||
<p>Электронный реестр, назначение ответственных, контрольные сроки и мониторинг статусов.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">📎</div>
|
||
<h3>Подтверждение исполнения</h3>
|
||
<p>Загрузка фото, актов, протоколов, приказов, презентаций и видео. Электронный архив материалов.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">📃</div>
|
||
<h3>Цифровой паспорт мероприятия</h3>
|
||
<p>Карточка с описанием, сроками, исполнителями, статусом, историей изменений и выводами ИИ.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">🤖</div>
|
||
<h3>Искусственный интеллект</h3>
|
||
<p>Анализ отчётов, проверка полноты, выявление рисков, формирование выводов и рекомендаций.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">⏰</div>
|
||
<h3>Контроль дисциплины</h3>
|
||
<p>Мониторинг сроков, автонапоминания, эскалация просрочек, рейтинг организаций.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">📈</div>
|
||
<h3>Аналитика и дашборды</h3>
|
||
<p>Процент исполнения, рейтинг качества, анализ просрочек, карта рисков, динамика по периодам.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">📄</div>
|
||
<h3>Формирование отчётности</h3>
|
||
<p>Автоматические ежемесячные, квартальные и годовые отчёты, справки и презентации.</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="icon">👥</div>
|
||
<h3>Управленческий помощник</h3>
|
||
<p>Подготовка проектов поручений, выявление системных нарушений, прогноз достижения KPI.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="ai-section section">
|
||
<div class="container">
|
||
<span class="section-label">Искусственный интеллект</span>
|
||
<div class="ai-grid">
|
||
<div class="ai-visual">
|
||
<div class="big-icon">🤖</div>
|
||
<h3>ИИ-агент анализирует и рекомендует</h3>
|
||
<p>Система не просто собирает данные — она помогает принимать решения.</p>
|
||
</div>
|
||
<div>
|
||
<ul class="ai-features">
|
||
<li><span class="check">✓</span> Анализ представленных отчётов и подтверждающих материалов</li>
|
||
<li><span class="check">✓</span> Проверка полноты и достаточности подтверждения исполнения</li>
|
||
<li><span class="check">✓</span> Выявление отсутствующих документов</li>
|
||
<li><span class="check">✓</span> Оценка рисков нарушения сроков</li>
|
||
<li><span class="check">✓</span> Автоматическое формирование выводов и рекомендаций</li>
|
||
<li><span class="check">✓</span> Подготовка кратких аналитических справок для руководства</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="effects section">
|
||
<div class="container">
|
||
<span class="section-label">Ожидаемый эффект</span>
|
||
<h2>Что изменится после внедрения</h2>
|
||
<p class="section-desc">Цифровизация процессов производственной безопасности принесёт измеримые результаты.</p>
|
||
|
||
<div class="effects-grid">
|
||
<div class="effect-card">
|
||
<div class="percent">-80%</div>
|
||
<p>Сокращение ручного сбора отчётности и времени на подготовку сводок</p>
|
||
</div>
|
||
<div class="effect-card">
|
||
<div class="percent">100%</div>
|
||
<p>Достоверность и прозрачность контроля исполнения каждого мероприятия</p>
|
||
</div>
|
||
<div class="effect-card">
|
||
<div class="percent">⚠ 0</div>
|
||
<p>Пропущенных сроков — оперативное выявление рисков и нарушений</p>
|
||
</div>
|
||
<div class="effect-card">
|
||
<div class="percent">Real-time</div>
|
||
<p>Формирование управленческой отчётности в режиме реального времени</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="integration section">
|
||
<div class="container">
|
||
<span class="section-label">Интеграции</span>
|
||
<h2>Встраивается в существующую ИТ-инфраструктуру</h2>
|
||
<p class="section-desc" style="margin-bottom:24px">Платформа интегрируется с корпоративными системами холдинга.</p>
|
||
<div class="integration-tags">
|
||
<span class="tag">Корпоративная электронная почта</span>
|
||
<span class="tag">Системы электронного документооборота</span>
|
||
<span class="tag">Корпоративные BI-платформы</span>
|
||
<span class="tag">Excel / Word / PDF</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="cta" class="cta section">
|
||
<div class="container">
|
||
<div class="cta-box">
|
||
<h2>Узнайте подробнее о системе</h2>
|
||
<p>Оставьте контакты — мы свяжемся, чтобы провести демонстрацию платформы и обсудить внедрение.</p>
|
||
|
||
<form action="https://formspree.io/f/example" method="POST">
|
||
<div class="form-group">
|
||
<label for="name">Имя</label>
|
||
<input type="text" id="name" name="name" placeholder="Иванов Иван Иванович" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="org">Организация</label>
|
||
<input type="text" id="org" name="org" placeholder="Наименование филиала / ДО">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" id="email" name="email" placeholder="email@sk.kz" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="msg">Комментарий</label>
|
||
<textarea id="msg" name="msg" placeholder="Опишите, что вас интересует..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn-submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
АО «Самрук-Казына» © 2026 · Цифровая платформа производственной безопасности
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|