presentation.html - master - liatana/MD

presentation.html
529 строк24 KB
liatana
Create: presentation.html
16 июн 2026, 14:15
16 июн 2026, 14:15d6cce26
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Презентация ОТБшник</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #2e7d32;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 30px;
        }
        .slides-container {
            max-width: 1200px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .slide {
            background: #f1f8f0;
            border-radius: 28px;
            padding: 40px 50px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.35);
            border: 2px solid #c8e6c9;
            position: relative;
            min-height: 480px;
            page-break-after: always;
            display: flex;
            flex-direction: column;
        }
        .slide-number {
            position: absolute;
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            color: #a5d6a7;
            font-weight: 600;
        }
        .slide-title {
            font-size: 36px;
            font-weight: 700;
            color: #2e7d32;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .slide-title .icon { font-size: 40px; }
        .slide-text {
            font-size: 18px;
            line-height: 1.7;
            color: #1e3a2a;
        }
        .slide-text strong { color: #2e7d32; }
        .highlight-box {
            background: #fff8e1;
            border-left: 6px solid #f9a825;
            padding: 18px 24px;
            border-radius: 10px;
            margin: 16px 0;
        }
        .highlight-box.warning {
            background: #ffebee;
            border-left-color: #c62828;
        }
        .highlight-box.green {
            background: #e8f5e9;
            border-left-color: #2e7d32;
        }
        .sticker {
            display: inline-block;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #e8f5e9;
            border: 3px solid #2e7d32;
            padding: 8px;
            text-align: center;
            font-size: 42px;
            line-height: 70px;
            box-shadow: 0 4px 16px rgba(46,125,50,0.25);
        }
        .sticker-big {
            width: 120px;
            height: 120px;
            font-size: 64px;
            line-height: 110px;
        }

        .color-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            margin-top: 10px;
        }
        .color-card {
            background: #fff;
            border-radius: 14px;
            padding: 16px 20px;
            border: 1px solid #c8e6c9;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: 0.2s;
        }
        .color-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
        .color-card .color-sample {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            flex-shrink: 0;
            border: 2px solid #ddd;
        }
        .color-card .color-info .color-name {
            font-weight: 700;
            font-size: 17px;
            color: #1e3a2a;
        }
        .color-card .color-info .color-role {
            font-size: 14px;
            color: #4a7a4a;
        }
        .color-card.green-highlight {
            border-color: #2e7d32;
            background: #e8f5e9;
        }
        .color-card.green-highlight .color-name { color: #2e7d32; }

        .decision-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 10px;
        }
        .decision-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px 28px;
            border: 1px solid #c8e6c9;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: 0.2s;
        }
        .decision-card:hover { box-shadow: 0 4px 16px rgba(46,125,50,0.08); }
        .decision-card .card-icon {
            font-size: 36px;
            display: block;
            margin-bottom: 10px;
        }
        .decision-card .card-title {
            font-size: 20px;
            font-weight: 700;
            color: #2e7d32;
            margin-bottom: 6px;
        }
        .decision-card .card-sub {
            font-size: 15px;
            color: #4a7a4a;
            margin-bottom: 12px;
        }
        .decision-card .card-desc {
            font-size: 15px;
            color: #1e3a2a;
            line-height: 1.5;
        }
        .decision-card .card-desc .highlight {
            background: #fff8e1;
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: 600;
            color: #f9a825;
        }
        .decision-card .card-desc .highlight-green {
            background: #e8f5e9;
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: 600;
            color: #2e7d32;
        }

        .arrow-down {
            text-align: center;
            font-size: 28px;
            color: #a5d6a7;
            padding: 4px 0;
        }

        .result-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 6px;
        }
        .result-card {
            background: #fff;
            border-radius: 16px;
            padding: 20px 24px;
            border: 2px solid #c8e6c9;
            text-align: center;
        }
        .result-card .result-icon { font-size: 32px; display: block; margin-bottom: 6px; }
        .result-card .result-title {
            font-size: 18px;
            font-weight: 700;
            color: #1e3a2a;
        }
        .result-card .result-desc {
            font-size: 14px;
            color: #4a7a4a;
            margin-top: 4px;
        }
        .result-card.highlight-yellow { border-color: #f9a825; background: #fff8e1; }
        .result-card.highlight-green { border-color: #2e7d32; background: #e8f5e9; }

        .screenshot-full {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #fff;
            border-radius: 16px;
            border: 2px solid #c8e6c9;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin: 6px 0 10px 0;
        }
        .screenshot-full img {
            width: 100%;
            height: auto;
            display: block;
        }
        .screenshot-full .caption {
            padding: 14px 20px;
            font-size: 18px;
            font-weight: 600;
            color: #2e7d32;
            background: #f9fbf9;
            text-align: center;
            border-top: 1px solid #e8f5e9;
            width: 100%;
        }

        .badge-row {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        .badge-row span {
            background: #e8f5e9;
            padding: 6px 16px;
            border-radius: 16px;
            border: 1px solid #c8e6c9;
            font-size: 15px;
        }

        @media (max-width: 768px) {
            .slide { padding: 24px 20px; min-height: 350px; }
            .slide-title { font-size: 26px; flex-wrap: wrap; }
            .slide-text { font-size: 16px; }
            .decision-grid { grid-template-columns: 1fr; }
            .result-cards { grid-template-columns: 1fr; }
            .color-grid { grid-template-columns: 1fr 1fr; }
            .screenshot-full .caption { font-size: 15px; padding: 10px 14px; }
        }
        @media print {
            body { background: #fff; padding: 10px; }
            .slide { box-shadow: none; border: 1px solid #ccc; page-break-after: always; min-height: auto; }
            .slides-container { gap: 0; }
        }
    </style>
</head>
<body>
<div class="slides-container">

    <!-- ========== СЛАЙД 1 ========== -->
    <div class="slide">
        <div style="display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; margin-bottom:20px;">
            <div class="sticker sticker-big">⛑️</div>
            <div>
                <div class="slide-title" style="font-size:44px; margin-bottom:4px;">
                    <span>ОТБшник</span>
                    <span style="font-size:20px; background:#1b5e20; color:#e8f5e9; padding:2px 16px; border-radius:20px;">v3.0</span>
                </div>
                <div style="font-size:22px; color:#388e3c; font-weight:500;">твой помощник при оценке<br>профессиональных рисков</div>
            </div>
        </div>
        <div style="text-align:center; margin-top:20px;">
            <div style="font-size:20px; color:#2e7d32; font-weight:600;">Отдельная карта для каждой должности</div>
            <div style="font-size:16px; color:#6b8f6b; margin-top:8px;">По Приказу Минтруда России от 28.12.2021 № 926</div>
            <div style="display:flex; gap:20px; justify-content:center; margin-top:25px; flex-wrap:wrap;">
                <span style="background:#e8f5e9; padding:8px 20px; border-radius:20px; border:1px solid #c8e6c9;">✅ 400+ профессий в базе</span>
                <span style="background:#e8f5e9; padding:8px 20px; border-radius:20px; border:1px solid #c8e6c9;">📄 Отдельный DOC-файл для каждой</span>
                <span style="background:#e8f5e9; padding:8px 20px; border-radius:20px; border:1px solid #c8e6c9;">⚡ Автоматический подбор аналогов</span>
            </div>
        </div>
        <div class="slide-number">1 / 8</div>
    </div>

    <!-- ========== СЛАЙД 2 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">🎨</span> Почему зелёный?</div>
        <div class="slide-text" style="margin-bottom:6px;">
            <strong>Цвет защитной каски</strong> на объекте — не просто элемент стиля, а важный <strong>инструмент идентификации</strong> сотрудников по их роли и уровню ответственности.
        </div>
        <div class="highlight-box green" style="margin:10px 0 16px 0;">
            <strong>🟢 Зелёная каска</strong> — это цвет <strong>специалистов по охране труда</strong>, а также медицинского и экологического персонала.
        </div>

        <div class="color-grid">
            <div class="color-card green-highlight">
                <div class="color-sample" style="background:#2e7d32;"></div>
                <div class="color-info">
                    <div class="color-name">🟢 Зелёный</div>
                    <div class="color-role"><strong>Охрана труда</strong>, медицина, экология</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-sample" style="background:#ffffff; border-color:#999;"></div>
                <div class="color-info">
                    <div class="color-name">⚪ Белый</div>
                    <div class="color-role">Руководители, инженеры, прорабы</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-sample" style="background:#fdd835;"></div>
                <div class="color-info">
                    <div class="color-name">🟡 Жёлтый</div>
                    <div class="color-role">Рабочие, строители, монтажники</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-sample" style="background:#1565c0;"></div>
                <div class="color-info">
                    <div class="color-name">🔵 Синий</div>
                    <div class="color-role">Электрики, сантехники, сварщики</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-sample" style="background:#c62828;"></div>
                <div class="color-info">
                    <div class="color-name">🔴 Красный</div>
                    <div class="color-role">Аварийно-спасательные службы, ОТ</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-sample" style="background:#e65100;"></div>
                <div class="color-info">
                    <div class="color-name">🟠 Оранжевый</div>
                    <div class="color-role">Операторы техники, машинисты</div>
                </div>
            </div>
        </div>

        <div style="margin-top:16px; text-align:center; font-size:15px; color:#4a7a4a; background:#e8f5e9; padding:10px 20px; border-radius:12px; border:1px solid #c8e6c9;">
            💡 <strong>ОТБшник</strong> использует зелёный цвет как символ своей принадлежности к <strong>службе охраны труда</strong>
        </div>
        <div class="slide-number">2 / 8</div>
    </div>

    <!-- ========== СЛАЙД 3 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">📜</span> Оценка профессиональных рисков — обязательна!</div>
        <div class="slide-text">
            <p><strong>С 1 марта 2022 года</strong> оценка профессиональных рисков стала <strong>обязательной</strong> для всех работодателей — от ИП с одним сотрудником до крупных холдингов.</p>
            <p style="margin-top:12px;"><strong>Основание:</strong> статья 214 ТК РФ</p>
            <div class="highlight-box">
                <strong>⚠️ Это не разовая процедура,</strong> а <strong>непрерывный процесс</strong> выявления опасностей, оценки вероятности травм и разработки мер защиты.
            </div>
            <div class="highlight-box warning">
                <strong>🚫 Отсутствие системы ОПР</strong> влечёт штрафы по статье <strong>5.27.1 КоАП РФ</strong>
            </div>
            <div class="highlight-box green">
                <strong>📄 ПРИКАЗ Минтруда России от 28 декабря 2021 г. N 926</strong>
            </div>
        </div>
        <div class="slide-number">3 / 8</div>
    </div>

    <!-- ========== СЛАЙД 4 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">🤔</span> Кто будет проводить оценку рисков?</div>

        <div class="decision-grid">
            <div class="decision-card">
                <span class="card-icon">🏢</span>
                <div class="card-title">САМОСТОЯТЕЛЬНО</div>
                <div class="card-sub">силами службы охраны труда</div>
                <div class="card-desc">
                    <span class="highlight-green">✅</span> Если в штате есть <strong>СОТ</strong> (специалист по охране труда)
                </div>
            </div>
            <div class="decision-card">
                <span class="card-icon">🤝</span>
                <div class="card-title">СТОРОННЯЯ ОРГАНИЗАЦИЯ</div>
                <div class="card-sub">привлечение специалистов на аутсорсинг</div>
                <div class="card-desc">
                    <span class="highlight-green">✅</span> Если своего специалиста нет или <br>нужна независимая экспертиза
                </div>
            </div>
        </div>

        <div class="arrow-down">⬇</div>

        <div class="result-cards">
            <div class="result-card highlight-yellow">
                <span class="result-icon">❓</span>
                <div class="result-title">До 50 сотрудников</div>
                <div class="result-desc">
                    Закон <strong>не требует</strong> наличия штатного СОТ<br>
                    <span style="background:#fff8e1; padding:2px 12px; border-radius:12px; display:inline-block; margin-top:6px; font-weight:600; color:#f9a825;">Кто сделает карты рисков?</span>
                </div>
            </div>
            <div class="result-card highlight-green">
                <span class="result-icon">✅</span>
                <div class="result-title">Более 50 сотрудников</div>
                <div class="result-desc">
                    В штате <strong>обязательно должен быть</strong> СОТ<br>
                    <span style="background:#e8f5e9; padding:2px 12px; border-radius:12px; display:inline-block; margin-top:6px; font-weight:600; color:#2e7d32;">СОТ может сделать карты рисков</span>
                </div>
            </div>
        </div>

        <div class="slide-number">4 / 8</div>
    </div>

    <!-- ========== СЛАЙД 5 — СКРИНШОТ 1 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">🖥️</span> Шаг 1: Приветствие и выбор метода</div>
        <div class="slide-text" style="margin-bottom:12px;">
            Бот приветствует пользователя, показывает информацию о базе данных и предлагает <strong>выбрать метод оценки рисков</strong>.
        </div>
        <div class="screenshot-full">
            <img src="https://i.ibb.co/nNC8CZrK/2026-06-16-14-04-28.png" alt="Приветствие и выбор метода">
            <div class="caption">📋 Выбор метода оценки рисков</div>
        </div>
        <div class="badge-row">
            <span>✅ 491 профессия в базе</span>
            <span>📊 4 метода на выбор</span>
            <span>⚡ Автоматический подбор аналогов</span>
        </div>
        <div class="slide-number">5 / 8</div>
    </div>

    <!-- ========== СЛАЙД 6 — СКРИНШОТ 2 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">🏢</span> Шаг 2: Организация и должности</div>
        <div class="slide-text" style="margin-bottom:12px;">
            Пользователь вводит <strong>данные об организации</strong>, состав комиссии и добавляет <strong>должности</strong> для оценки.
        </div>
        <div class="screenshot-full">
            <img src="https://i.ibb.co/jvww5LSK/2026-06-16-14-05-20.png" alt="Ввод организации и должностей">
            <div class="caption">🏢 Ввод данных и добавление должностей</div>
        </div>
        <div class="badge-row">
            <span>✅ Можно добавить несколько должностей</span>
            <span>📝 Поддерживается ввод списком</span>
            <span>🔍 Автоматический поиск аналогов</span>
        </div>
        <div class="slide-number">6 / 8</div>
    </div>

    <!-- ========== СЛАЙД 7 — СКРИНШОТ 3 ========== -->
    <div class="slide">
        <div class="slide-title"><span class="icon">📄</span> Шаг 3–4: Готовые карты</div>
        <div class="slide-text" style="margin-bottom:12px;">
            После генерации бот показывает <strong>список готовых карт</strong> для каждой должности — отдельный DOC-файл для скачивания.
        </div>
        <div class="screenshot-full">
            <img src="https://i.ibb.co/cX318NkY/2026-06-16-14-06-53.png" alt="Список готовых карт">
            <div class="caption">📄 Карты готовы — можно скачивать</div>
        </div>
        <div class="badge-row">
            <span>📦 Скачивание по отдельности или ZIP-архивом</span>
            <span>⚠️ Предупреждение о возможных ошибках</span>
            <span>🔄 Возможность сменить метод</span>
        </div>
        <div class="slide-number">7 / 8</div>
    </div>

    <!-- ========== СЛАЙД 8 ========== -->
    <div class="slide" style="background: #fff8e1; border-color: #f9a825;">
        <div style="display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center;">
            <div class="sticker sticker-big" style="background:#ffebee; border-color:#c62828; font-size:48px;">⚠️</div>
            <div>
                <div class="slide-title" style="color:#c62828; font-size:40px;">
                    <span>Важно!</span>
                </div>
            </div>
        </div>

        <div style="text-align:center; margin:30px 0;">
            <div style="font-size:38px; font-weight:700; color:#c62828; line-height:1.3;">
                ОТБшник — твой помощник,<br>но он может ошибаться!
            </div>
            <div style="width:120px; height:4px; background:#c62828; margin:24px auto; border-radius:4px;"></div>
            <div style="font-size:24px; color:#1e3a2a; font-weight:500; max-width:700px; margin:0 auto;">
                Обязательно проанализируй содержание карт,<br>
                при необходимости дополни специфичными рисками<br>
                <strong>именно твоей организации</strong>.
            </div>
        </div>

        <div style="display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:20px;">
            <div style="background:#fff; padding:14px 28px; border-radius:40px; border:2px solid #2e7d32; display:flex; align-items:center; gap:10px;">
                <span style="font-size:20px;">💬</span>
                <span style="font-weight:600; color:#2e7d32;">Обратная связь</span>
            </div>
            <div style="background:#2e7d32; padding:14px 28px; border-radius:40px; display:flex; align-items:center; gap:10px; color:#fff; font-weight:600;">
                <span>⛑️</span> ОТБшник v3.0
            </div>
        </div>

        <div style="margin-top:25px; text-align:center; color:#6b8f6b; font-size:14px;">
            💡 Рекомендация: проверьте карты, добавьте отраслевые и специфические риски вашего предприятия
        </div>
        <div class="slide-number">8 / 8</div>
    </div>

</div>
</body>
</html>