877 lines
32 KiB
HTML
877 lines
32 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 {
|
||
--ink: #0F1218;
|
||
--cyan: #00E5FF;
|
||
--cyan-50: #E8FCFF;
|
||
--white: #fff;
|
||
--gray-500: #5B6573;
|
||
--gray-100: #F2F4F7;
|
||
--gray-800: #1A1D25;
|
||
--gray-700: #252833;
|
||
--gray-600: #3A3E4A;
|
||
--red: #FF4D4D;
|
||
--green: #00C853;
|
||
--amber: #FFB300;
|
||
}
|
||
|
||
*{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(--ink);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px }
|
||
|
||
/* ===== Hero ===== */
|
||
.hero {
|
||
padding: 100px 0 80px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -40%;
|
||
right: -15%;
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(circle, rgba(0,229,255,0.06) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.hero .container { position: relative; z-index: 1 }
|
||
.hero .badge {
|
||
display: inline-block;
|
||
background: rgba(0,229,255,0.1);
|
||
border: 1px solid rgba(0,229,255,0.2);
|
||
color: var(--cyan);
|
||
padding: 6px 16px;
|
||
border-radius: 100px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 56px;
|
||
font-weight: 800;
|
||
line-height: 1.05;
|
||
margin-bottom: 24px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.hero h1 span { color: var(--cyan) }
|
||
.hero p {
|
||
font-size: 20px;
|
||
color: #9aa3b2;
|
||
max-width: 620px;
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.highlight-box {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: rgba(0,229,255,0.05);
|
||
border: 1px solid rgba(0,229,255,0.15);
|
||
border-radius: 12px;
|
||
padding: 12px 20px;
|
||
margin-bottom: 36px;
|
||
font-size: 15px;
|
||
color: #d1d5db;
|
||
}
|
||
.highlight-box .timer {
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
color: var(--cyan);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.hero .cta-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--cyan);
|
||
color: var(--ink);
|
||
padding: 14px 28px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s, transform 0.15s;
|
||
}
|
||
.btn:hover { background: #1be5ff; transform: translateY(-1px) }
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--cyan);
|
||
border: 2px solid rgba(0,229,255,0.3);
|
||
padding: 12px 26px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, background 0.2s;
|
||
}
|
||
.btn-outline:hover { border-color: var(--cyan); background: rgba(0,229,255,0.05) }
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: 40px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid rgba(255,255,255,0.08);
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-stats .stat .num {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: var(--cyan);
|
||
line-height: 1;
|
||
}
|
||
.hero-stats .stat .label {
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ===== Sections ===== */
|
||
.section { padding: 80px 0 }
|
||
.section-label {
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--cyan);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 12px;
|
||
}
|
||
.section h2 {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section .subtitle {
|
||
color: #9aa3b2;
|
||
font-size: 18px;
|
||
max-width: 600px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
/* ===== Direction cards ===== */
|
||
.directions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px }
|
||
.dir-card {
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 14px;
|
||
padding: 28px;
|
||
display: flex;
|
||
gap: 16px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.dir-card:hover { border-color: rgba(0,229,255,0.2) }
|
||
.dir-card .dir-icon {
|
||
width: 48px; height: 48px;
|
||
background: rgba(0,229,255,0.1);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
.dir-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px }
|
||
.dir-card p { color: #6b7280; font-size: 14px }
|
||
|
||
/* ===== Process steps ===== */
|
||
.big-steps { display: flex; flex-direction: column; gap: 24px }
|
||
.big-step {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 24px;
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.big-step:hover { border-color: rgba(0,229,255,0.15) }
|
||
.big-step .step-num {
|
||
width: 44px; height: 44px;
|
||
background: var(--cyan);
|
||
color: var(--ink);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
.big-step .step-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px }
|
||
.big-step .step-body .step-subtitle { color: var(--cyan); font-size: 13px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em }
|
||
.big-step .step-body p { color: #9aa3b2; font-size: 15px; margin-bottom: 12px }
|
||
.big-step .step-body ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.big-step .step-body ul li {
|
||
background: rgba(0,229,255,0.06);
|
||
border: 1px solid rgba(0,229,255,0.1);
|
||
border-radius: 8px;
|
||
padding: 6px 14px;
|
||
font-size: 13px;
|
||
color: #d1d5db;
|
||
}
|
||
|
||
/* ===== Doc preview block ===== */
|
||
.doc-block {
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
}
|
||
.doc-block h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px }
|
||
.doc-preview {
|
||
background: var(--white);
|
||
color: var(--ink);
|
||
border-radius: 12px;
|
||
padding: 24px 32px;
|
||
font-size: 13px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
.doc-preview .doc-header {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.doc-preview .doc-meta {
|
||
font-size: 11px;
|
||
color: #6b7280;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
}
|
||
.doc-preview table { width: 100%; border-collapse: collapse }
|
||
.doc-preview th {
|
||
background: #f3f4f6;
|
||
padding: 8px 12px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
.doc-preview td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
font-size: 12px;
|
||
}
|
||
.risk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px }
|
||
.risk-dot.high { background: var(--red) }
|
||
.risk-dot.mid { background: var(--amber) }
|
||
|
||
/* ===== AI section ===== */
|
||
.ai-section {
|
||
background: linear-gradient(135deg, var(--gray-800) 0%, var(--ink) 100%);
|
||
border: 1px solid rgba(0,229,255,0.08);
|
||
border-radius: 24px;
|
||
padding: 60px;
|
||
}
|
||
.ai-flow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: 40px;
|
||
}
|
||
.ai-step {
|
||
background: var(--gray-700);
|
||
border-radius: 14px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
min-width: 160px;
|
||
flex: 1;
|
||
}
|
||
.ai-step .ai-icon { font-size: 32px; margin-bottom: 12px }
|
||
.ai-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px }
|
||
.ai-step p { font-size: 13px; color: #6b7280 }
|
||
.ai-arrow {
|
||
font-size: 24px;
|
||
color: var(--cyan);
|
||
flex-shrink: 0;
|
||
}
|
||
.ai-result {
|
||
background: rgba(0,229,255,0.08);
|
||
border: 1px solid rgba(0,229,255,0.2);
|
||
border-radius: 14px;
|
||
padding: 24px;
|
||
flex: 1.5;
|
||
min-width: 280px;
|
||
}
|
||
.ai-result h4 { font-size: 15px; font-weight: 700; color: var(--cyan); margin-bottom: 12px }
|
||
.ai-result .ai-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||
color: #9aa3b2;
|
||
}
|
||
.ai-result .ai-row span:last-child { color: #d1d5db; font-weight: 600; text-align: right }
|
||
.timer-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(0,229,255,0.12);
|
||
border: 1px solid rgba(0,229,255,0.25);
|
||
color: var(--cyan);
|
||
padding: 10px 20px;
|
||
border-radius: 100px;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
/* ===== Dashboard mockup ===== */
|
||
.dash-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 14px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.dash-card {
|
||
background: var(--gray-700);
|
||
border-radius: 12px;
|
||
padding: 22px 20px;
|
||
}
|
||
.dash-card .val {
|
||
font-size: 30px;
|
||
font-weight: 800;
|
||
color: var(--cyan);
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
.dash-card .lbl { font-size: 12px; color: #6b7280 }
|
||
.dash-card.crit .val { color: var(--red) }
|
||
.dash-card.warn .val { color: var(--amber) }
|
||
.dash-card.ok .val { color: var(--green) }
|
||
|
||
.dir-bars { display: flex; flex-direction: column; gap: 10px }
|
||
.dir-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.dir-bar .dir-name { width: 180px; font-size: 13px; color: #9aa3b2; flex-shrink: 0 }
|
||
.dir-bar .bar-track {
|
||
flex: 1;
|
||
height: 10px;
|
||
background: var(--gray-700);
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
}
|
||
.dir-bar .bar-fill { height: 100%; border-radius: 5px; background: var(--cyan) }
|
||
.dir-bar .bar-val { font-size: 13px; font-weight: 700; color: var(--white); width: 30px; text-align: right }
|
||
.dir-bar .bar-fill.w2 { width: 46%; background: #2196F3 }
|
||
.dir-bar .bar-fill.w3 { width: 35%; background: var(--amber) }
|
||
.dir-bar .bar-fill.w4 { width: 19%; background: #9C27B0 }
|
||
.dir-bar .bar-fill.w5 { width: 13%; background: var(--green) }
|
||
|
||
/* ===== Waitlist ===== */
|
||
.waitlist {
|
||
background: linear-gradient(135deg, var(--gray-800) 0%, var(--ink) 100%);
|
||
border: 1px solid rgba(0,229,255,0.1);
|
||
border-radius: 24px;
|
||
padding: 60px;
|
||
text-align: center;
|
||
}
|
||
.waitlist h2 { font-size: 32px; margin-bottom: 12px }
|
||
.waitlist p { color: #9aa3b2; margin-bottom: 32px }
|
||
.waitlist form {
|
||
display: flex;
|
||
gap: 12px;
|
||
max-width: 480px;
|
||
margin: 0 auto;
|
||
}
|
||
.waitlist input {
|
||
flex: 1;
|
||
padding: 14px 20px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
background: var(--gray-700);
|
||
color: var(--white);
|
||
font-size: 16px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.waitlist input:focus { border-color: var(--cyan) }
|
||
.waitlist input::placeholder { color: #6b7280 }
|
||
|
||
/* ===== FAQ ===== */
|
||
.faq-list { max-width: 700px }
|
||
.faq-item {
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
padding: 24px 0;
|
||
}
|
||
.faq-item summary {
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.faq-item summary::-webkit-details-marker { display: none }
|
||
.faq-item summary::after {
|
||
content: '+';
|
||
font-size: 22px;
|
||
color: var(--cyan);
|
||
font-weight: 400;
|
||
transition: transform 0.2s;
|
||
}
|
||
.faq-item[open] summary::after { content: '\2212' }
|
||
.faq-item p { color: #9aa3b2; font-size: 15px; margin-top: 12px; padding-right: 40px }
|
||
|
||
/* ===== Footer ===== */
|
||
.footer {
|
||
padding: 48px 0;
|
||
border-top: 1px solid rgba(255,255,255,0.06);
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
}
|
||
.footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
.footer a { color: #9aa3b2; text-decoration: none }
|
||
.footer a:hover { color: var(--cyan) }
|
||
|
||
/* ===== Mobile ===== */
|
||
@media (max-width: 768px) {
|
||
.hero { padding: 60px 0 48px }
|
||
.hero h1 { font-size: 34px }
|
||
.hero p { font-size: 17px }
|
||
.hero-stats { gap: 20px }
|
||
.section { padding: 48px 0 }
|
||
.section h2 { font-size: 28px }
|
||
.big-step { grid-template-columns: 1fr; gap: 16px }
|
||
.doc-block { padding: 24px }
|
||
.doc-preview { overflow-x: auto; padding: 16px }
|
||
.ai-section { padding: 32px 24px; border-radius: 16px }
|
||
.ai-flow { flex-direction: column }
|
||
.ai-arrow { transform: rotate(90deg) }
|
||
.waitlist { padding: 32px 24px; border-radius: 16px }
|
||
.waitlist form { flex-direction: column }
|
||
.waitlist h2 { font-size: 24px }
|
||
.dir-bar .dir-name { width: 120px; font-size: 12px }
|
||
.dash-grid { grid-template-columns: repeat(2, 1fr) }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero h1 { font-size: 28px }
|
||
.hero .cta-row { flex-direction: column; align-items: stretch }
|
||
.btn, .btn-outline { text-align: center; justify-content: center }
|
||
.directions { grid-template-columns: 1fr }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ===== HERO ===== -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="badge">Продукт в разработке</div>
|
||
<h1><span>Цифровой инспектор БиОТ</span><br>проверки безопасности — быстро и без бумаги</h1>
|
||
<p>Мобильная и веб-система для проверок по охране труда, пожарной, электро-, транспортной безопасности и охране здоровья. С автоматическим формированием предписаний по требованиям законодательства РК.</p>
|
||
|
||
<div class="highlight-box">
|
||
<span class="timer">10-15 мин</span>
|
||
<span>на оформление проверки вместо 1-2 часов</span>
|
||
</div>
|
||
|
||
<div class="cta-row">
|
||
<a href="checklist.html" class="btn">Открыть чек-лист</a>
|
||
<a href="#process" class="btn-outline">Как работает</a>
|
||
</div>
|
||
|
||
<div class="hero-stats">
|
||
<div class="stat"><div class="num">6</div><div class="label">направлений проверок</div></div>
|
||
<div class="stat"><div class="num">PDF + Word</div><div class="label">экспорт документа</div></div>
|
||
<div class="stat"><div class="num">ИИ-модуль</div><div class="label">автораспознавание</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== DIRECTIONS ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-label">Направления проверок</div>
|
||
<h2>6 направлений — одна система</h2>
|
||
<p class="subtitle">Инспектор выбирает направление, объект и подразделение — система ведёт по чек-листу.</p>
|
||
<div class="directions">
|
||
<div class="dir-card">
|
||
<div class="dir-icon">⚠</div>
|
||
<div>
|
||
<h3>Охрана труда и ТБ</h3>
|
||
<p>СИЗ, ограждения, работа на высоте, грузоподъёмные механизмы, документация</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🔥</div>
|
||
<div>
|
||
<h3>Пожарная безопасность</h3>
|
||
<p>Огнетушители, гидранты, планы эвакуации, датчики, противопожарное состояние</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">⚡</div>
|
||
<div>
|
||
<h3>Электробезопасность</h3>
|
||
<p>Заземление, изоляция, распределительные щиты, допуски персонала</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🛣</div>
|
||
<div>
|
||
<h3>Транспортная безопасность</h3>
|
||
<p>Техсостояние транспорта, предрейсовые осмотры, путевые листы, допуски</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">❤</div>
|
||
<div>
|
||
<h3>Охрана здоровья</h3>
|
||
<p>Медосмотры, санитарное состояние, аптечки, условия труда на рабочих местах</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🗺</div>
|
||
<div>
|
||
<h3>Выездные проверки</h3>
|
||
<p>GPS-координаты, проверка мест производства работ, рейтинг объектов по риску</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PROCESS ===== -->
|
||
<section class="section" id="process" style="background: var(--gray-800); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04)">
|
||
<div class="container">
|
||
<div class="section-label">Бизнес-процесс</div>
|
||
<h2>4 этапа — от проверки до отчёта</h2>
|
||
<p class="subtitle">Система ведёт инспектора по шагам, исключая ручное оформление.</p>
|
||
|
||
<div class="big-steps">
|
||
<div class="big-step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-body">
|
||
<div class="step-subtitle">На объекте</div>
|
||
<h3>Инспектор заполняет чек-лист</h3>
|
||
<p>Выбирает объект, подразделение, ответственное лицо, направление, дату. Проходит пункты чек-листа: соответствует / не соответствует / не применяется.</p>
|
||
<ul>
|
||
<li>Фото нарушения</li>
|
||
<li>Категория риска</li>
|
||
<li>Срок устранения</li>
|
||
<li>Ответственный</li>
|
||
<li>Нормативная ссылка</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="big-step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<div class="step-subtitle">Автоматически</div>
|
||
<h3>Формирование записи о нарушении</h3>
|
||
<p>Инспектор фиксирует факт — система сама формулирует нарушение, требование и корректирующее мероприятие по корпоративному шаблону.</p>
|
||
<ul>
|
||
<li>Формулировка нарушения</li>
|
||
<li>Нормативное требование</li>
|
||
<li>Корректирующее мероприятие</li>
|
||
<li>Категория риска</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ===== DOCUMENT AUTOGENERATION ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-label">Этап 3</div>
|
||
<h2>Автоматическое «Указание по БиОТ»</h2>
|
||
<p class="subtitle">Форма по корпоративному шаблону или утверждённому образцу организации, в соответствии с законодательством РК.</p>
|
||
|
||
<div class="doc-block">
|
||
<h3>Предпросмотр формируемого документа</h3>
|
||
<div class="doc-preview">
|
||
<div class="doc-header">Указание по безопасности и охране труда № 12/06</div>
|
||
<div class="doc-meta">Объект: Цех №3 · Подразделение: Производственный участок · Проверяющий: Иванов А.С. · Дата: 03.06.2026</div>
|
||
<table>
|
||
<tr><th>№</th><th>Выявленное нарушение</th><th>Корректирующее мероприятие</th><th>Ответственный</th><th>Срок</th></tr>
|
||
<tr>
|
||
<td>1</td>
|
||
<td><span class="risk-dot high"></span>Работы на высоте без страховочной привязи</td>
|
||
<td>Обеспечить применение страховочных систем</td>
|
||
<td>Начальник участка</td>
|
||
<td>15.06.2026</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td><span class="risk-dot high"></span>Огнетушитель не прошёл своевременную перезарядку</td>
|
||
<td>Выполнить перезарядку огнетушителя</td>
|
||
<td>Руководитель объекта</td>
|
||
<td>10.06.2026</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td><span class="risk-dot mid"></span>Отсутствует запись в журнале инструктажа</td>
|
||
<td>Внести запись и провести инструктаж</td>
|
||
<td>Мастер участка</td>
|
||
<td>20.06.2026</td>
|
||
</tr>
|
||
</table>
|
||
<div style="display:flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; font-size: 11px; color: #6b7280;">
|
||
<span>Подпись проверяющего: ___________</span>
|
||
<span>Подпись руководителя: ___________</span>
|
||
<span style="background:#000;color:#fff;padding:4px 8px;border-radius:4px;font-family:monospace">QR-код</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== AI MODULE ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="ai-section">
|
||
<div class="section-label" style="color: var(--cyan)">Самая ценная функция</div>
|
||
<h2>ИИ-модуль: фото → готовая запись</h2>
|
||
<p class="subtitle" style="margin: 0 auto 0 0">Инспектор делает снимок нарушения — система сама определяет тип, формулировку и предлагает строку для указания.</p>
|
||
|
||
<div class="ai-flow">
|
||
<div class="ai-step">
|
||
<div class="ai-icon">📷</div>
|
||
<h4>Фото нарушения</h4>
|
||
<p>Инспектор фотографирует нарушение на объекте</p>
|
||
</div>
|
||
<div class="ai-arrow">➔</div>
|
||
<div class="ai-step">
|
||
<div class="ai-icon">🧠</div>
|
||
<h4>Распознавание</h4>
|
||
<p>ИИ определяет тип нарушения по снимку</p>
|
||
</div>
|
||
<div class="ai-arrow">➔</div>
|
||
<div class="ai-result">
|
||
<h4>Автоматически предложено:</h4>
|
||
<div class="ai-row"><span>Нарушение</span><span>Работник без страховочной привязи</span></div>
|
||
<div class="ai-row"><span>Мероприятие</span><span>Организовать контроль применения СИЗ</span></div>
|
||
<div class="ai-row"><span>Категория риска</span><span style="color:var(--red)">Высокий</span></div>
|
||
<div class="ai-row"><span>Нормативная ссылка</span><span>Правила ОТ при работе на высоте §12</span></div>
|
||
<div class="timer-badge" style="margin-top:16px">⚡ Готово к вставке в Указание</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== DASHBOARD ===== -->
|
||
<section class="section" style="background: var(--gray-800); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04)">
|
||
<div class="container">
|
||
<div class="section-label">Этап 4</div>
|
||
<h2>Дашборд руководителя</h2>
|
||
<p class="subtitle">Аналитика в реальном времени по всем объектам, подразделениям и направлениям.</p>
|
||
|
||
<div class="dash-grid">
|
||
<div class="dash-card"><div class="val">142</div><div class="lbl">Проверок за месяц</div></div>
|
||
<div class="dash-card crit"><div class="val">37</div><div class="lbl">Нарушений</div></div>
|
||
<div class="dash-card ok"><div class="val">82%</div><div class="lbl">Устранено</div></div>
|
||
<div class="dash-card warn"><div class="val">5</div><div class="lbl">Просрочено</div></div>
|
||
<div class="dash-card crit"><div class="val">3</div><div class="lbl">Критических</div></div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:8px; font-size:13px; font-weight:700; color:#9aa3b2">Нарушения по направлениям</div>
|
||
<div class="dir-bars">
|
||
<div class="dir-bar">
|
||
<span class="dir-name">Охрана труда и ТБ</span>
|
||
<span class="bar-track"><span class="bar-fill" style="width:100%"></span></span>
|
||
<span class="bar-val">48</span>
|
||
</div>
|
||
<div class="dir-bar">
|
||
<span class="dir-name">Электробезопасность</span>
|
||
<span class="bar-track"><span class="bar-fill w2"></span></span>
|
||
<span class="bar-val">22</span>
|
||
</div>
|
||
<div class="dir-bar">
|
||
<span class="dir-name">Пожарная безопасность</span>
|
||
<span class="bar-track"><span class="bar-fill w3"></span></span>
|
||
<span class="bar-val">17</span>
|
||
</div>
|
||
<div class="dir-bar">
|
||
<span class="dir-name">Транспортная безопасность</span>
|
||
<span class="bar-track"><span class="bar-fill w4"></span></span>
|
||
<span class="bar-val">9</span>
|
||
</div>
|
||
<div class="dir-bar">
|
||
<span class="dir-name">Охрана здоровья</span>
|
||
<span class="bar-track"><span class="bar-fill w5"></span></span>
|
||
<span class="bar-val">6</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TECH STACK ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-label">Технологии</div>
|
||
<h2>Стек и план первого релиза</h2>
|
||
<p class="subtitle">MVP за 1-2 месяца: мобильное приложение, сервер, база данных, ИИ-модуль.</p>
|
||
<div class="directions">
|
||
<div class="dir-card">
|
||
<div class="dir-icon">📱</div>
|
||
<div><h3>Flutter</h3><p>Мобильное приложение Android + iOS. Один код, две платформы, офлайн-режим.</p></div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">⚙</div>
|
||
<div><h3>FastAPI + Python</h3><p>API-сервер, генерация PDF/Word, хранение фото, авторизация по ролям.</p></div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🗃</div>
|
||
<div><h3>PostgreSQL</h3><p>Чек-листы, проверки, нарушения, пользователи, объекты, подразделения, дашборд.</p></div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">👥</div>
|
||
<div><h3>3 роли</h3><p>Инспектор (чек-листы), Руководитель (аналитика), Администратор (настройка системы).</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== WHAT YOU GET ===== -->
|
||
<section class="section" style="background: var(--gray-800); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04)">
|
||
<div class="container">
|
||
<h2 style="text-align:center; margin-bottom: 48px">Что вы получаете</h2>
|
||
<div class="directions">
|
||
<div class="dir-card">
|
||
<div class="dir-icon">📄</div>
|
||
<div>
|
||
<h3>Чек-листы по 6 направлениям</h3>
|
||
<p>Структурированы под требования РК. Настраиваются под ваше предприятие.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">📄</div>
|
||
<div>
|
||
<h3>Указание по БиОТ</h3>
|
||
<p>Автоформирование по вашему корпоративному шаблону. PDF, Word, QR-код, эл. подпись.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">📈</div>
|
||
<div>
|
||
<h3>Аналитическая панель</h3>
|
||
<p>Дашборд, графики по направлениям, KPI подразделений, карта выездных проверок.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🧠</div>
|
||
<div>
|
||
<h3>ИИ-распознавание</h3>
|
||
<p>Фото нарушения → готовая строка для указания. Оформление за 10 минут вместо 2 часов.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🔔</div>
|
||
<div>
|
||
<h3>Контроль сроков</h3>
|
||
<p>Уведомления о просрочках, рейтинг ответственных, индекс безопасности подразделений.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card">
|
||
<div class="dir-icon">🔒</div>
|
||
<div>
|
||
<h3>Корпоративная авторизация</h3>
|
||
<p>Роли: Инспектор, Руководитель, Администратор. Доступ по корпоративному логину.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== WAITLIST ===== -->
|
||
<section class="section" id="waitlist">
|
||
<div class="container">
|
||
<div class="waitlist">
|
||
<h2>Хотите попробовать первым?</h2>
|
||
<p>Оставьте контакты — сообщим о запуске и предоставим ранний доступ.</p>
|
||
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
|
||
<input type="email" name="email" placeholder="Email" required>
|
||
<button type="submit" class="btn">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FAQ ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-label">FAQ</div>
|
||
<h2>Частые вопросы</h2>
|
||
<div class="faq-list">
|
||
<details class="faq-item">
|
||
<summary>Когда будет готова первая версия?</summary>
|
||
<p>MVP — 1-2 месяца. Включает: авторизация, чек-листы по 6 направлениям, фотофиксация, автоформирование «Указания по БиОТ», экспорт PDF, история проверок.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Можно ли использовать нашу форму Указания по БиОТ?</summary>
|
||
<p>Да, система настраивается под утверждённый корпоративный шаблон или форму, применяемую в организации в соответствии с законодательством РК.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Работает ли без интернета на объекте?</summary>
|
||
<p>Да, офлайн-режим: все данные сохраняются на устройстве и синхронизируются с сервером при появлении сети.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Как работает ИИ-распознавание нарушений?</summary>
|
||
<p>Инспектор делает фото нарушения, система определяет тип, формулирует запись, предлагает корректирующее мероприятие, категорию риска и нормативную ссылку. Инспектор подтверждает — запись попадает в Указание.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Какие роли есть в системе?</summary>
|
||
<p>Инспектор — проводит проверки, Руководитель — видит дашборд и аналитику, Администратор — настраивает чек-листы, шаблоны и доступы.</p>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<span>2026 · Цифровой инспектор БиОТ</span>
|
||
<a href="#waitlist">Оставить заявку</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|