663 lines
26 KiB
HTML
663 lines
26 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: -50%;
|
||
right: -20%;
|
||
width: 700px;
|
||
height: 700px;
|
||
background: radial-gradient(circle, rgba(0,229,255,0.08) 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: 600px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.hero .cta-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.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) }
|
||
|
||
/* Stats mini-row */
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: 40px;
|
||
margin-top: 48px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* Cards grid */
|
||
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px }
|
||
.card {
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.card:hover { border-color: rgba(0,229,255,0.2); transform: translateY(-2px) }
|
||
.card .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: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px }
|
||
.card p { color: #9aa3b2; font-size: 15px; line-height: 1.5 }
|
||
|
||
/* Checklist section */
|
||
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px }
|
||
.check-item {
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 12px;
|
||
padding: 20px 24px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.check-item:hover { border-color: rgba(0,229,255,0.15) }
|
||
.check-item .check-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px }
|
||
.check-item .check-text { font-size: 15px; color: #d1d5db }
|
||
.check-item .check-text strong { color: var(--white); display: block; font-size: 14px; margin-bottom: 2px }
|
||
|
||
/* Steps */
|
||
.steps { display: flex; gap: 20px; flex-wrap: wrap }
|
||
.step {
|
||
flex: 1;
|
||
min-width: 220px;
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
position: relative;
|
||
}
|
||
.step .step-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
background: var(--cyan);
|
||
color: var(--ink);
|
||
border-radius: 10px;
|
||
font-weight: 800;
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px }
|
||
.step p { color: #9aa3b2; font-size: 14px }
|
||
|
||
/* Feature highlight row */
|
||
.feature-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
padding: 60px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
}
|
||
.feature-row:last-child { border-bottom: none }
|
||
.feature-text h3 { font-size: 24px; font-weight: 700; margin-bottom: 12px }
|
||
.feature-text p { color: #9aa3b2; font-size: 16px; margin-bottom: 16px }
|
||
.feature-text ul { list-style: none }
|
||
.feature-text ul li {
|
||
color: #9aa3b2;
|
||
font-size: 15px;
|
||
padding: 6px 0;
|
||
padding-left: 24px;
|
||
position: relative;
|
||
}
|
||
.feature-text ul li::before {
|
||
content: '>';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--cyan);
|
||
font-weight: 700;
|
||
}
|
||
.feature-visual {
|
||
background: var(--gray-800);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
}
|
||
|
||
/* Document preview mockup */
|
||
.doc-preview {
|
||
background: var(--white);
|
||
color: var(--ink);
|
||
border-radius: 12px;
|
||
padding: 24px 32px;
|
||
width: 100%;
|
||
font-size: 13px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
.doc-preview .doc-header {
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
}
|
||
.doc-preview .doc-table { width: 100%; border-collapse: collapse }
|
||
.doc-preview .doc-table th {
|
||
background: #f3f4f6;
|
||
padding: 8px 12px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
.doc-preview .doc-table td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
}
|
||
.doc-preview .doc-table .status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px }
|
||
.doc-preview .doc-table .status.red { background: var(--red) }
|
||
.doc-preview .doc-table .status.green { background: var(--green) }
|
||
.doc-preview .doc-table .status.amber { background: var(--amber) }
|
||
|
||
/* Stats visual */
|
||
.stats-visual {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
width: 100%;
|
||
}
|
||
.stat-card {
|
||
background: var(--gray-700);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
}
|
||
.stat-card .val {
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
color: var(--cyan);
|
||
line-height: 1;
|
||
}
|
||
.stat-card .lbl { font-size: 12px; color: #6b7280; margin-top: 6px }
|
||
.stat-card.danger .val { color: var(--red) }
|
||
.stat-card.warn .val { color: var(--amber) }
|
||
|
||
/* 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;
|
||
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: 36px }
|
||
.hero p { font-size: 17px }
|
||
.hero-stats { gap: 20px; flex-wrap: wrap }
|
||
.section { padding: 48px 0 }
|
||
.section h2 { font-size: 28px }
|
||
.cards { grid-template-columns: 1fr }
|
||
.checklist-grid { grid-template-columns: 1fr }
|
||
.feature-row { grid-template-columns: 1fr; gap: 32px }
|
||
.waitlist { padding: 32px 24px; border-radius: 16px }
|
||
.waitlist form { flex-direction: column }
|
||
.waitlist h2 { font-size: 24px }
|
||
.steps { flex-direction: column }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero h1 { font-size: 30px }
|
||
.hero .cta-row { flex-direction: column; align-items: stretch }
|
||
.btn, .btn-outline { text-align: center; justify-content: center }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="badge">> Продукт в разработке</div>
|
||
<h1><span>Инспектор БиОТ</span><br>автоматизация проверок по охране труда</h1>
|
||
<p>Мобильное приложение для инспекторов: чек-листы, фотофиксация нарушений, автоматическое формирование предписаний, статистика и контроль исполнения. Всё в одном инструменте.</p>
|
||
<div class="cta-row">
|
||
<a href="#waitlist" class="btn">> Оставить заявку</a>
|
||
<a href="#features" class="btn-outline">Что внутри</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat"><div class="num">10</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">QR-код</div><div class="label">проверка подлинности</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="section" id="features">
|
||
<div class="container">
|
||
<div class="section-label">Возможности</div>
|
||
<h2>Что умеет Инспектор БиОТ</h2>
|
||
<p class="subtitle">Полный цикл проверки — от выхода на объект до отчёта руководителю.</p>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Чек-листы по разделам</h3>
|
||
<p>10 разделов проверки: территория, электро- и пожарная безопасность, работа на высоте, СИЗ, грузоподъемные механизмы, документация и другие.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Фотофиксация нарушений</h3>
|
||
<p>Фото до и после устранения с привязкой к конкретному пункту проверки. Все снимки хранятся в карточке нарушения.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Автоформирование предписаний</h3>
|
||
<p>На основе результатов проверки система сама генерирует «Указание по БиОТ» — готовый документ с таблицей нарушений, сроками и ответственными.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Экспорт в PDF и Word</h3>
|
||
<p>Готовые шаблоны документов. Электронная подпись и QR-код для проверки подлинности предписания.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Статистика и аналитика</h3>
|
||
<p>Количество нарушений по объектам, рейтинг подразделений, повторяющиеся нарушения, просроченные мероприятия — всё на дашборде руководителя.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Контроль сроков</h3>
|
||
<p>Уведомления о приближающихся и просроченных сроках устранения. Ответственные видят свои задачи в реальном времени.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How it works -->
|
||
<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">Как это работает</div>
|
||
<h2>4 шага от проверки до отчёта</h2>
|
||
<p class="subtitle">Весь процесс занимает минуты, а не часы.</p>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h3>Инспектор заполняет чек-лист</h3>
|
||
<p>Открывает приложение на объекте, проходит по разделам, отмечает «соответствует / не соответствует / не применяется».</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h3>Фиксирует нарушения</h3>
|
||
<p>Фотографирует, указывает степень риска, оставляет комментарий и назначает срок устранения.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h3>Система формирует предписание</h3>
|
||
<p>Автоматически создаётся документ «Указание по БиОТ» с таблицей нарушений, ответственными и сроками.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h3>Руководитель видит аналитику</h3>
|
||
<p>Дашборд с графиками, рейтингом подразделений и просроченными мероприятиями. Уведомления о сроках.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Checklist sections -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-label">Чек-лист</div>
|
||
<h2>10 разделов проверки</h2>
|
||
<p class="subtitle">Инспектор последовательно проходит каждый раздел прямо на объекте.</p>
|
||
<div class="checklist-grid">
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Территория объекта</strong> Состояние проходов, проездов, ограждений, освещения, складирования</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Производственные помещения</strong> Состояние полов, стен, потолков, вентиляции, рабочих мест</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Электробезопасность</strong> Заземление, изоляция, щиты, предупреждающие знаки, допуски</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Пожарная безопасность</strong> Огнетушители, гидранты, планы эвакуации, датчики, выходы</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Работа на высоте</strong> Страховочные системы, ограждения, наряды-допуски, обучение</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Средства защиты (СИЗ)</strong> Каски, очки, перчатки, спецобувь — наличие, состояние, сроки</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Грузоподъемные механизмы</strong> Краны, тельферы, стропы — освидетельствование, бирки, журналы</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Охрана труда и ПБ</strong> Инструктажи, обучение, медосмотры, знаки безопасности</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Документация и допуски</strong> Журналы, удостоверения, наряды, протоколы проверок</div></div>
|
||
<div class="check-item"><div class="check-icon">></div><div class="check-text"><strong>Устранение нарушений</strong> Повторный обход, фото «после», отметка об исполнении</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Document preview + Stats visual -->
|
||
<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="feature-row">
|
||
<div class="feature-text">
|
||
<div class="section-label">На выходе</div>
|
||
<h3>Автоматическое «Указание по БиОТ»</h3>
|
||
<p>После завершения проверки система формирует готовый документ с таблицей нарушений. Экспорт одним нажатием.</p>
|
||
<ul>
|
||
<li>PDF с электронной подписью</li>
|
||
<li>Word-шаблон (.docx) для редактирования</li>
|
||
<li>QR-код для проверки подлинности</li>
|
||
<li>Ответственные и сроки — в таблице</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-visual">
|
||
<div class="doc-preview">
|
||
<div class="doc-header">Указание по безопасности и охране труда № 12/06</div>
|
||
<table class="doc-table">
|
||
<tr><th>№</th><th>Нарушение</th><th>Требование</th><th>Срок</th></tr>
|
||
<tr><td>1</td><td><span class="status red"></span> Отсутствует ограждение</td><td>Установить защитное ограждение</td><td>15.06.2026</td></tr>
|
||
<tr><td>2</td><td><span class="status red"></span> Не используется каска</td><td>Обеспечить применение СИЗ</td><td>10.06.2026</td></tr>
|
||
<tr><td>3</td><td><span class="status amber"></span> Просрочен журнал</td><td>Обновить записи в журнале</td><td>20.06.2026</td></tr>
|
||
<tr><td>4</td><td><span class="status green"></span> —</td><td>Устранено</td><td>—</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-row">
|
||
<div class="feature-visual" style="order:2">
|
||
<div class="stats-visual">
|
||
<div class="stat-card"><div class="val">142</div><div class="lbl">Проверок за месяц</div></div>
|
||
<div class="stat-card danger"><div class="val">37</div><div class="lbl">Нарушений выявлено</div></div>
|
||
<div class="stat-card"><div class="val">12</div><div class="lbl">Объектов проверено</div></div>
|
||
<div class="stat-card warn"><div class="val">5</div><div class="lbl">Просрочено</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="section-label">Аналитика</div>
|
||
<h3>Панель руководителя</h3>
|
||
<p>Дашборд в реальном времени: сколько проверок проведено, какие нарушения типовые, кто из подразделений в красной зоне.</p>
|
||
<ul>
|
||
<li>Рейтинг подразделений по нарушениям</li>
|
||
<li>Диаграммы по типам нарушений</li>
|
||
<li>Контроль просроченных мероприятий</li>
|
||
<li>Уведомления — email и push</li>
|
||
</ul>
|
||
</div>
|
||
<div></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="cards">
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Flutter</h3>
|
||
<p>Мобильное приложение для Android и iOS. Один код для двух платформ, быстро и недорого.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>FastAPI + Python</h3>
|
||
<p>Серверная часть: API для приложения, генерация PDF/Word, хранение фото, авторизация.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>PostgreSQL</h3>
|
||
<p>База данных: чек-листы, проверки, нарушения, пользователи, роли. Надёжно и масштабируемо.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">></div>
|
||
<h3>Роли пользователей</h3>
|
||
<p>Инспектор — заполняет чек-листы. Руководитель — видит аналитику. Администратор — управляет системой.</p>
|
||
</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 месяца. В первой версии: авторизация, чек-листы, фотофиксация, генерация предписаний, экспорт в PDF.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Можно ли адаптировать чек-листы под наше предприятие?</summary>
|
||
<p>Да, список разделов и пунктов проверки настраивается под требования конкретного предприятия или отрасли.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Как работает электронная подпись?</summary>
|
||
<p>Приложение формирует PDF с уникальным QR-кодом и хеш-суммой документа. При сканировании QR-кода любой может проверить подлинность предписания.</p>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Нужно ли подключение к интернету на объекте?</summary>
|
||
<p>Приложение работает офлайн: все данные сохраняются локально и синхронизируются с сервером при появлении сети.</p>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container" style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;width:100%">
|
||
<span>2026 · Инспектор БиОТ</span>
|
||
<a href="#waitlist">Оставить заявку</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|