guide.html - master - godspace/voice-analytics

guide.html
251 строка10 KB
godspace
create: guide.html
14 май 2026, 16:28
14 май 2026, 16:28c11d939
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Инструкция | Voice Analytics 2.0</title>
    
    <link rel="icon" href="data:,">
    
    <script type="text/javascript" >
       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
       m[i].l=1*new Date();
       for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
       k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

       ym(109134593, "init", {
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true
       });
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/109134593" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --bg: #f8fafc;
            --text: #1e293b;
            --text-muted: #64748b;
            --card-bg: #ffffff;
            --border: #e2e8f0;
            --accent-blue: #eff6ff;
            --accent-orange: #fffaf2;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.4;
            color: var(--text);
            background-color: var(--bg);
            margin: 0;
            padding: 0;
        }

        header {
            background-color: var(--primary);
            color: white;
            padding: 40px 20px;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 2.2rem;
            letter-spacing: -1px;
        }

        header p {
            margin: 10px 0 0;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .container {
            max-width: 900px;
            margin: -30px auto 60px;
            background: var(--card-bg);
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }

        h2 {
            color: var(--primary);
            font-size: 1.6rem;
            border-left: 5px solid var(--primary);
            padding-left: 15px;
            margin: 30px 0 15px;
        }

        h3 {
            color: #334155;
            font-size: 1.1rem;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        p {
            margin-bottom: 15px;
        }

        .screenshot-box {
            background-color: #f1f5f9;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px;
            margin: 15px 0;
            text-align: center;
        }

        .screenshot-box img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            display: block;
            margin: 0 auto;
        }

        .caption {
            display: block;
            margin-top: 8px;
            font-size: 0.85rem;
            color: var(--text-muted);
            font-style: italic;
        }

        .alert {
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            font-size: 0.95rem;
        }

        .alert-blue { background-color: var(--accent-blue); border-left: 5px solid #3b82f6; color: #1e40af; }
        .alert-orange { background-color: var(--accent-orange); border-left: 5px solid #f59e0b; color: #854d0e; }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
            align-items: center;
        }

        .id-guide {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .grid, .id-guide { grid-template-columns: 1fr; }
            .container { margin: 0; border-radius: 0; padding: 20px; }
        }

        footer {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        b { color: #0f172a; }
    </style>
</head>
<body>

    <header>
        <h1>Voice Analytics 2.0</h1>
        <p>Полное руководство по эксплуатации для преподавателей</p>
    </header>

    <div class="container">
        <section>
            <h2>1. Быстрый старт и Авторизация</h2>
            <div class="grid">
                <div>
                    <p>Запустите файл <b>teacher.html</b>. Система предложит создать вашу персональную песочницу. Введите уникальный ID (email или фамилию). Это гарантирует, что ваши записи не перемешаются с данными коллег.</p>
                    <div class="alert alert-blue">
                        <b>Важно:</b> Система запоминает ваш выбор. При следующем входе авторизация произойдет автоматически.
                    </div>
                </div>
                <div class="screenshot-box">
                    <img src="https://godspace.gitverse.site/voice-analytics/guide/01.png" alt="Вход">
                    <span class="caption">Окно авторизации преподавателя</span>
                </div>
            </div>
        </section>

        <section>
            <h2>2. Организация групп и учеников</h2>
            <p>В главном интерфейсе вы управляете списком своих классов. Для начала работы выберите существующую группу или добавьте новую, указав её системный ID и название.</p>
            
            <div class="screenshot-box">
                <img src="https://godspace.gitverse.site/voice-analytics/guide/02.png" alt="Управление">
                <span class="caption">Панель управления составом групп</span>
            </div>

            <h3>Как найти системные ID?</h3>
            <p>Для корректной работы используйте идентификаторы из LMS Алгоритмики. Они находятся в адресной строке вашего браузера:</p>
            
            <div class="id-guide">
                <div class="screenshot-box">
                    <img src="https://godspace.gitverse.site/voice-analytics/guide/03.png" alt="ID группы">
                    <span class="caption">ID Группы в конце ссылки</span>
                </div>
                <div class="screenshot-box">
                    <img src="https://godspace.gitverse.site/voice-analytics/guide/04.png" alt="ID ученика">
                    <span class="caption">ID Ученика в конце ссылки</span>
                </div>
            </div>
        </section>

        <section>
            <h2>3. Режим проведения занятия</h2>
            <div class="alert alert-orange">
                <b>Шаг 1:</b> Нажмите кнопку <b>🔗 Копировать</b> в списке учеников и отправьте ссылки детям в чат. Ссылка уже настроена персонально.
            </div>
            
            <p>Когда ученики подключатся, нажмите <b>🎤 Начать запись преподавателя</b>. Вы перейдете в режим «Радара».</p>

            <div class="screenshot-box">
                <img src="https://godspace.gitverse.site/voice-analytics/guide/05.png" alt="Радар">
                <span class="caption">Мониторинг активности микрофонов группы</span>
            </div>

            <p><b>Цветовая индикация:</b> Зеленый — запись идет. Красный — связь потеряна. Нажмите <b>🔔</b> рядом со статусом, чтобы отправить ученику уведомление.</p>
        </section>

        <section>
            <h2>4. Анализ результатов и Отчеты</h2>
            <p>После урока перейдите в <b>admin.html</b>. Введите ваш ID. Выберите группу и дату занятия для работы с логами.</p>

            <div class="screenshot-box">
                <img src="https://godspace.gitverse.site/voice-analytics/guide/06.png" alt="Аналитика">
                <span class="caption">Интерфейс работы с ИИ-аналитикой</span>
            </div>

            <div class="grid">
                <div>
                    <h3>Оперативная ОС</h3>
                    <p>Кнопка <b>✨ Создать ОС</b> запускает YandexGPT для разбора урока. Используйте её сразу после звонка.</p>
                </div>
                <div>
                    <h3>Архив отчетов</h3>
                    <p>Кнопка <b>👁️ Просмотреть</b> открывает отчеты, созданные ранее. Это мгновенно и не требует токенов.</p>
                </div>
            </div>
        </section>
    </div>

    <footer>
        &copy; 2026 Voice Analytics System. Разработано для преподавателей.
    </footer>

</body>
</html>