index.html - master - liatana/2464

index.html
402 строки18 KB
liatana
Create: index.html
24 июн 2026, 18:27
24 июн 2026, 18:27ff5e7ad
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>План изменений в документах по ОТ (приказ №2464)</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: #f4f7fc;
            font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
            padding: 2rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            max-width: 1300px;
            width: 100%;
            background: white;
            border-radius: 28px;
            box-shadow: 0 20px 40px -12px rgba(0,20,40,0.25);
            padding: 2.2rem 2.5rem;
            transition: all 0.2s;
        }

        h1 {
            font-size: 2.1rem;
            font-weight: 600;
            color: #0b2b4a;
            letter-spacing: -0.3px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            border-bottom: 3px solid #d0e0f0;
            padding-bottom: 0.9rem;
            margin-bottom: 2rem;
        }

        .badge-date {
            background: #1a4b75;
            color: white;
            font-size: 1rem;
            font-weight: 500;
            padding: 0.3rem 1.1rem;
            border-radius: 40px;
            margin-left: 8px;
            letter-spacing: 0.2px;
        }

        .subtitle {
            font-size: 1rem;
            color: #1f4973;
            background: #e5effa;
            display: inline-block;
            padding: 0.3rem 1.4rem;
            border-radius: 40px;
            font-weight: 500;
            margin-bottom: 1.2rem;
        }

        .grid-sections {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .section-block {
            background: #f9fcff;
            border-radius: 20px;
            padding: 1.5rem 1.8rem;
            border: 1px solid #e3edf6;
            transition: 0.1s ease;
        }

        .section-block h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.6rem;
            font-weight: 600;
            color: #0a314b;
            margin-bottom: 1.2rem;
            border-left: 6px solid #2a7ab0;
            padding-left: 1rem;
        }

        .section-block h2 small {
            font-size: 0.9rem;
            font-weight: 400;
            color: #3d6e96;
            margin-left: 6px;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.6rem;
            margin-top: 0.4rem;
        }

        .doc-card {
            background: white;
            border-radius: 18px;
            padding: 1.2rem 1.4rem 1.5rem;
            box-shadow: 0 6px 14px rgba(0, 32, 64, 0.04);
            border: 1px solid #dde9f5;
            transition: 0.15s;
            display: flex;
            flex-direction: column;
        }

        .doc-card:hover {
            border-color: #9bbdd9;
            box-shadow: 0 10px 20px -8px rgba(18, 67, 112, 0.08);
        }

        .doc-card h3 {
            font-weight: 600;
            font-size: 1.2rem;
            color: #103a5a;
            margin-bottom: 0.8rem;
            border-bottom: 1px dashed #c4d7e9;
            padding-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .doc-card ul {
            list-style: none;
            margin: 0.2rem 0 0.2rem 0;
            flex: 1;
        }

        .doc-card ul li {
            font-size: 0.95rem;
            line-height: 1.5;
            padding: 0.5rem 0 0.3rem 1.2rem;
            position: relative;
            color: #1d3b54;
            border-bottom: 1px solid #ecf3fa;
        }

        .doc-card ul li:last-child {
            border-bottom: none;
        }

        .doc-card ul li::before {
            content: "▹";
            position: absolute;
            left: 0;
            color: #1f77b0;
            font-weight: 500;
        }

        .doc-card .note {
            background: #eaf2fb;
            border-radius: 30px;
            padding: 0.2rem 0.9rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #1b5a82;
            letter-spacing: 0.2px;
            display: inline-block;
            margin-top: 0.5rem;
            align-self: flex-start;
        }

        .badge-priority {
            background: #dcebf9;
            border-radius: 40px;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.15rem 0.7rem;
            color: #004b7a;
            margin-left: 8px;
            white-space: nowrap;
        }

        .footnote {
            margin-top: 2.5rem;
            padding-top: 1.5rem;
            border-top: 2px solid #e1edf7;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.95rem;
            color: #23547b;
        }

        .footnote strong {
            font-weight: 600;
        }

        .tag {
            background: #d7e5f5;
            border-radius: 40px;
            padding: 0.15rem 0.9rem;
            font-weight: 500;
            font-size: 0.8rem;
            color: #12416b;
        }

        @media (max-width: 680px) {
            body { padding: 1rem 0.5rem; }
            .container { padding: 1.2rem; }
            h1 { font-size: 1.7rem; }
            .section-block { padding: 1rem; }
            .card-grid { grid-template-columns: 1fr; }
        }

        .iottag {
            background: #d9eafb;
            border-radius: 50px;
            padding: 0.1rem 1rem;
            font-size: 0.8rem;
            font-weight: 500;
            color: #005a8c;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>
        <span>📋 План изменений в документах</span>
        <span class="badge-date">с 1 сентября 2026</span>
    </h1>
    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-bottom: 1.5rem;">
        <span class="subtitle">🔹 Поправки к приказу № 2464</span>
        <span class="subtitle" style="background: #dcebf9;">📌 Основные документы + ИОТ</span>
    </div>

    <div class="grid-sections">
        <!-- БЛОК 1: локальные акты, приказы, программы -->
        <div class="section-block">
            <h2>📄 Локальные акты, приказы и программы <small>обязательные корректировки</small></h2>
            <div class="card-grid">
                <!-- Положение о СУОТ -->
                <div class="doc-card">
                    <h3>📌 Положение о СУОТ / Порядок обучения</h3>
                    <ul>
                        <li><strong>Продлить срок</strong> действия Правил до 01.09.2032 (п.5)</li>
                        <li>Освобождение внутренних совместителей от повторного обучения (п.7)</li>
                        <li>Исключить условие «другие источники опасности» для офисных работников (п.13, 54)</li>
                        <li>Обязательное обучение первой помощи для <strong>впервые начинающих</strong> (п.33, 36)</li>
                        <li>Фиксация времени обучения и проверки знаний (п.65)</li>
                    </ul>
                    <span class="note">основа — п.5,7,13,33,36,54,65</span>
                </div>

                <!-- Положение о стажировке -->
                <div class="doc-card">
                    <h3>🔄 Положение о стажировке</h3>
                    <ul>
                        <li><strong>Увеличить продолжительность</strong> стажировки для впервые начавших — <strong>не менее 5 смен</strong> (п.31)</li>
                        <li>Запрет на совмещение стажировки с практикой по ПП и СИЗ (п.31)</li>
                    </ul>
                    <span class="note">п.31 Правил</span>
                </div>

                <!-- Положение о СИЗ -->
                <div class="doc-card">
                    <h3>🧤 Положение о СИЗ</h3>
                    <ul>
                        <li>Актуализация программ обучения по применению СИЗ</li>
                        <li>Внеплановое обучение — <strong>в течение 60 дней</strong> после актуализации программы (п.39, 41)</li>
                    </ul>
                    <span class="note">п.39, 41</span>
                </div>

                <!-- Положение о ПП -->
                <div class="doc-card">
                    <h3>🩹 Положение об обучении ПП</h3>
                    <ul>
                        <li>Актуализация программ по первой помощи (внеплановое — 60 дней)</li>
                        <li>Возможность привлекать инструкторов по первой помощи (п.35)</li>
                    </ul>
                    <span class="note">п.35, 36</span>
                </div>

                <!-- Перечень РПО -->
                <div class="doc-card">
                    <h3>⚠️ Перечень работ с РПО</h3>
                    <ul>
                        <li><strong>Периодичность</strong> обучения по программе В — <strong>не реже 1 раза в 3 года</strong> (было ежегодно) (п.60)</li>
                    </ul>
                    <span class="note">п.60</span>
                </div>

                <!-- Приказы -->
                <div class="doc-card">
                    <h3>📑 Приказы (назначение, обучение)</h3>
                    <ul>
                        <li>Приказ о назначении ответственного для инструктажа <strong>руководителя</strong> (п.22)</li>
                        <li>Утверждение перечня работников, освобождённых от первичного инструктажа</li>
                        <li>Приказы о направлении на внеплановое обучение (в течение 60 дней) (п.36, 41)</li>
                    </ul>
                    <span class="note">п.22, 13, 36, 41</span>
                </div>

                <!-- Программы обучения -->
                <div class="doc-card">
                    <h3>📘 Учебные программы (А, Б, В)</h3>
                    <ul>
                        <li>Интеграция требований отраслевых <strong>Правил по ОТ</strong> (п.5)</li>
                        <li>Пересмотр для внутренних совместителей (п.7)</li>
                        <li>Программа В — периодичность <strong>1 раз в 3 года</strong> (п.60)</li>
                    </ul>
                    <span class="note">п.5, 7, 60</span>
                </div>

                <!-- Протоколы и журналы -->
                <div class="doc-card">
                    <h3>📝 Протоколы / журналы учёта</h3>
                    <ul>
                        <li>Наличие регистрационного номера из <strong>реестра Минтруда</strong> (п.92)</li>
                        <li>Актуализация журналов инструктажей (формы, новые категории)</li>
                    </ul>
                    <span class="note">п.92</span>
                </div>
            </div>
        </div>

        <!-- БЛОК 2: ИОТ и смежные документы (акцент на инструкции) -->
        <div class="section-block" style="border-left: 4px solid #1f77b0;">
            <h2 style="border-left-color: #1f77b0;">🛡️ Инструкции по охране труда (ИОТ) и связанные документы</h2>
            <div class="card-grid">
                <!-- ИОТ -->
                <div class="doc-card" style="border-left: 4px solid #1a6b9e;">
                    <h3>📄 Инструкция по охране труда <span class="badge-priority">обязательно</span></h3>
                    <ul>
                        <li><strong>Пересмотреть критерии освобождения</strong> от инструктажа: исключено условие «другие источники опасности отсутствуют» (п.13, 54) — упрощение для офисных работников</li>
                        <li>Актуализировать порядок инструктажа с учётом отраслевых <strong>Правил по ОТ</strong> (п.5)</li>
                        <li>Указать, что инструктаж для <strong>руководителя</strong> проводит специалист по ОТ (п.22)</li>
                    </ul>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;">
                        <span class="tag">п.13, 54</span>
                        <span class="tag">п.5</span>
                        <span class="tag">п.22</span>
                    </div>
                    <span class="note" style="background: #d2e6fb;">ИОТ — ключевое изменение</span>
                </div>

                <!-- Программа первичного инструктажа -->
                <div class="doc-card">
                    <h3>📋 Программа первичного инструктажа</h3>
                    <ul>
                        <li>Пересмотреть и актуализировать с учётом новых правил освобождения от инструктажа (п.13)</li>
                        <li>Синхронизировать с отраслевыми Правилами по ОТ (п.5)</li>
                    </ul>
                    <span class="note">п.13, 5</span>
                </div>

                <!-- Журналы инструктажей -->
                <div class="doc-card">
                    <h3>📓 Журналы инструктажей</h3>
                    <ul>
                        <li>Проверить формы журналов: возможно потребуется актуализация в связи с новыми категориями (впервые начинающие, совместители)</li>
                        <li>Учесть изменение периодичности обучения по программе В</li>
                    </ul>
                    <span class="note">связано с п.13, 31, 60</span>
                </div>

                <!-- Доп. смежные: приказ по ИОТ -->
                <div class="doc-card">
                    <h3>📌 Приказы по ИОТ / ответственность</h3>
                    <ul>
                        <li>При необходимости — утверждение обновлённых инструкций</li>
                        <li>Назначение ответственных за проведение инструктажей (в т.ч. для руководителей)</li>
                    </ul>
                    <span class="note">п.22, внутренние процедуры</span>
                </div>
            </div>
            <div style="margin-top: 1.2rem; background: #e5f0fb; border-radius: 40px; padding: 0.4rem 1.2rem; display: inline-block;">
                <span style="font-weight: 500; color: #00497a;">⚡ ИОТ требуют первоочередной проверки на предмет формулировок об «отсутствии других источников опасности»</span>
            </div>
        </div>

        <!-- рекомендация -->
        <div style="background: #e8f0fa; border-radius: 18px; padding: 1.2rem 1.8rem; margin-top: 0.5rem; border: 1px solid #c3daf0;">
            <p style="font-size: 1.05rem; font-weight: 500; color: #103a5a;">💡 <strong>Рекомендация:</strong> начните с аудита действующих локальных актов и ИОТ. Сравните с поправками к приказу № 2464. Особое внимание — пунктам 13, 22, 31, 36, 54, 60 и 92.</p>
        </div>

        <!-- footnote -->
        <div class="footnote">
            <span><strong>Основание:</strong> Постановление № 2464 (Правила обучения по охране труда) с изменениями, вступающими в силу 01.09.2026</span>
            <span><span class="tag">дата актуализации: 24.06.2026</span></span>
        </div>
    </div>
</div>
</body>
</html>