Files

898 lines
74 KiB
HTML
Raw Permalink 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.0">
<title>База знаний — АгроТО</title>
<meta name="description" content="Практические руководства и ответы на частые вопросы по работе с платформой АгроТО.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--g50:#f2f8f4;--g100:#dff0e6;--g200:#b8ddc6;--g300:#82c49d;--g400:#4a9e64;
--g500:#2d8049;--g600:#246639;--g700:#1e5a33;--g800:#174829;--g900:#0f2f1b;
--ink:#111917;--ink2:#2d3b34;--ink3:#6b7f74;
--white:#ffffff;--bg:#f7f9f7;--bg2:#f0f4f1;--sand:#dde5de;
--r1:8px;--r2:12px;--r3:16px;
--sh1:0 1px 4px rgba(0,0,0,.06);--sh2:0 4px 16px rgba(0,0,0,.08);
--t:.18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
a{color:var(--g600);text-decoration:none}
a:hover{color:var(--g800)}
/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
border-bottom:1px solid var(--sand);padding:0 max(24px,calc((100vw - 1160px)/2));
display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-logo{display:flex;align-items:center;gap:8px;font-family:'Onest',sans-serif;font-weight:600;font-size:1rem;color:var(--ink)}
.nav-mark{width:28px;height:28px;border-radius:7px;background:var(--g700);display:flex;align-items:center;justify-content:center}
.nav-links-right{display:flex;align-items:center;gap:16px}
.nav-links-right a{font-size:0.85rem;color:var(--ink2)}
.btn-sm{padding:7px 16px;border-radius:var(--r1);font-size:0.82rem;font-weight:600;background:var(--g700);color:white;transition:var(--t)}
.btn-sm:hover{background:var(--g900);color:white}
.doc-badge{display:inline-flex;align-items:center;gap:5px;background:var(--g50);border:1px solid var(--g200);
color:var(--g700);font-size:0.72rem;font-weight:600;padding:3px 10px;border-radius:99px}
/* HERO */
.kb-hero{background:var(--g900);padding:64px max(24px,calc((100vw - 1160px)/2)) 48px;text-align:center}
.kb-hero h1{font-family:'Onest',sans-serif;font-size:2.2rem;font-weight:700;color:white;margin-bottom:12px}
.kb-hero p{font-size:1rem;color:rgba(255,255,255,0.6);margin-bottom:32px}
.kb-search-wrap{max-width:520px;margin:0 auto;position:relative}
.kb-search{width:100%;height:48px;padding:0 48px 0 18px;border-radius:var(--r2);border:none;
font-size:0.95rem;color:var(--ink);outline:none;font-family:inherit}
.kb-search::placeholder{color:var(--ink3)}
.kb-search-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink3)}
/* LAYOUT */
.kb-wrap{max-width:1100px;margin:0 auto;padding:56px 24px 96px}
/* CATEGORY TABS */
.kb-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.kb-cat{padding:7px 16px;border-radius:99px;border:1.5px solid var(--sand);font-size:0.83rem;
font-weight:500;color:var(--ink2);cursor:pointer;transition:var(--t);background:var(--white)}
.kb-cat:hover{border-color:var(--g300);color:var(--g700)}
.kb-cat.active{background:var(--g700);color:white;border-color:var(--g700)}
/* SECTIONS */
.kb-section{margin-bottom:56px}
.kb-section-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.kb-section-ico{width:36px;height:36px;border-radius:10px;background:var(--g50);border:1px solid var(--g100);
display:flex;align-items:center;justify-content:center}
.kb-section-ico svg{width:18px;height:18px;stroke:var(--g600)}
.kb-section-title{font-family:'Onest',sans-serif;font-size:1.2rem;font-weight:600;color:var(--ink)}
/* ARTICLE CARDS */
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kb-card{border:1px solid var(--sand);border-radius:var(--r2);padding:20px;background:var(--white);
transition:box-shadow var(--t),border-color var(--t);cursor:pointer;display:block}
.kb-card:hover{box-shadow:var(--sh2);border-color:var(--g200)}
.kb-card-tag{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
color:var(--g500);margin-bottom:8px;display:block}
.kb-card h3{font-size:0.9rem;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:8px}
.kb-card p{font-size:0.8rem;color:var(--ink3);line-height:1.55;margin:0}
.kb-card-arrow{display:flex;align-items:center;gap:4px;font-size:0.78rem;color:var(--g500);margin-top:14px;font-weight:500}
/* ARTICLE VIEW */
.kb-article-wrap{display:none;max-width:760px}
.kb-article-wrap.show{display:block}
.kb-back{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--ink3);
margin-bottom:28px;cursor:pointer;transition:color var(--t)}
.kb-back:hover{color:var(--g700)}
.kb-article h1{font-family:'Onest',sans-serif;font-size:1.8rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.kb-article .meta{font-size:0.8rem;color:var(--ink3);margin-bottom:32px;display:flex;gap:16px}
.kb-article h2{font-size:1.1rem;font-weight:600;color:var(--ink);margin:32px 0 12px}
.kb-article p{font-size:0.92rem;color:var(--ink2);line-height:1.75;margin-bottom:14px}
.kb-article ul,.kb-article ol{padding-left:20px;margin-bottom:14px}
.kb-article li{font-size:0.92rem;color:var(--ink2);line-height:1.75;margin-bottom:4px}
.callout{border-radius:var(--r2);padding:14px 18px;margin:18px 0;font-size:0.88rem;line-height:1.65}
.callout-info{background:var(--g50);border-left:3px solid var(--g400);color:var(--ink2)}
.callout-warn{background:#fffbf0;border-left:3px solid #f0a500;color:#5a4200}
.callout strong{font-weight:600}
.steps{counter-reset:step;display:flex;flex-direction:column;gap:14px;margin:16px 0}
.step{display:flex;gap:14px;align-items:flex-start}
.step-num{counter-increment:step;min-width:26px;height:26px;border-radius:50%;background:var(--g700);
color:white;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-num::before{content:counter(step)}
.step-body h4{font-size:0.9rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.step-body p{font-size:0.85rem;color:var(--ink3);margin:0;line-height:1.55}
/* POPULAR */
.kb-popular{background:var(--bg);border-radius:var(--r3);padding:32px;margin-bottom:48px}
.kb-popular h2{font-family:'Onest',sans-serif;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:16px}
.kb-popular-list{display:flex;flex-direction:column;gap:0}
.kb-popular-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--sand);cursor:pointer}
.kb-popular-item:last-child{border-bottom:none}
.kb-popular-item:hover .kp-title{color:var(--g700)}
.kp-num{font-size:0.72rem;font-weight:700;color:var(--ink3);min-width:18px}
.kp-title{font-size:0.88rem;color:var(--ink2);transition:color var(--t)}
.kp-arr{margin-left:auto;color:var(--ink3)}
/* SEARCH RESULTS */
.kb-no-results{text-align:center;padding:48px;color:var(--ink3);display:none}
.kb-no-results.show{display:block}
footer{border-top:1px solid var(--sand);padding:24px max(24px,calc((100vw - 1160px)/2));
display:flex;justify-content:space-between;align-items:center}
footer p{font-size:0.8rem;color:var(--ink3)}
footer a{font-size:0.8rem;color:var(--g500)}
@media(max-width:860px){
.kb-grid{grid-template-columns:1fr 1fr}
.kb-hero h1{font-size:1.6rem}
}
@media(max-width:560px){
.kb-grid{grid-template-columns:1fr}
}
footer{background:var(--bg);border-top:1px solid var(--sand);padding:60px max(24px,calc((100vw - 1160px)/2)) 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.footer-logo-mark{width:30px;height:30px;border-radius:7px;background:var(--g700);display:flex;align-items:center;justify-content:center}
.footer-logo-mark svg{width:14px;height:14px}
.footer-logo-name{font-family:'Onest',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.footer-tagline{font-size:0.85rem;color:var(--ink3);line-height:1.65;max-width:260px;margin-bottom:20px}
.footer-contact{font-size:0.82rem;color:var(--ink3)}
.footer-contact a{color:var(--g500)}
.footer-col h4{font-family:'Onest',sans-serif;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:0.88rem;color:var(--ink2);transition:color 0.22s ease}
.footer-col ul a:hover{color:var(--g700)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sand);padding-top:24px}
.footer-bottom p{font-size:0.8rem;color:var(--ink3)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-bottom{flex-direction:column;gap:8px;text-align:center}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
:root{--g900:#173626;--g700:#1e5c3a;--g500:#2d7d53;--g400:#3d9966;--g300:#5db37d;--g50:#eef8f2;--bg:#faf9f6;--ink:#151515;--ink2:#404040;--ink3:#767676;--sand:#e6e0d5;--t:.22s ease}
.cta-section{background:var(--g900);text-align:center;padding:96px max(24px,calc((100vw - 1160px)/2));position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(45,125,83,0.25) 0%,transparent 70%)}
.cta-inner{position:relative;z-index:1}
.cta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:white;margin-bottom:20px}
.cta-eyebrow::before{content:'';width:18px;height:2px;background:var(--g400);border-radius:2px}
.cta-section h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:600;color:white;margin-bottom:16px;letter-spacing:-0.02em;line-height:1.15}
.cta-section h2 em{font-style:italic;color:var(--g300)}
.cta-sub{font-size:1.05rem;color:rgba(255,255,255,0.6);margin-bottom:40px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:10px;font-family:inherit;font-size:0.9rem;font-weight:500;cursor:pointer;border:none;transition:all var(--t);white-space:nowrap;text-decoration:none}
.btn-xl{padding:14px 32px;font-size:1rem;font-weight:600;border-radius:12px}
.btn-cta-white{background:white;color:var(--g900)}
.btn-cta-white:hover{background:var(--g50);transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.btn-cta-ghost{background:transparent;color:rgba(255,255,255,0.75);border:1.5px solid rgba(255,255,255,0.2)}
.btn-cta-ghost:hover{background:rgba(255,255,255,0.08);color:white;border-color:rgba(255,255,255,0.35)}
.cta-note{font-size:0.82rem;color:rgba(255,255,255,0.4)}
.cta-note a{color:rgba(255,255,255,0.6);border-bottom:1px dashed rgba(255,255,255,0.25)}
.cta-note a:hover{color:white}
footer{background:var(--bg);border-top:1px solid var(--sand);padding:60px max(24px,calc((100vw - 1160px)/2)) 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.footer-logo-mark{width:30px;height:30px;border-radius:7px;background:var(--g700);display:flex;align-items:center;justify-content:center}
.footer-logo-mark svg{width:14px;height:14px}
.footer-logo-name{font-family:inherit;font-weight:600;font-size:1.05rem;color:var(--ink)}
.footer-tagline{font-size:0.85rem;color:var(--ink3);line-height:1.65;max-width:260px;margin-bottom:20px}
.footer-contact{font-size:0.82rem;color:var(--ink3)}
.footer-contact a{color:var(--g500)}
.footer-col h4{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0}
.footer-col ul a{font-size:0.88rem;color:var(--ink2);transition:color var(--t);text-decoration:none}
.footer-col ul a:hover{color:var(--g700)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sand);padding-top:24px}
.footer-bottom p{font-size:0.8rem;color:var(--ink3)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.cta-section{padding:72px 24px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px;text-align:center}}
</style>
</head>
<body>
<nav>
<a href="/" class="nav-logo">
<div class="nav-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
АгроТО
</a>
<span class="doc-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
База знаний
</span>
<div class="nav-links-right">
<a href="/docs.html">Документация</a>
<a href="https://app.agroto.ru" class="btn-sm">Войти в систему</a>
</div>
</nav>
<!-- HERO + SEARCH -->
<div class="kb-hero">
<h1>База знаний АгроТО</h1>
<p>Пошаговые инструкции, ответы на вопросы и практические советы</p>
<div class="kb-search-wrap">
<input class="kb-search" type="text" id="kbSearch" placeholder="Поиск по статьям...">
<span class="kb-search-ico">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
</span>
</div>
</div>
<div class="kb-wrap">
<!-- ARTICLE READER (скрыт по умолчанию) -->
<div class="kb-article-wrap" id="articleWrap">
<div class="kb-back" onclick="closeArticle()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
Все статьи
</div>
<div class="kb-article" id="articleContent"></div>
</div>
<!-- СПИСОК СТАТЕЙ -->
<div id="kbMain">
<!-- ПОПУЛЯРНОЕ -->
<div class="kb-popular">
<h2>🔥 Популярные статьи</h2>
<div class="kb-popular-list">
<div class="kb-popular-item" onclick="openArticle('add-equipment')">
<span class="kp-num">1</span>
<span class="kp-title">Как добавить единицу оборудования</span>
<svg class="kp-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
<div class="kb-popular-item" onclick="openArticle('create-schedule')">
<span class="kp-num">2</span>
<span class="kp-title">Настройка расписания планового ТО</span>
<svg class="kp-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
<div class="kb-popular-item" onclick="openArticle('emergency-request')">
<span class="kp-num">3</span>
<span class="kp-title">Как создать аварийную заявку</span>
<svg class="kp-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
<div class="kb-popular-item" onclick="openArticle('install-pwa')">
<span class="kp-num">4</span>
<span class="kp-title">Установка приложения на телефон (PWA)</span>
<svg class="kp-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
<div class="kb-popular-item" onclick="openArticle('excel-import')">
<span class="kp-num">5</span>
<span class="kp-title">Импорт оборудования из Excel</span>
<svg class="kp-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
</div>
<!-- ФИЛЬТР -->
<div class="kb-cats" id="kbCats">
<div class="kb-cat active" data-cat="all">Все статьи</div>
<div class="kb-cat" data-cat="start">Начало работы</div>
<div class="kb-cat" data-cat="equipment">Оборудование</div>
<div class="kb-cat" data-cat="maintenance">Плановое ТО</div>
<div class="kb-cat" data-cat="emergency">Аварийные заявки</div>
<div class="kb-cat" data-cat="inventory">Склад</div>
<div class="kb-cat" data-cat="mobile">Мобильное</div>
</div>
<div class="kb-no-results" id="kbNoResults">По вашему запросу статей не найдено</div>
<!-- НАЧАЛО РАБОТЫ -->
<div class="kb-section" data-cat="start">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg></div>
<span class="kb-section-title">Начало работы</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('first-login')">
<span class="kb-card-tag">Начало работы</span>
<h3>Первый вход и настройка организации</h3>
<p>Как настроить предприятие, подразделения и часовой пояс при первом входе</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('add-users')">
<span class="kb-card-tag">Начало работы</span>
<h3>Добавление сотрудников и назначение ролей</h3>
<p>Как создать учётные записи для механиков, инженеров и руководителей</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('excel-import')">
<span class="kb-card-tag">Начало работы</span>
<h3>Импорт оборудования из Excel</h3>
<p>Быстрый перенос справочника техники из таблиц в систему без ручного ввода</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
<!-- ОБОРУДОВАНИЕ -->
<div class="kb-section" data-cat="equipment">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
<span class="kb-section-title">Оборудование</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('add-equipment')">
<span class="kb-card-tag">Оборудование</span>
<h3>Как добавить единицу оборудования</h3>
<p>Пошаговая инструкция: заполнение карточки, категория, ответственный, фото</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('equipment-status')">
<span class="kb-card-tag">Оборудование</span>
<h3>Статусы оборудования: когда и как менять</h3>
<p>Разбор всех статусов: активно, в ремонте, неисправно, списано</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('work-hours')">
<span class="kb-card-tag">Оборудование</span>
<h3>Учёт моточасов и пробега</h3>
<p>Как вносить наработку и привязывать расписания ТО к показаниям счётчиков</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
<!-- ПЛАНОВОЕ ТО -->
<div class="kb-section" data-cat="maintenance">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
<span class="kb-section-title">Плановое ТО</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('create-schedule')">
<span class="kb-card-tag">Плановое ТО</span>
<h3>Настройка расписания планового ТО</h3>
<p>Как создать расписание, выбрать периодичность и назначить ответственного</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('complete-task')">
<span class="kb-card-tag">Плановое ТО</span>
<h3>Как отметить задачу выполненной</h3>
<p>Закрытие задачи, добавление фото и комментариев, списание запчастей</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('overdue-tasks')">
<span class="kb-card-tag">Плановое ТО</span>
<h3>Работа с просроченными задачами</h3>
<p>Почему задачи уходят в просрочку и как правильно их обрабатывать</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
<!-- АВАРИЙНЫЕ ЗАЯВКИ -->
<div class="kb-section" data-cat="emergency">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
<span class="kb-section-title">Аварийные заявки</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('emergency-request')">
<span class="kb-card-tag">Аварийные заявки</span>
<h3>Как создать аварийную заявку</h3>
<p>Пошаговая инструкция создания заявки с телефона, выбор приоритета и техники</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('emergency-workflow')">
<span class="kb-card-tag">Аварийные заявки</span>
<h3>Жизненный цикл аварийной заявки</h3>
<p>Как заявка проходит путь от открытия до закрытия, кто и что делает на каждом этапе</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('priority-guide')">
<span class="kb-card-tag">Аварийные заявки</span>
<h3>Как правильно выбрать приоритет заявки</h3>
<p>Критерии для определения критического, высокого, среднего и низкого приоритета</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
<!-- СКЛАД -->
<div class="kb-section" data-cat="inventory">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
<span class="kb-section-title">Склад запчастей</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('add-part')">
<span class="kb-card-tag">Склад</span>
<h3>Добавление запчасти на склад</h3>
<p>Создание позиции: артикул, единицы измерения, минимальный остаток, привязка к технике</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('low-stock')">
<span class="kb-card-tag">Склад</span>
<h3>Настройка оповещений о минимальном остатке</h3>
<p>Как система предупреждает об исчерпании запасов и кто получает уведомления</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('writeoff')">
<span class="kb-card-tag">Склад</span>
<h3>Списание запчастей при выполнении работ</h3>
<p>Автоматическое и ручное списание расходников при закрытии задач ТО</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
<!-- МОБИЛЬНОЕ -->
<div class="kb-section" data-cat="mobile">
<div class="kb-section-header">
<div class="kb-section-ico"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></div>
<span class="kb-section-title">Мобильное приложение</span>
</div>
<div class="kb-grid">
<div class="kb-card" onclick="openArticle('install-pwa')">
<span class="kb-card-tag">Мобильное</span>
<h3>Установка приложения на телефон (PWA)</h3>
<p>Инструкция для Android и iOS: как добавить АгроТО на главный экран</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('offline-work')">
<span class="kb-card-tag">Мобильное</span>
<h3>Работа в офлайн-режиме</h3>
<p>Что доступно без интернета, как синхронизируются данные при появлении связи</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
<div class="kb-card" onclick="openArticle('push-setup')">
<span class="kb-card-tag">Мобильное</span>
<h3>Настройка push-уведомлений</h3>
<p>Как разрешить уведомления и настроить фильтры под свою роль</p>
<div class="kb-card-arrow">Читать <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
</div>
</div>
</div>
</div><!-- /kbMain -->
</div>
<section class="cta-section">
<div class="cta-inner">
<div class="cta-eyebrow">Начните сегодня</div>
<h2>Возьмите оборудование<br><em>под контроль</em></h2>
<p class="cta-sub">Быстрое внедрение. Персональная поддержка на старте.</p>
<div class="cta-actions">
<a href="https://app.agroto.ru" class="btn btn-xl btn-cta-white">
Начать работу
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="https://app.agroto.ru" class="btn btn-xl btn-cta-ghost">Смотреть демо</a>
</div>
<p class="cta-note">Или напишите нам: <a href="mailto:info@agroto.ru">info@agroto.ru</a></p>
</div>
</section>
<footer>
<div class="footer-grid">
<div>
<div class="footer-logo">
<div class="footer-logo-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
</svg>
</div>
<span class="footer-logo-name">АгроТО</span>
</div>
<p class="footer-tagline">CMMS-платформа для управления обслуживанием оборудования на агропредприятиях России.</p>
<p class="footer-contact">Написать нам: <a href="mailto:info@agroto.ru">info@agroto.ru</a></p>
</div>
<div class="footer-col">
<h4>Продукт</h4>
<ul>
<li><a href="/#features">Возможности</a></li>
<li><a href="/#pricing">Тарифы</a></li>
<li><a href="/#how">Как работает</a></li>
<li><a href="/#faq">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Компания</h4>
<ul>
<li><a href="/about.html">О нас</a></li>
<li><a href="/blog.html">Блог</a></li>
<li><a href="/contacts.html">Контакты</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Поддержка</h4>
<ul>
<li><a href="/docs.html">Документация</a></li>
<li><a href="/kb.html">База знаний</a></li>
<li><a href="mailto:info@agroto.ru">Email</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 АгроТО. Все права защищены.</p>
<p>Сделано в России 🇷🇺</p>
</div>
</footer>
<script>
// Контент статей
const articles = {
'add-equipment': {
tag:'Оборудование', title:'Как добавить единицу оборудования',
content:`
<p>Раздел «Оборудование» — центральный справочник всей техники предприятия. Вот как добавить новую единицу.</p>
<h2>Пошаговая инструкция</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Перейдите в раздел «Оборудование»</h4><p>В левом меню системы нажмите «Оборудование» или используйте быстрый доступ с дашборда.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите «+ Добавить»</h4><p>Кнопка в правом верхнем углу страницы.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Заполните основные поля</h4><p>Наименование (обязательно), категория (трактор, комбайн, грузовик и т.д.), марка и модель, год выпуска, инвентарный номер.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Укажите подразделение и ответственного</h4><p>Выберите участок или ферму, назначьте механика или инженера, ответственного за эту технику.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Добавьте фото (опционально)</h4><p>Загрузите фотографию техники — это поможет сотрудникам быстро идентифицировать оборудование в списке.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Сохраните карточку</h4><p>Нажмите «Сохранить». Оборудование появится в общем списке со статусом «Активно».</p></div></div>
</div>
<div class="callout callout-info"><strong>Совет:</strong> Если у вас много техники, воспользуйтесь импортом из Excel — это значительно быстрее ручного ввода.</div>
<h2>Что делать дальше</h2>
<p>После добавления оборудования создайте для него расписание планового ТО: перейдите в карточку техники и нажмите «+ Добавить расписание».</p>
`
},
'create-schedule': {
tag:'Плановое ТО', title:'Настройка расписания планового ТО',
content:`
<p>Расписания позволяют системе автоматически создавать задачи ТО в нужные сроки без ручного контроля.</p>
<h2>Типы расписаний</h2>
<ul>
<li><strong>Календарное</strong> — каждые N дней или в конкретные даты</li>
<li><strong>По наработке</strong> — каждые N моточасов или км пробега</li>
<li><strong>Сезонное</strong> — весенняя/осенняя подготовка, зимнее хранение</li>
<li><strong>Разовое</strong> — задача на конкретную дату</li>
</ul>
<h2>Как создать расписание</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте карточку оборудования</h4><p>Найдите нужную технику в разделе «Оборудование» и перейдите в её карточку.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Перейдите на вкладку «Расписания ТО»</h4><p>Нажмите «+ Добавить расписание».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите тип и периодичность</h4><p>Например: «Замена масла» → Календарное → каждые 90 дней.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Назначьте ответственного</h4><p>Выберите механика или инженера — он получит уведомление при создании задачи.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Укажите дату первой задачи</h4><p>Система создаст первую задачу в эту дату, далее — автоматически по расписанию.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Сохраните расписание</h4><p>Расписание активируется сразу. Ближайшая задача появится в разделе «Задачи ТО».</p></div></div>
</div>
<div class="callout callout-warn"><strong>Важно:</strong> Задачи создаются автоматически — за 3 дня до срока исполнитель получает push-уведомление.</div>
`
},
'emergency-request': {
tag:'Аварийные заявки', title:'Как создать аварийную заявку',
content:`
<p>Аварийную заявку может создать любой сотрудник — прямо с телефона, даже в поле.</p>
<h2>Создание заявки</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите «+ Аварийная заявка»</h4><p>Кнопка доступна на главном экране приложения и в разделе «Аварийные заявки».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите оборудование</h4><p>Найдите технику по названию или инвентарному номеру. Можно отсканировать QR-код с техники.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Опишите неисправность</h4><p>Коротко и чётко: что происходит, когда заметили, какие симптомы. ИИ-ассистент поможет сформулировать описание.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите приоритет</h4><p>Критический — техника полностью встала. Высокий — работает с ограничениями. Средний/Низкий — незначительная неисправность.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Прикрепите фото (рекомендуется)</h4><p>Фотография неисправности значительно ускоряет диагностику инженером.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Отправьте заявку</h4><p>Заявка мгновенно появляется у ответственного инженера с push-уведомлением.</p></div></div>
</div>
<div class="callout callout-info"><strong>Что происходит дальше:</strong> Инженер принимает заявку в работу, назначает механика и отслеживает выполнение. Вы получаете уведомления при каждом изменении статуса.</div>
`
},
'install-pwa': {
tag:'Мобильное', title:'Установка приложения на телефон (PWA)',
content:`
<p>АгроТО — прогрессивное веб-приложение (PWA). Оно работает как обычное приложение, но устанавливается прямо из браузера — без App Store и Google Play.</p>
<h2>Android (Chrome)</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте app.agroto.ru в Chrome</h4><p>Войдите под своей учётной записью.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Примите предложение установить</h4><p>Снизу появится баннер «Добавить АгроТО на главный экран». Нажмите «Установить».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Если баннера нет</h4><p>Нажмите ⋮ (меню Chrome) → «Установить приложение» или «Добавить на главный экран».</p></div></div>
</div>
<h2>iOS (iPhone / iPad)</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте app.agroto.ru в Safari</h4><p>Только Safari поддерживает установку PWA на устройствах Apple.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите кнопку «Поделиться»</h4><p>Значок квадрата со стрелкой вверх — в нижней панели браузера.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите «На экран «Домой»»</h4><p>Прокрутите список действий и нажмите «На экран "Домой"», затем «Добавить».</p></div></div>
</div>
<div class="callout callout-info"><strong>Офлайн-работа:</strong> После установки приложение кэширует данные. При потере связи вы сможете просматривать задачи и вносить отметки — они синхронизируются при появлении интернета.</div>
`
},
'excel-import': {
tag:'Начало работы', title:'Импорт оборудования из Excel',
content:`
<p>Если у вас уже есть список техники в Excel — не нужно вводить всё вручную. Система поддерживает импорт справочника оборудования.</p>
<h2>Подготовка файла</h2>
<p>Скачайте шаблон в разделе «Оборудование» → «Импорт» → «Скачать шаблон». Заполните обязательные колонки:</p>
<ul>
<li><strong>Наименование</strong> — название техники (обязательно)</li>
<li><strong>Категория</strong> — трактор, комбайн, грузовик, прицеп, и т.д.</li>
<li><strong>Марка и Модель</strong> — производитель и модификация</li>
<li><strong>Инвентарный номер</strong> — уникальный номер на предприятии</li>
<li><strong>Год выпуска</strong> — четыре цифры</li>
<li><strong>Подразделение</strong> — должно совпадать с названием в системе</li>
</ul>
<div class="callout callout-warn"><strong>Важно:</strong> Категории и подразделения в файле должны в точности совпадать с теми, что заведены в системе. Создайте их заранее в разделе «Настройки».</div>
<h2>Загрузка файла</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте раздел «Оборудование»</h4><p>Нажмите «Импорт» → «Загрузить Excel».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите подготовленный файл</h4><p>Форматы: .xlsx, .xls, .csv. Размер до 10 МБ.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Проверьте предпросмотр</h4><p>Система покажет, что будет импортировано, и выделит строки с ошибками.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Подтвердите импорт</h4><p>Нажмите «Импортировать». Оборудование добавится в справочник.</p></div></div>
</div>
<div class="callout callout-info">Если формат ваших данных нестандартный, обратитесь к менеджеру — поможем подготовить файл в рамках онбординга.</div>
`
},
'first-login': {
tag:'Начало работы', title:'Первый вход и настройка организации',
content:`
<p>После получения доступа к системе первым делом настройте организацию — это займёт 10–15 минут.</p>
<h2>Настройка организации</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Войдите в систему</h4><p>Перейдите на app.agroto.ru и введите логин и пароль из письма. Сразу смените пароль в настройках профиля.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Настройте профиль организации</h4><p>Настройки → Организация. Укажите полное название, ИНН (опционально), часовой пояс и регион.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Создайте подразделения</h4><p>Настройки → Подразделения. Добавьте фермы, участки, цеха — всё, что есть на предприятии. Они понадобятся при добавлении техники и сотрудников.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Настройте категории оборудования</h4><p>По умолчанию доступны базовые категории. При необходимости добавьте свои в Настройки → Категории.</p></div></div>
</div>
<div class="callout callout-info"><strong>Следующий шаг:</strong> Добавьте сотрудников и внесите оборудование — вручную или через импорт Excel.</div>
`
},
'add-users': {
tag:'Начало работы', title:'Добавление сотрудников и назначение ролей',
content:`
<p>Каждый сотрудник получает отдельную учётную запись с нужным уровнем доступа.</p>
<h2>Роли в системе</h2>
<ul>
<li><strong>Администратор</strong> — полный доступ, управление пользователями и настройками</li>
<li><strong>Инженер</strong> — создание расписаний, управление оборудованием и складом, аналитика</li>
<li><strong>Механик</strong> — выполнение задач, создание аварийных заявок, добавление фото</li>
<li><strong>Наблюдатель</strong> — только просмотр, без возможности изменений</li>
</ul>
<h2>Как добавить сотрудника</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Перейдите в «Персонал»</h4><p>Нажмите «+ Добавить сотрудника».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Введите данные</h4><p>Имя, фамилия, должность, подразделение, email или телефон для входа.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите роль</h4><p>Назначьте роль исходя из обязанностей сотрудника.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Сохраните и отправьте приглашение</h4><p>Сотрудник получит письмо или SMS с данными для первого входа.</p></div></div>
</div>
<div class="callout callout-warn"><strong>Рекомендация:</strong> Не давайте роль Администратора всем подряд. Механикам достаточно роли Механик — они увидят только свои задачи.</div>
`
},
'offline-work': {
tag:'Мобильное', title:'Работа в офлайн-режиме',
content:`
<p>АгроТО разработан с учётом реалий сельской местности — нестабильный или отсутствующий интернет не останавливает работу.</p>
<h2>Что доступно без интернета</h2>
<ul>
<li>Просмотр назначенных задач ТО</li>
<li>Отметка задачи как выполненной</li>
<li>Добавление комментариев к задачам</li>
<li>Создание аварийной заявки</li>
<li>Просмотр карточек оборудования</li>
<li>Просмотр склада (закэшированные данные)</li>
</ul>
<h2>Синхронизация</h2>
<p>Все действия, выполненные офлайн, сохраняются в очереди на устройстве. Как только появляется интернет (Wi-Fi или мобильная сеть) — данные автоматически синхронизируются с сервером.</p>
<div class="callout callout-info"><strong>На тарифе Энтерпрайз</strong> с физическим сервером на предприятии интернет вообще не требуется: система работает в локальной сети круглосуточно.</div>
`
},
'complete-task': {
tag:'Плановое ТО', title:'Как отметить задачу выполненной',
content:`
<p>Закрытие задачи фиксирует факт выполнения работ, списывает запчасти и обновляет историю оборудования.</p>
<h2>Инструкция</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте задачу</h4><p>В разделе «Задачи ТО» найдите свою задачу или откройте её из уведомления.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите «Взять в работу»</h4><p>Статус изменится на «В работе». Зафиксируется время начала.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выполните работы</h4><p>Следуйте описанию задачи. Если нужна помощь — используйте ИИ-ассистент прямо в карточке задачи.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Добавьте комментарий и фото</h4><p>Опишите что было сделано, какие аномалии обнаружены. Прикрепите фото результата.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Спишите запчасти</h4><p>Если расходники использовались — укажите позиции и количество. Склад обновится автоматически.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите «Выполнено»</h4><p>Задача закрывается. Следующая по расписанию создастся автоматически.</p></div></div>
</div>
`
},
'overdue-tasks': {
tag:'Плановое ТО', title:'Работа с просроченными задачами',
content:`
<p>Просроченные задачи — важный сигнал: запланированное ТО не выполнено в срок. Игнорировать их нельзя.</p>
<h2>Почему задачи уходят в просрочку</h2>
<ul>
<li>Исполнитель не получил или не увидел уведомление</li>
<li>Техника была в ремонте и недоступна</li>
<li>Не было нужных запчастей</li>
<li>Задача была назначена уволившемуся сотруднику</li>
</ul>
<h2>Как обработать просроченную задачу</h2>
<p>Просроченные задачи отображаются красным на дашборде. Инженер или администратор должны:</p>
<ul>
<li>Выяснить причину просрочки через комментарии</li>
<li>Переназначить исполнителя при необходимости</li>
<li>Перенести срок или закрыть с пометкой о причине</li>
</ul>
<div class="callout callout-warn"><strong>Не удаляйте просроченные задачи</strong> без фиксации причины — история ТО важна для анализа надёжности техники.</div>
`
},
'emergency-workflow': {
tag:'Аварийные заявки', title:'Жизненный цикл аварийной заявки',
content:`
<p>Аварийная заявка проходит несколько этапов от момента создания до закрытия.</p>
<h2>Этапы заявки</h2>
<ul>
<li><strong>Новая</strong> — только что создана, ждёт реакции инженера</li>
<li><strong>В работе</strong> — инженер принял, механик назначен</li>
<li><strong>Ожидает запчасти</strong> — нужны запчасти со склада или внешний заказ</li>
<li><strong>Выполнена</strong> — работы завершены, техника в строю</li>
<li><strong>Отменена</strong> — заявка оказалась ошибочной или дублирующей</li>
</ul>
<h2>Кто что делает</h2>
<ul>
<li><strong>Заявитель (любой сотрудник)</strong> — создаёт заявку, прикладывает фото</li>
<li><strong>Инженер</strong> — принимает, оценивает, назначает механика и запчасти</li>
<li><strong>Механик</strong> — выполняет ремонт, отмечает выполнение, добавляет комментарий</li>
<li><strong>Администратор</strong> — видит всё, контролирует сроки реакции</li>
</ul>
<div class="callout callout-info">Каждый участник получает push-уведомление при изменении статуса заявки, которая к нему относится.</div>
`
},
'priority-guide': {
tag:'Аварийные заявки', title:'Как правильно выбрать приоритет заявки',
content:`
<p>Правильный приоритет помогает инженеру быстро понять срочность и принять верное решение о распределении ресурсов.</p>
<h2>Критерии выбора</h2>
<ul>
<li><strong>Критический</strong> — техника полностью встала, работы остановлены, угроза урожаю или безопасности людей. Реакция: до 2 часов.</li>
<li><strong>Высокий</strong> — серьёзная неисправность, техника работает с ограничениями, производительность упала. Реакция: до 8 часов.</li>
<li><strong>Средний</strong> — неисправность есть, но техника способна продолжать работу без критических рисков. Реакция: до 24 часов.</li>
<li><strong>Низкий</strong> — незначительный дефект, не влияет на производительность, можно устранить в плановом порядке. Реакция: до 72 часов.</li>
</ul>
<div class="callout callout-warn"><strong>Правило:</strong> Лучше поставить приоритет выше, чем занизить его. Инженер сам скорректирует при необходимости.</div>
`
},
'add-part': {
tag:'Склад', title:'Добавление запчасти на склад',
content:`
<p>Склад в АгроТО — это не просто список позиций, а инструмент контроля наличия запчастей и расходников.</p>
<h2>Как добавить позицию</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Перейдите в раздел «Склад»</h4><p>Нажмите «+ Добавить позицию».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Заполните карточку</h4><p>Наименование, артикул (каталожный номер), единица измерения (шт, л, кг, м), текущий остаток, цена за единицу.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Установите минимальный остаток</h4><p>Когда количество упадёт ниже этого значения — система отправит уведомление ответственному.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Привяжите к оборудованию (опционально)</h4><p>Укажите, для какой техники предназначена запчасть. Это упрощает поиск нужной позиции при закрытии задач.</p></div></div>
</div>
`
},
'low-stock': {
tag:'Склад', title:'Настройка оповещений о минимальном остатке',
content:`
<p>Система автоматически следит за остатками и предупреждает заранее — до того, как запчасти закончатся в самый неподходящий момент.</p>
<h2>Как работают оповещения</h2>
<p>Для каждой позиции на складе задаётся минимальный остаток (порог). Как только фактическое количество опускается ниже — инженер и администратор получают уведомление.</p>
<h2>Где видны позиции с низким остатком</h2>
<ul>
<li>На дашборде в блоке «Склад» — счётчик позиций ниже минимума</li>
<li>В разделе «Склад» позиции помечаются красным</li>
<li>В push-уведомлении с названием позиции и текущим остатком</li>
</ul>
<h2>Правила хорошего минимума</h2>
<p>Установите порог так, чтобы оставалось время сделать заказ до того, как запасы полностью иссякнут. Для расходников с долгой доставкой — порог выше, для доступных позиций — ниже.</p>
`
},
'writeoff': {
tag:'Склад', title:'Списание запчастей при выполнении работ',
content:`
<p>При закрытии задачи ТО механик может сразу указать, какие запчасти и расходники были использованы. Склад обновляется автоматически.</p>
<h2>Списание при закрытии задачи</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте задачу и нажмите «Выполнено»</h4><p>Перед закрытием система предложит добавить использованные запчасти.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Выберите позиции со склада</h4><p>Найдите нужные запчасти по названию или артикулу. Укажите количество.</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Подтвердите закрытие</h4><p>Запчасти будут списаны, остатки на складе уменьшатся. Если остаток уйдёт ниже минимума — инженер получит уведомление.</p></div></div>
</div>
<h2>Ручное списание</h2>
<p>Списать запчасти можно и вне задачи: Склад → нужная позиция → «Списать». Укажите количество и причину. Это полезно при расходе материалов не в рамках конкретной задачи.</p>
`
},
'push-setup': {
tag:'Мобильное', title:'Настройка push-уведомлений',
content:`
<p>Push-уведомления помогают оперативно реагировать на новые задачи и аварийные ситуации даже когда вы не в системе.</p>
<h2>Как включить уведомления</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Войдите в систему</h4><p>При первом входе браузер спросит разрешение на уведомления. Нажмите «Разрешить».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Если отклонили ранее</h4><p>Перейдите в Настройки → Уведомления → «Включить push-уведомления». Следуйте инструкции для вашего браузера.</p></div></div>
</div>
<h2>Какие события вызывают уведомления</h2>
<ul>
<li>Назначена новая задача ТО на вас</li>
<li>Задача просрочена</li>
<li>Создана новая аварийная заявка (для инженеров)</li>
<li>Изменился статус вашей заявки</li>
<li>Остаток позиции на складе ниже минимума</li>
</ul>
<h2>Фильтрация по роли</h2>
<p>Механики получают уведомления только о своих задачах. Инженеры — обо всех задачах в своём подразделении. Администраторы — обо всём.</p>
`
},
'equipment-status': {
tag:'Оборудование', title:'Статусы оборудования: когда и как менять',
content:`
<p>Статус оборудования отражает его текущее состояние и влияет на то, создаются ли для него задачи ТО.</p>
<h2>Все статусы</h2>
<ul>
<li><strong>Активно</strong> — техника в эксплуатации. Задачи ТО создаются по расписанию. Доступна для аварийных заявок.</li>
<li><strong>В ремонте</strong> — техника временно выведена. Плановые задачи приостанавливаются. Заявка на ремонт фиксирует срок и исполнителя.</li>
<li><strong>Неисправно</strong> — критическая авария, требует немедленного вмешательства. Выделяется красным на дашборде.</li>
<li><strong>Списано</strong> — выведено из эксплуатации навсегда. Новые задачи не создаются, история сохраняется полностью.</li>
</ul>
<h2>Как изменить статус</h2>
<p>Откройте карточку оборудования → меню «⋮» → «Изменить статус». Выберите новый статус и при необходимости добавьте комментарий — он войдёт в историю оборудования.</p>
<div class="callout callout-info"><strong>Рекомендация:</strong> Не держите технику в статусе «В ремонте» без даты окончания — это усложняет планирование загрузки.</div>
`
},
'work-hours': {
tag:'Оборудование', title:'Учёт моточасов и пробега',
content:`
<p>Для техники, обслуживание которой привязано к наработке (моточасы, км), нужно регулярно обновлять показания счётчиков.</p>
<h2>Как обновить показания</h2>
<div class="steps">
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Откройте карточку оборудования</h4><p>Найдите технику в разделе «Оборудование».</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Нажмите «Обновить наработку»</h4><p>Введите текущие показания счётчика (не прибавку, а фактическое значение).</p></div></div>
<div class="step"><div class="step-num"></div><div class="step-body"><h4>Сохраните</h4><p>Система пересчитает, когда подойдёт срок следующего ТО по наработке.</p></div></div>
</div>
<h2>Частота обновления</h2>
<p>Рекомендуется обновлять показания ежедневно в период интенсивной эксплуатации (посевная, уборка). В межсезонье достаточно еженедельно.</p>
<div class="callout callout-warn"><strong>Важно:</strong> Если показания не обновляются, задачи по наработке не создадутся вовремя. Назначьте ответственного за ежедневное внесение данных.</div>
`
}
};
// Открытие статьи
function openArticle(id) {
const art = articles[id];
if (!art) return;
document.getElementById('articleContent').innerHTML = `
<div class="meta"><span>${art.tag}</span></div>
<h1>${art.title}</h1>
${art.content}
`;
document.getElementById('kbMain').style.display = 'none';
document.getElementById('articleWrap').classList.add('show');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function closeArticle() {
document.getElementById('articleWrap').classList.remove('show');
document.getElementById('kbMain').style.display = '';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Фильтр по категориям
document.querySelectorAll('.kb-cat').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.kb-cat').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const cat = btn.dataset.cat;
document.querySelectorAll('.kb-section').forEach(s => {
s.style.display = (cat === 'all' || s.dataset.cat === cat) ? '' : 'none';
});
document.querySelector('.kb-popular').style.display = cat === 'all' ? '' : 'none';
});
});
// Поиск
document.getElementById('kbSearch').addEventListener('input', function() {
const q = this.value.toLowerCase().trim();
if (!q) {
document.querySelectorAll('.kb-section').forEach(s => s.style.display = '');
document.querySelectorAll('.kb-cat')[0].click();
document.getElementById('kbNoResults').classList.remove('show');
document.querySelector('.kb-popular').style.display = '';
return;
}
let found = 0;
document.querySelectorAll('.kb-section').forEach(s => s.style.display = 'none');
document.querySelector('.kb-popular').style.display = 'none';
document.querySelectorAll('.kb-cat').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.kb-card').forEach(card => {
const text = card.innerText.toLowerCase();
const section = card.closest('.kb-section');
if (text.includes(q)) {
section.style.display = '';
found++;
}
});
document.getElementById('kbNoResults').classList.toggle('show', found === 0);
});
</script>
</body>
</html>