alem-chto-ty-umeesh/index.html

247 lines
11 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">
<title>Alem — Агент по технике безопасности</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container header-inner">
<div class="logo">🛡️ Alem</div>
<nav class="nav">
<a href="#features">Возможности</a>
<a href="#instructions">Инструкции</a>
<a href="#benefits">Преимущества</a>
<a href="#faq">FAQ</a>
</nav>
<a href="#contact" class="btn btn-primary">Подключить</a>
</div>
</header>
<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-content">
<h1>Профессиональный агент по технике безопасности</h1>
<p class="hero-subtitle">Автоматизирует разработку инструкций, анализ рисков и аудит рабочих мест с помощью ИИ</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary btn-lg">Попробовать</a>
<a href="#features" class="btn btn-outline btn-lg">Узнать больше</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-num">7+</span>
<span class="stat-label">типов инструкций</span>
</div>
<div class="stat">
<span class="stat-num">24/7</span>
<span class="stat-label">поддержка</span>
</div>
<div class="stat">
<span class="stat-num">100%</span>
<span class="stat-label">соответствие нормам</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="agent-card">
<div class="agent-avatar">🛡️</div>
<div class="agent-name">Alem</div>
<div class="agent-status">
<span class="status-dot"></span>
Онлайн
</div>
<div class="agent-skills">
<span class="skill-tag">Инструкции</span>
<span class="skill-tag">Аудит</span>
<span class="skill-tag">Риски</span>
<span class="skill-tag">Нормативы</span>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2 class="section-title">Возможности агента</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📄</div>
<h3>Разработка документации</h3>
<p>Создание инструкций по технике безопасности в формате Word, подготовка отчётов об инцидентах</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Анализ рисков</h3>
<p>Чек-листы для проверок, реестры рисков в Excel, анализ фотографий на нарушения ТБ</p>
</div>
<div class="feature-icon">📚</div>
<h3>Нормативные документы</h3>
<p>Извлечение текста из PDF с OCR, систематизация требований законодательства</p>
</div>
<div class="feature-card">
<div class="feature-icon">💬</div>
<h3>Консультации</h3>
<p>Оценка соответствия рабочих мест, рекомендации по устранению нарушений</p>
</div>
</div>
</div>
</section>
<section id="instructions" class="instructions">
<div class="container">
<h2 class="section-title">Какие инструкции нужны для офиса</h2>
<div class="instructions-grid">
<div class="instruction-category">
<h3>📋 Общие</h3>
<ul>
<li>Охрана труда для офисных сотрудников</li>
<li>Работа на ПЭВМ</li>
<li>Электробезопасность</li>
</ul>
</div>
<div class="instruction-category">
<h3>🔥 Пожарная безопасность</h3>
<ul>
<li>Меры пожарной безопасности</li>
<li>Действия при пожаре и эвакуация</li>
<li>Журнал инструктажей</li>
</ul>
</div>
<div class="instruction-category">
<h3>🖥️ Оборудование</h3>
<ul>
<li>Работа с оргтехникой</li>
<li>Эксплуатация мебели</li>
<li>Эргономика рабочего места</li>
</ul>
</div>
<div class="instruction-category">
<h3>⚡ Чрезвычайные ситуации</h3>
<ul>
<li>Действия в ЧС</li>
<li>Первая помощь</li>
<li>Безопасное перемещение</li>
</ul>
</div>
</div>
<div class="instructions-note">
<p>📌 <strong>Периодичность инструктажей:</strong> повторный — не реже 1 раза в 6 месяцев</p>
</div>
</div>
</section>
<section id="benefits" class="benefits">
<div class="container">
<h2 class="section-title">Преимущества</h2>
<div class="benefits-grid">
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Экономия времени</h4>
<p>Разработка инструкций за минуты вместо дней</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Актуальность</h4>
<p>Соответствие действующим нормам ТК РФ, ГОСТ, СанПиН</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Доступность</h4>
<p>Работает 24/7, отвечает на вопросы мгновенно</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-check"></div>
<div>
<h4>Универсальность</h4>
<p>Поддержка Word, Excel, PDF, анализ изображений</p>
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="faq">
<div class="container">
<h2 class="section-title">Частые вопросы</h2>
<div class="faq-list">
<div class="faq-item">
<button class="faq-question">
<span>Как подключить агента?</span>
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Откройте «Интеграции → Агент Alem», введите Open API key и «Выделенный сотрудник ID» из опубликованного агента, сохраните.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Можно ли доверять рекомендациям?</span>
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Рекомендации носят консультационный характер и должны быть проверены профильными специалистами по охране труда.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Какие форматы файлов поддерживает?</span>
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Word (.docx), Excel (.xlsx), PDF (с OCR), изображения для анализа рабочих мест.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Как часто нужно проходить инструктаж?</span>
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Вводный — при приёме на работу, первичный — до начала работы, повторный — не реже 1 раза в 6 месяцев.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container contact-inner">
<h2>Готовы обеспечить безопасность вашего офиса?</h2>
<p>Подключите Alem-агента и автоматизируйте охрану труда</p>
<div class="contact-actions">
<a href="#" class="btn btn-primary btn-lg">Подключить агента</a>
<a href="#" class="btn btn-outline btn-lg">Связаться с нами</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-inner">
<div class="footer-left">
<span class="footer-logo">🛡️ Alem</span>
<p>Профессиональный агент по технике безопасности</p>
</div>
<div class="footer-right">
<p>© 2026 Alem. Все права защищены.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>