Presentation.html - master - Danmp/EduBridge

Presentation.html
339 строк35 KB
Мванйими Дан
Presentation.html
25 май 2026, 15:25
25 май 2026, 15:256cc871e
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>EduBridge AI — Стартап-презентация | 15 слайдов с автопереключением</title>
    <!-- Tailwind CSS + Font Awesome + Google Fonts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Inter', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            overflow: hidden;
            height: 100vh;
            width: 100vw;
        }
        .slide-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
            overflow-y: auto;
            padding: 2rem 3rem;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        }
        .slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 10;
        }
        .slide::-webkit-scrollbar { width: 6px; }
        .slide::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 10px; }
        .slide::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }
        
        .animate-on-load {
            animation: fadeInUp 0.6s ease forwards;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(59, 130, 246, 0.2);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15);
        }
        .nav-btn {
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .nav-btn:hover {
            transform: scale(1.1);
            background: #3b82f6;
            color: white;
        }
        .control-panel {
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
        }
        @media (max-width: 768px) {
            .slide { padding: 1.5rem; }
        }
    </style>
</head>
<body>

<div class="slide-container" id="slideContainer">
    <!-- Все 15 слайдов будут сгенерированы динамически через JS -->
</div>

<!-- Панель управления -->
<div class="fixed bottom-6 left-0 right-0 flex justify-center gap-3 z-30">
    <button id="prevBtn" class="nav-btn bg-white/90 backdrop-blur-sm text-slate-700 w-10 h-10 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-600 hover:text-white transition-all"><i class="fas fa-chevron-left"></i></button>
    <div class="flex gap-2" id="dotsContainer"></div>
    <button id="nextBtn" class="nav-btn bg-white/90 backdrop-blur-sm text-slate-700 w-10 h-10 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-600 hover:text-white transition-all"><i class="fas fa-chevron-right"></i></button>
</div>

<div class="fixed bottom-3 left-0 right-0 text-center text-xs text-white/50 z-30 flex justify-center gap-4">
    <button id="playAutoBtn" class="bg-blue-600 text-white px-3 py-1 rounded-full text-xs hover:bg-blue-700 transition"><i class="fas fa-play"></i> Автоозвучка</button>
    <button id="stopAutoBtn" class="bg-slate-600 text-white px-3 py-1 rounded-full text-xs hover:bg-slate-700 transition"><i class="fas fa-stop"></i> Остановить</button>
    <span id="slideCounter" class="bg-black/50 px-3 py-1 rounded-full text-white text-xs">Слайд 1 / 15</span>
</div>

<script>
    // ==================== СОДЕРЖАНИЕ СЛАЙДОВ И ТЕКСТЫ ДОКЛАДА ====================
    const slidesData = [
        { // Слайд 1: Титульный
            title: "EduBridge AI",
            subtitle: "AI-Native Learning Experience Platform",
            content: `
                <div class="flex flex-col justify-center items-center h-full text-center">
                    <div class="inline-flex items-center gap-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-full mb-8 shadow-lg">
                        <i class="fas fa-graduation-cap text-xl"></i>
                        <span class="font-semibold">Стартап-презентация</span>
                    </div>
                    <h1 class="text-5xl md:text-7xl font-extrabold bg-gradient-to-r from-blue-700 via-indigo-600 to-purple-600 bg-clip-text text-transparent mb-6">EduBridge AI</h1>
                    <p class="text-xl md:text-2xl text-slate-600 mb-4">AI-Native Learning Experience Platform</p>
                    <p class="text-lg text-slate-500 max-w-2xl mx-auto mb-12">Адаптация иностранных студентов в российских вузах</p>
                    <div class="flex flex-wrap justify-center gap-8 mt-8">
                        <div class="text-center"><i class="fas fa-microchip text-3xl text-blue-500 mb-2"></i><p class="text-sm font-semibold">AI-First</p></div>
                        <div class="text-center"><i class="fas fa-brain text-3xl text-indigo-500 mb-2"></i><p class="text-sm font-semibold">Domain LLM</p></div>
                        <div class="text-center"><i class="fas fa-chart-line text-3xl text-emerald-500 mb-2"></i><p class="text-sm font-semibold">Adaptive Learning</p></div>
                    </div>
                    <div class="mt-16 flex flex-wrap justify-center gap-6 text-slate-500 text-sm">
                        <div><i class="fas fa-globe"></i> Мванйими (Конго) | Зул (Того) | Ричард (Кот-д'Ивуар) | Негар (Иран) | Людмила (Россия)</div>
                    </div>
                </div>
            `,
            speech: "Уважаемые преподаватели и коллеги! Представляем вашему вниманию EduBridge AI — инновационную платформу для адаптации иностранных студентов в российских вузах. Наша команда — это четверо студентов из Конго, Того, Кот-д'Ивуара и Ирана, которые сами прошли через процесс адаптации в России. Мы создаем AI-Native Learning Experience Platform, которая объединяет передовые технологии искусственного интеллекта и педагогические методики для поддержки иностранных обучающихся. Платформа построена на трех ключевых принципах: AI-First архитектура, специализированная языковая модель, обученная на российских образовательных стандартах, и адаптивное обучение, подстраивающееся под уровень каждого студента."
        },
        { // Слайд 2: Проблема
            title: "Проблема",
            content: `
                <div class="max-w-5xl mx-auto h-full flex items-center">
                    <div class="w-full">
                        <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-8 border-l-4 border-red-500 pl-4">Ключевые вызовы иностранных студентов</h2>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="glass-card rounded-2xl p-6"><i class="fas fa-language text-3xl text-red-500 mb-3"></i><h3 class="font-bold text-xl">Языковой барьер</h3><p class="text-slate-600">70% студентов испытывают трудности с пониманием академического русского языка</p></div>
                            <div class="glass-card rounded-2xl p-6"><i class="fas fa-university text-3xl text-red-500 mb-3"></i><h3 class="font-bold text-xl">Культурный разрыв</h3><p class="text-slate-600">Разница в образовательных системах и ожиданиях преподавателей</p></div>
                            <div class="glass-card rounded-2xl p-6"><i class="fas fa-user-graduate text-3xl text-red-500 mb-3"></i><h3 class="font-bold text-xl">Отсутствие поддержки</h3><p class="text-slate-600">Нет персонализированной помощи вне аудитории</p></div>
                            <div class="glass-card rounded-2xl p-6"><i class="fas fa-chart-line text-3xl text-red-500 mb-3"></i><h3 class="font-bold text-xl">Высокий отсев</h3><p class="text-slate-600">До 25% иностранных студентов покидают вузы на первом курсе</p></div>
                        </div>
                    </div>
                </div>
            `,
            speech: "Давайте посмотрим на проблему, которую мы решаем. Ежегодно в Россию приезжают тысячи иностранных студентов. Однако до 25 процентов из них покидают вузы уже на первом курсе. Почему? Главные причины — языковой барьер, когда академический русский язык оказывается слишком сложным; культурный разрыв — разные ожидания от учебного процесса; отсутствие персонализированной поддержки вне аудитории. Преподаватели, в свою очередь, не видят реальных трудностей студентов до экзаменов. Мы, как иностранные студенты, прошли через это и знаем проблему изнутри. Именно поэтому мы создали решение, которое закрывает каждую из этих болевых точек."
        },
        { // Слайд 3: Решение
            title: "Решение EduBridge AI",
            content: `
                <div class="max-w-5xl mx-auto h-full flex items-center">
                    <div><h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-8 border-l-4 border-green-500 pl-4">Наше решение</h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6"><i class="fas fa-robot text-3xl text-blue-600 mb-3"></i><h3 class="font-bold">AI-тьютор 24/7</h3><p>Объясняет сложные темы на упрощенном русском или родном языке студента</p></div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6"><i class="fas fa-chart-line text-3xl text-blue-600 mb-3"></i><h3 class="font-bold">Аналитика для преподавателей</h3><p>Тепловая карта сложностей, рекомендации по улучшению материалов</p></div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6"><i class="fas fa-list-check text-3xl text-blue-600 mb-3"></i><h3 class="font-bold">Генерация экзаменационных вопросов</h3><p>Автоматическое создание тестов по загруженным материалам</p></div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6"><i class="fas fa-brain text-3xl text-blue-600 mb-3"></i><h3 class="font-bold">Domain LLM на ФГОС</h3><p>Модель обучена на российских образовательных стандартах и Гражданском кодексе</p></div>
                    </div></div>
                </div>
            `,
            speech: "Наше решение — это платформа EduBridge AI, которая объединяет четыре ключевых компонента. Первое — AI-тьютор, доступный 24 часа 7 дней в неделю. Он объясняет сложные темы на упрощенном русском языке, а при необходимости — на родном языке студента. Второе — аналитика для преподавателей: мы показываем тепловую карту сложностей, где именно у группы возникают проблемы, и даем конкретные рекомендации по улучшению материалов. Третье — автоматическая генерация экзаменационных вопросов и тестов на основе загруженных лекций. И четвертое — наша Domain-Specific LLM, обученная на российских образовательных стандартах ФГОС и Гражданском кодексе, что обеспечивает юридическую точность и соответствие академическим требованиям."
        },
        // Слайды 4-14 аналогично структурированы
    ];
    
    // Добавим остальные слайды (4-15) для полной презентации
    const additionalSlides = [
        { title: "Архитектура платформы", speech: "Теперь об архитектуре. Наша платформа построена на 4-слойной модели. Клиентский слой включает веб-приложение, мобильное приложение и Telegram-бота. Второй слой — API Gateway с аутентификацией через SSO вузов. Третий — AI Orchestrator на базе LangChain, который управляет RAG-пайплайном и вызовом инструментов. И четвертый — Domain LLM с векторной базой данных Qdrant для хранения эмбеддингов учебных материалов. Такая архитектура обеспечивает масштабируемость, безопасность и возможность интеграции с существующими LMS вузов.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">4-слойная архитектура</h2><div class="grid grid-cols-2 gap-4"><div class="bg-white p-4 rounded-xl">🌐 Клиентский слой: Web, Mobile, Telegram</div><div class="bg-white p-4 rounded-xl">🔐 API Gateway + Auth (SSO, JWT)</div><div class="bg-white p-4 rounded-xl">🤖 AI Orchestrator (LangChain + RAG)</div><div class="bg-white p-4 rounded-xl">🧠 Domain LLM + Vector DB (Qdrant)</div></div></div>` },
        { title: "Технологический стек", speech: "Технологический стек нашей платформы. Backend написан на Python с использованием FastAPI для высокой производительности. В качестве основной LLM мы используем российские модели GigaChat и YandexGPT, что обеспечивает соблюдение 152-ФЗ о персональных данных. Для векторного поиска — Qdrant, для аналитики событий — ClickHouse. Фронтенд на React с Tailwind CSS обеспечивает современный адаптивный интерфейс. Все компоненты контейнеризированы в Docker и оркестрируются Kubernetes для горизонтального масштабирования.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Технологический стек</h2><div class="grid grid-cols-3 gap-4"><div>🐍 Python/FastAPI</div><div>🧠 GigaChat/YandexGPT</div><div>🗄️ Qdrant + ClickHouse</div><div>⚛️ React/Tailwind</div><div>🐳 Docker/K8s</div><div>🔒 152-ФЗ compliance</div></div></div>` },
        { title: "Domain-Specific LLM", speech: "Ключевое преимущество нашей платформы — Domain-Specific LLM. Мы обучили модель на трех основных источниках. Первое — Федеральные государственные образовательные стандарты, чтобы AI понимал требования к результатам обучения. Второе — Гражданский кодекс РФ и отраслевое законодательство для юридической точности. Третье — учебные материалы МАДИ и других транспортных вузов. Модель умеет адаптировать объяснения под уровень владения русским языком: от A2 до C1, а также учитывать культурный контекст студентов из разных стран. Это позволяет давать персонализированные пояснения, которые действительно понятны.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Domain-Specific LLM</h2><div class="grid grid-cols-2 gap-6"><div>📚 Обучение на ФГОС</div><div>⚖️ Гражданский кодекс РФ</div><div>🚗 Материалы МАДИ</div><div>🌍 Адаптация A2-C1</div></div></div>` },
        { title: "RAG-пайплайн", speech: "Для обеспечения актуальности и точности ответов мы используем RAG — Retrieval-Augmented Generation. Процесс выглядит так: сначала загруженные материалы проходят семантический чанкинг — разбивку на смысловые блоки по заголовкам и определениям. Затем каждый чанк преобразуется в векторное представление с помощью модели rubert-tiny2 и сохраняется в Qdrant. Когда студент задает вопрос, мы ищем релевантные чанки в векторной базе и передаем их в LLM вместе с вопросом. Это позволяет модели отвечать строго на основе предоставленных материалов, минимизируя галлюцинации.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">RAG Pipeline</h2><div>📄 Загрузка → ✂️ Семантический чанкинг → 🔢 Эмбеддинги → 🔍 Векторный поиск → 💡 Генерация ответа</div></div>` },
        { title: "Аналитика и дашборд преподавателя", speech: "Одна из самых ценных функций для преподавателей — детальная аналитика. Мы собираем данные о каждом взаимодействии студента с AI-агентом: какие вопросы задавались, какие темы требовали повторных объяснений, где студенты нажимали кнопку «Объясни иначе». На основе этих данных мы строим тепловую карту учебного материала — красные зоны показывают самые сложные разделы. Преподаватель видит, какие темы вызывают массовые затруднения, и получает AI-рекомендации: добавить примеры, упростить терминологию или провести синхронный разбор. Это позволяет улучшать качество учебных материалов на основе реальных данных.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Аналитика преподавателя</h2><div>🔥 Тепловая карта сложностей | 📊 Групповая статистика | 💡 AI-рекомендации</div></div>` },
        { title: "Бизнес-модель", speech: "Наша бизнес-модель построена на трех основных каналах монетизации. Первый — B2B: лицензирование для вузов от 500 тысяч рублей в год за доступ до 1000 студентов. Второй — B2G: участие в государственных программах, таких как Приоритет-2030 и экспорт образования, где гранты могут составлять от 3 миллионов рублей. Третий — SaaS-подписка для преподавателей и небольших учебных центров от 2500 рублей в месяц. По нашим прогнозам, через три года мы планируем охватить 15 вузов-партнеров, более 10 тысяч иностранных студентов и выйти на годовую выручку 45 миллионов рублей.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Монетизация</h2><div>🏛️ B2B: от 500k ₽/год | 🏛️ B2G: от 3 млн ₽ | 💻 SaaS: от 2500 ₽/мес</div><div>📈 Прогноз: 15+ вузов, 10k+ студентов, 45M ₽ ARR</div></div>` },
        { title: "Инвестиционный запрос", speech: "Для развития платформы мы привлекаем инвестиции в размере 8 миллионов рублей на 12 месяцев. Эти средства пойдут на три направления. Первое — доработка Domain-Specific LLM и расширение обучающей выборки. Второе — маркетинг и пилотные внедрения в 5 вузах. Третье — развитие команды, включая найм дополнительных разработчиков и методистов. Прогнозируемая окупаемость — 18 месяцев, а ROI за три года составит 320 процентов. Мы уже провели предварительные переговоры с МАДИ и РУДН, которые подтвердили интерес к пилотному внедрению.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Инвестиции</h2><div>💰 Запрос: 8 млн ₽ на 12 месяцев</div><div>📊 ROI: 320% за 3 года</div><div>🤝 Пилоты: МАДИ, РУДН</div></div>` },
        { title: "Команда", speech: "Наша команда — это четыре иностранных студента, которые объединили свои уникальные компетенции. Мванйими из Конго — ML Engineer, отвечает за обучение и тонкую настройку языковых моделей. Зул из Того — Backend Developer, разрабатывает API и архитектуру микросервисов. Ричард из Кот-д'Ивуара — Frontend Developer, создает интуитивный интерфейс платформы. Негар из Ирана — Product Manager, координирует разработку и взаимодействие с вузами. Все мы учимся в России и знаем потребности иностранных студентов лучше любых консультантов.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Команда</h2><div>👨‍💻 Мванйими (Конго) - ML Engineer | 👨‍💻 Зул (Того) - Backend | 👨‍💻 Ричард (Кот-д'Ивуар) - Frontend | 👩‍💼 Негар (Иран) & Людмила (Россия)- Product Manager</div></div>` },
        { title: "Дорожная карта", speech: "Наша дорожная карта на 2024-2025 годы. В первом квартале 2024 мы завершили разработку MVP с базовым функционалом загрузки материалов и AI-чата. Во втором квартале планируем пилотное внедрение в МАДИ и РУДН на 200 студентах. Третий квартал посвящен доработке Domain LLM и запуску полноценной аналитики для преподавателей. В четвертом квартале — масштабирование на 5 вузов и выход на самоокупаемость. В 2025 году — выход на рынки СНГ, интеграция с Moodle и запуск мобильного приложения.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Roadmap 2024-2025</h2><div>Q2 2024: Пилот МАДИ/РУДН | Q3 2024: Domain LLM | Q4 2024: 5 вузов | 2025: СНГ, мобильное приложение</div></div>` },
        { title: "Конкурентные преимущества", speech: "Чем мы отличаемся от существующих решений? Первое — мы единственная платформа, ориентированная именно на иностранных студентов с адаптацией под уровни владения русским языком. Второе — Domain-Specific LLM, обученная на российских образовательных стандартах, в отличие от общих моделей типа ChatGPT, которые не знают специфики ФГОС. Третье — интеграция с LMS вузов и полная аналитика для преподавателей. Четвертое — мы сами иностранные студенты, поэтому понимаем потребности целевой аудитории лучше, чем любая внешняя команда разработчиков.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Конкурентные преимущества</h2><div>🎯 Фокус на иностранных студентов | 🇷🇺 Domain LLM на ФГОС | 📊 Полная аналитика | 🌍 Команда-эксперт</div></div>` },
        { title: "Риски и их митигация", speech: "Мы проанализировали ключевые риски. Технические риски: возможные ошибки LLM и галлюцинации. Мы митигируем их с помощью RAG-пайплайна и guardrails-слоя, который проверяет ответы на соответствие учебным материалам. Юридические риски: требования 152-ФЗ о локализации данных. Мы используем только российские облачные провайдеры и модели. Рыночные риски: низкая готовность вузов к внедрению. Мы предлагаем бесплатный пилотный период и демонстрируем конкретную экономическую выгоду — снижение отсева студентов.",
            content: `<div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold mb-6">Риски и митигация</h2><div>⚠️ Технические: RAG + Guardrails | ⚖️ Юридические: российские серверы | 📉 Рыночные: пилоты, KPI</div></div>` },
        { title: "Заключение", speech: "В заключение, EduBridge AI — это не просто технологическая платформа. Это социальный проект, который решает реальную проблему тысяч иностранных студентов в России. Мы создаем мост между культурами, помогаем студентам успешно учиться, а преподавателям — видеть и понимать своих учеников. Наша команда — живое доказательство того, что иностранные студенты могут не только адаптироваться, но и создавать инновационные решения для российского образования. Мы приглашаем вас стать частью этого проекта. Спасибо за внимание! Готовы ответить на ваши вопросы.",
            content: `<div class="flex flex-col justify-center items-center h-full text-center"><h2 class="text-4xl font-bold mb-6">Спасибо за внимание!</h2><p class="text-xl text-slate-600">Вопросы? Мы готовы ответить.</p><div class="mt-8"><i class="fas fa-envelope text-blue-500"></i> team@edubridge.ai | <i class="fab fa-telegram text-blue-500"></i> @edubridge_ai</div></div>`
        }
    ];
    
    const fullSlidesData = [...slidesData, ...additionalSlides];
    
    // Генерация слайдов
    const container = document.getElementById('slideContainer');
    fullSlidesData.forEach((slide, idx) => {
        const slideDiv = document.createElement('div');
        slideDiv.className = 'slide';
        if (idx === 0) slideDiv.classList.add('active');
        slideDiv.innerHTML = slide.content;
        container.appendChild(slideDiv);
    });
    
    // Генерация точек навигации
    const dotsContainer = document.getElementById('dotsContainer');
    for (let i = 0; i < fullSlidesData.length; i++) {
        const dot = document.createElement('div');
        dot.className = 'w-2 h-2 rounded-full bg-slate-300 transition-all cursor-pointer';
        if (i === 0) dot.classList.replace('bg-slate-300', 'bg-blue-600');
        dot.addEventListener('click', () => goToSlide(i));
        dotsContainer.appendChild(dot);
    }
    
    let currentSlide = 0;
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.slide-dot, #dotsContainer div');
    let isAutoPlaying = false;
    let currentSpeech = null;
    let speechQueue = [];
    
    function updateDots() {
        dots.forEach((dot, idx) => {
            if (idx === currentSlide) {
                dot.classList.remove('bg-slate-300');
                dot.classList.add('bg-blue-600');
                dot.style.width = '8px';
                dot.style.height = '8px';
            } else {
                dot.classList.remove('bg-blue-600');
                dot.classList.add('bg-slate-300');
                dot.style.width = '6px';
                dot.style.height = '6px';
            }
        });
        document.getElementById('slideCounter').innerText = `Слайд ${currentSlide + 1} / ${fullSlidesData.length}`;
    }
    
    function goToSlide(index) {
        if (index === currentSlide) return;
        slides[currentSlide].classList.remove('active');
        currentSlide = index;
        slides[currentSlide].classList.add('active');
        updateDots();
        if (isAutoPlaying) {
            stopSpeaking();
            setTimeout(() => speakCurrentSlide(), 300);
        }
    }
    
    function nextSlide() {
        if (currentSlide < fullSlidesData.length - 1) {
            goToSlide(currentSlide + 1);
        }
    }
    
    function prevSlide() {
        if (currentSlide > 0) {
            goToSlide(currentSlide - 1);
        }
    }
    
    function stopSpeaking() {
        if (window.speechSynthesis) {
            window.speechSynthesis.cancel();
        }
        if (currentSpeech) {
            currentSpeech = null;
        }
    }
    
    function speakText(text, onEnd) {
        return new Promise((resolve) => {
            if (!window.speechSynthesis) {
                console.warn('Web Speech API not supported');
                resolve();
                return;
            }
            stopSpeaking();
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'ru-RU';
            utterance.rate = 0.9;
            utterance.pitch = 1.0;
            utterance.onend = () => {
                currentSpeech = null;
                resolve();
            };
            utterance.onerror = () => {
                currentSpeech = null;
                resolve();
            };
            currentSpeech = utterance;
            window.speechSynthesis.speak(utterance);
        });
    }
    
    async function speakCurrentSlide() {
        const slideData = fullSlidesData[currentSlide];
        if (slideData && slideData.speech) {
            await speakText(slideData.speech);
            if (isAutoPlaying && currentSlide < fullSlidesData.length - 1) {
                nextSlide();
            }
        }
    }
    
    async function startAutoPlay() {
        if (isAutoPlaying) return;
        isAutoPlaying = true;
        currentSlide = 0;
        goToSlide(0);
        await speakCurrentSlide();
    }
    
    function stopAutoPlay() {
        isAutoPlaying = false;
        stopSpeaking();
    }
    
    // Навигация
    document.getElementById('prevBtn').addEventListener('click', () => {
        if (isAutoPlaying) stopAutoPlay();
        prevSlide();
    });
    document.getElementById('nextBtn').addEventListener('click', () => {
        if (isAutoPlaying) stopAutoPlay();
        nextSlide();
    });
    document.getElementById('playAutoBtn').addEventListener('click', startAutoPlay);
    document.getElementById('stopAutoBtn').addEventListener('click', stopAutoPlay);
    
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') { if (isAutoPlaying) stopAutoPlay(); nextSlide(); }
        if (e.key === 'ArrowLeft') { if (isAutoPlaying) stopAutoPlay(); prevSlide(); }
        if (e.key === ' ' || e.key === 'Space') { e.preventDefault(); if (isAutoPlaying) stopAutoPlay(); else startAutoPlay(); }
    });
    
    updateDots();
</script>
</body>
</html>