Интерактивная рефлексия на уроке онлайн: 15 готовых цифровых инструментов для современного учителя

🎓 Меню рефлексии

📶Вай-фай

🌳Волшебный Сад

🔋Заряд Класса

📸Инста-Сторис

🎯Мишень

☁️Облако Тегов

🎒Рюкзак (Сортировка)

🚦Светофор

🎈Воздушные Шары

🌊💎Океан Сокровищ

🚀Космос

👾Тамагочи

📊Лестница успеха

🐠🐟Аквариум

😊🤔😟Смайлики

Название

<div id="wifi-reflection-app">
    <style>
        /* === 1. БАЗОВЫЕ НАСТРОЙКИ И ИЗОЛЯЦИЯ === */
        #wifi-reflection-app {
            font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            color: #2c3e50;
            width: 100%;
            max-width: 1000px; /* Ограничение ширины для вставки в статью */
            margin: 20px auto;
            position: relative;
            border: 1px solid #e0e0e0;
            border-radius: 16px;
            overflow: hidden;
            height: 700px; /* Фиксированная высота */
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

/* Сброс стилей внутри приложения */
        #wifi-reflection-app *, #wifi-reflection-app *::before, #wifi-reflection-app *::after {
            box-sizing: border-box;
            outline: none;
        }

/* Режим на весь экран */
        #wifi-reflection-app.fullscreen-mode {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 999999; border: none; border-radius: 0; margin: 0; max-width: none;
        }

/* === 2. ВЕРХНЯЯ ПАНЕЛЬ === */
        .wifi-navbar {
            background: #fff;
            padding: 15px 30px;
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #eee; flex-shrink: 0;
        }
        .wifi-title { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
        .wifi-status { font-family: monospace; color: #bdc3c7; font-weight: bold; font-size: 1rem; }
        
        .btn-fullscreen {
            background: #3498db; color: white; border: none; padding: 10px 20px;
            border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s;
            display: flex; align-items: center; gap: 8px; font-size: 1rem;
        }
        .btn-fullscreen:hover { background: #2980b9; }

/* === 3. ОСНОВНЫЕ ЭКРАНЫ === */
        .wifi-view {
            flex: 1; display: none; /* Скрыто по умолчанию */
            flex-direction: column; align-items: center; justify-content: center;
            padding: 20px; animation: fade-in 0.4s ease-out;
            background: radial-gradient(circle at center, #ffffff 0%, #f0f2f5 100%);
        }
        .wifi-view.active { display: flex; }
        @keyframes fade-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* === 4. ГРАФИКА WI-FI === */
        .wifi-svg-container {
            width: 100%; max-width: 500px; height: auto;
            filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));
            animation: float-anim 4s ease-in-out infinite;
            margin-bottom: 30px;
        }
        @keyframes float-anim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.wifi-bar { fill: none; stroke: #e0e0e0; cursor: pointer; transition: all 0.3s; }
        .wifi-dot { fill: #e0e0e0; stroke: none; transition: all 0.3s; cursor: pointer; }

.wifi-bar:hover { stroke: #bdc3c7; }
        .wifi-dot:hover { fill: #bdc3c7; }

/* Активные цвета (c фильтром свечения) */
        .active-red { stroke: #e74c3c !important; filter: url(#wifi-glow); }
        .active-red-fill { fill: #e74c3c !important; filter: url(#wifi-glow); }
        
        .active-orange { stroke: #e67e22 !important; filter: url(#wifi-glow); }
        .active-orange-fill { fill: #e67e22 !important; filter: url(#wifi-glow); }

.active-yellow { stroke: #f1c40f !important; filter: url(#wifi-glow); }
        .active-yellow-fill { fill: #f1c40f !important; filter: url(#wifi-glow); }

.active-green { stroke: #2ecc71 !important; filter: url(#wifi-glow); }
        .active-green-fill { fill: #2ecc71 !important; filter: url(#wifi-glow); }

.active-blue { stroke: #3498db !important; filter: url(#wifi-glow); }
        .active-blue-fill { fill: #3498db !important; filter: url(#wifi-glow); }

/* Текст подсказки */
        .wifi-hint {
            font-size: 2.5rem; font-weight: 800; color: #7f8c8d; min-height: 60px;
            text-align: center; transition: 0.2s;
        }

/* === 5. СПИДОМЕТР (РЕЗУЛЬТАТ) === */
        .speed-gauge {
            width: 360px; height: 180px; position: relative; overflow: hidden;
            background: linear-gradient(90deg, #e74c3c 0%, #f1c40f 40%, #2ecc71 100%);
            border-top-left-radius: 180px; border-top-right-radius: 180px;
            box-shadow: 0 0 60px rgba(0,0,0,0.1); margin-bottom: 20px;
        }
        .speed-gauge-inner {
            position: absolute; top: 25px; left: 25px; right: 25px; bottom: 0;
            background: #f0f2f5; border-top-left-radius: 160px; border-top-right-radius: 160px;
            z-index: 1;
        }
        .speed-needle {
            position: absolute; bottom: 0; left: 50%; width: 8px; height: 160px;
            background: #2c3e50; border-radius: 5px; transform-origin: bottom center;
            transform: rotate(-90deg); /* Старт слева */
            z-index: 2; transition: transform 2s cubic-bezier(0.1, 0, 0.2, 1);
        }
        .speed-value-box {
            position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
            z-index: 3; text-align: center;
        }
        .speed-num { font-size: 5rem; font-weight: bold; line-height: 1; color: #2c3e50; }
        .speed-unit { font-size: 1.2rem; color: #95a5a6; font-weight: bold; }

.speed-verdict {
            font-size: 3rem; font-weight: 900; text-transform: uppercase; margin-top: 10px;
            background: linear-gradient(45deg, #3498db, #2ecc71); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }

.stats-row { display: flex; gap: 40px; margin-top: 30px; }
        .stat-item { text-align: center; }
        .stat-val { font-size: 2rem; font-weight: bold; color: #34495e; }
        .stat-lbl { font-size: 0.9rem; color: #95a5a6; letter-spacing: 1px; }

/* Кнопки действий */
        .btn-action {
            margin-top: 30px; padding: 15px 30px; font-size: 1.2rem; border-radius: 50px;
            border: none; cursor: pointer; font-weight: bold; transition: 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px;
        }
        .btn-primary { background: #2c3e50; color: white; }
        .btn-primary:hover { background: #1a252f; transform: translateY(-3px); }
        .btn-outline { background: transparent; border: 2px solid #bdc3c7; color: #7f8c8d; }
        .btn-outline:hover { border-color: #2c3e50; color: #2c3e50; }

</style>

<div class="wifi-navbar">
        <div class="wifi-title">
            <span style="font-size: 2rem;">📶</span> Wi-Fi Урока
        </div>
        <div class="wifi-status" id="wifi-network-status">NETWORK: SEARCHING...</div>
        <button class="btn-fullscreen" onclick="WifiApp.toggleFullscreen()">⛶ На весь экран</button>
    </div>

<div id="vote-hint" class="wifi-hint">Нажми на уровень сигнала</div>

<button class="btn-action btn-primary" onclick="WifiApp.showResult()">
            🚀 Запустить Speedtest (Итог)
        </button>
    </div>

<div class="speed-verdict" id="verdict">CONNECTING...</div>

<div class="stats-row">
            <div class="stat-item">
                <div class="stat-lbl">PING</div>
                <div class="stat-val" id="res-ping">--</div>
            </div>
            <div class="stat-item">
                <div class="stat-lbl">USERS</div>
                <div class="stat-val" id="res-users">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-lbl">JITTER</div>
                <div class="stat-val">2 ms</div>
            </div>
        </div>

<button class="btn-action btn-outline" onclick="WifiApp.reset()">
            🔄 Сброс сети
        </button>
    </div>

// Логика голосования
            vote: function(level) {
                this.votes.push(level);
                
                // 1. Подсветка
                this.highlight(level);
                
                // 2. Текст реакции
                const hint = document.getElementById('vote-hint');
                const messages = [
                    "Сигнал потерян... (Не понял)", 
                    "Слабая связь (Есть вопросы)", 
                    "Нормальный сигнал (Понятно)", 
                    "Хорошая скорость! (Уверен)", 
                    "5G - ЛЕТАЕТ! (Отлично)"
                ];
                const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#3498db'];
                
                hint.innerText = messages[level-1];
                hint.style.color = colors[level-1];
                hint.style.transform = "scale(1.1)";

// Обновляем статус вверху
                document.getElementById('wifi-network-status').innerText = `NETWORK: CONNECTED (${level}/5)`;

// 3. Сброс через секунду для следующего ученика
                setTimeout(() => {
                    this.resetVisuals();
                    hint.style.transform = "scale(1)";
                    hint.innerText = "Следующий...";
                    hint.style.color = "#bdc3c7";
                    document.getElementById('wifi-network-status').innerText = "NETWORK: READY";
                }, 1200);
            },

highlight: function(level) {
                this.resetVisuals(); // Сначала гасим всё
                
                const colors = ['red', 'orange', 'yellow', 'green', 'blue'];
                const activeColor = colors[level-1];

for(let i=1; i<=level; i++) {
                    const el = document.getElementById('bar-'+i);
                    // Для точки (bar-1) используем класс заливки, для дуг - обводки
                    if(i === 1) el.classList.add(`active-${activeColor}-fill`);
                    else el.classList.add(`active-${activeColor}`);
                }
            },

resetVisuals: function() {
                for(let i=1; i<=5; i++) {
                    const el = document.getElementById('bar-'+i);
                    el.className.baseVal = (i===1) ? 'wifi-dot' : 'wifi-bar';
                }
            },

// Переход к результатам
            showResult: function() {
                if(this.votes.length === 0) {
                    alert("Сначала проголосуйте!");
                    return;
                }

document.getElementById('view-vote').classList.remove('active');
                document.getElementById('view-result').classList.add('active');

// Расчет
                const sum = this.votes.reduce((a,b)=>a+b, 0);
                const avg = sum / this.votes.length;
                
                // Имитация скорости (макс 1000 Мбит)
                const speed = Math.round((avg / 5) * 1000);
                // Угол стрелки (-90 это 0, 90 это макс)
                const angle = -90 + ((avg / 5) * 180);

setTimeout(() => {
                    // Анимация стрелки
                    document.getElementById('needle').style.transform = `rotate(${angle}deg)`;
                    
                    // Бегущие цифры
                    let current = 0;
                    const timer = setInterval(() => {
                        if(current >= speed) clearInterval(timer);
                        else {
                            current += Math.ceil(speed/50);
                            if(current > speed) current = speed;
                            document.getElementById('speed-val').innerText = current;
                        }
                    }, 30);

// Вердикт
                    const lbl = document.getElementById('verdict');
                    if(avg < 2.5) { lbl.innerText = "WEAK SIGNAL"; lbl.style.color = "#e74c3c"; }
                    else if(avg < 4.5) { lbl.innerText = "GOOD SIGNAL"; lbl.style.color = "#f1c40f"; }
                    else { lbl.innerText = "ULTRA SPEED"; lbl.style.color = "#2ecc71"; }

// Пинг (чем хуже оценка, тем выше пинг)
                    const ping = Math.round(200 / avg);
                    document.getElementById('res-ping').innerText = ping + " ms";
                    document.getElementById('res-users').innerText = this.votes.length;

}, 500);
            },

// Сброс всего
            reset: function() {
                this.votes = [];
                this.resetVisuals();
                document.getElementById('needle').style.transform = `rotate(-90deg)`;
                document.getElementById('speed-val').innerText = "0";
                document.getElementById('vote-hint').innerText = "Нажми на уровень сигнала";
                document.getElementById('vote-hint').style.color = "#7f8c8d";
                
                document.getElementById('view-result').classList.remove('active');
                document.getElementById('view-vote').classList.add('active');
            }
        };
    </script>
</div>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Волшебный Сад Знаний</title>
    <style>
        :root {
            --font-stack: 'Nunito', 'Segoe UI', Roboto, Helvetica, sans-serif;
            --bg-sky: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
            --bg-ground: linear-gradient(to bottom, #38ef7d 0%, #11998e 100%);
            
            /* Цвета кнопок и элементов (более насыщенные) */
            --color-leaf-accent: #00c853;
            --color-flower-accent: #ff4081;
            --color-fruit-accent: #ffab00;
            
            /* Тени для объема */
            --soft-shadow: 0 8px 20px rgba(0,0,0,0.15);
            --pop-shadow: 0 12px 25px rgba(0,0,0,0.2);
        }

/* Подключаем веселый шрифт, если есть интернет (опционально) */
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: var(--font-stack);
            min-height: 100vh;
            /* Создаем фон: небо сверху, земля снизу */
            background: var(--bg-sky) no-repeat fixed;
            background-size: 100% 60%; /* Небо занимает 60% */
            position: relative;
            color: #fff;
            overflow-x: hidden;
        }

/* Добавляем землю */
        body::after {
            content: '';
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 45%;
            background: var(--bg-ground);
            border-top-left-radius: 50% 20%;
            border-top-right-radius: 50% 20%;
            z-index: -1;
        }

/* --- Заголовок --- */
        header {
            text-align: center;
            padding: 30px 20px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

h1 {
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 10px;
            color: #fff;
        }

.subtitle {
            font-size: 1.3rem;
            font-weight: 700;
            background: rgba(255,255,255,0.2);
            padding: 8px 20px;
            border-radius: 30px;
            display: inline-block;
            backdrop-filter: blur(5px);
        }

/* --- Главный контейнер --- */
        .main-stage {
            display: flex;
            justify-content: center;
            align-items: flex-end; /* Выравнивание по низу, чтобы дерево стояло на земле */
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 60px; /* Отступ от низа экрана */
            flex-wrap: wrap;
        }

/* --- Дерево (Стилизация) --- */
        .tree-container {
            position: relative;
            width: 500px;
            height: 550px;
            /* outline: 1px solid red; /* Для отладки */
        }

/* Зона, куда будут падать элементы (невидимый контейнер внутри кроны) */
        .drop-zone {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 400px;
            height: 350px;
            z-index: 10; /* Поверх листвы */
            /* background: rgba(255,0,0,0.2); /* Раскомментировать для отладки зоны */
        }

/* Ствол */
        .trunk {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 220px;
            background: linear-gradient(to right, #6d4c41, #8d6e63, #6d4c41);
            border-radius: 10px;
            /* Делаем ствол расширяющимся книзу */
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
            z-index: 2;
            box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3);
        }
        
        /* Корни (декоративные) */
        .trunk::after {
             content: '';
             position: absolute;
             bottom: -15px;
             left: -20px;
             width: 140%;
             height: 40px;
             background: #6d4c41;
             border-radius: 50%;
             z-index: -1;
        }

/* Крона - сложная форма из нескольких кругов */
        .canopy-layer {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #4cd137, #44bd32 60%, #279322);
            box-shadow: 8px 8px 20px rgba(0,0,0,0.15);
        }

.c1 { width: 300px; height: 300px; top: 20px; left: 100px; z-index: 5; }
        .c2 { width: 250px; height: 250px; top: 120px; left: 0px; z-index: 4; }
        .c3 { width: 280px; height: 280px; top: 100px; right: 0px; z-index: 4; }
        .c4 { width: 200px; height: 200px; top: 0px; left: 150px; z-index: 3; background: radial-gradient(circle at 30% 30%, #6eef5b, #4cd137); }

/* Интерактивные элементы (листья и т.д.) */
        .magic-item {
            position: absolute;
            font-size: 4rem;
            cursor: grab;
            user-select: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Пружинящая анимация */
            transform: scale(0) rotate(-30deg);
            filter: drop-shadow(0 5px 10px rgba(255,255,255,0.4)); /* Легкое свечение */
        }

.magic-item.appeared {
            transform: scale(1) rotate(var(--rotation));
        }

.magic-item:hover {
            transform: scale(1.2) rotate(0deg) !important;
            z-index: 20;
        }

/* --- Панель управления --- */
        .controls-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 35px;
            border-radius: 30px;
            box-shadow: var(--pop-shadow);
            width: 100%;
            max-width: 450px;
            color: #333;
            border: 4px solid #fff;
        }

.btn-group {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-bottom: 30px;
        }

.fun-btn {
            display: flex;
            align-items: center;
            padding: 18px 25px;
            border: none;
            border-radius: 20px;
            font-family: var(--font-stack);
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: var(--soft-shadow);
            position: relative;
            overflow: hidden;
        }

.fun-btn span {
            font-size: 2.2rem;
            margin-right: 15px;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
        }

/* Цвета кнопок */
        .btn-leaf { background: linear-gradient(45deg, #00c853, #64dd17); }
        .btn-flower { background: linear-gradient(45deg, #ff4081, #ff80ab); }
        .btn-fruit { background: linear-gradient(45deg, #ff6f00, #ffab00); }

.fun-btn:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--pop-shadow);
        }
        .fun-btn:active { transform: translateY(0); }

/* Статистика */
        .stats-panel {
            background: #f0f2f5;
            border-radius: 20px;
            padding: 20px;
        }
        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: #555;
        }
        .stat-count {
            font-size: 1.6rem;
            color: #333;
            background: #fff;
            padding: 2px 12px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

/* Адаптив */
        @media (max-width: 968px) {
            .main-stage { flex-direction: column; align-items: center; gap: 60px;}
            .controls-card { order: 2; }
            .tree-container { width: 90vw; height: 90vw; max-width: 500px; max-height: 550px;}
            .drop-zone { width: 80%; height: 60%; left: 10%; top: 10%; }
            .trunk { height: 35%; bottom: 0;}
            .canopy-layer { transform: scale(0.8); transform-origin: center;}
        }
    </style>
</head>
<body>

<header>
        <h1>✨ Волшебный Сад Знаний ✨</h1>
        <p class="subtitle">Вырасти своё дерево впечатлений после урока!</p>
    </header>

<div class="controls-card">
            <div class="btn-group">
                <button class="fun-btn btn-leaf" onclick="plantItem('leaf', '🌿')">
                    <span>🌿</span> Узнал новое
                </button>
                <button class="fun-btn btn-flower" onclick="plantItem('flower', '🌺')">
                    <span>🌺</span> Понравилось
                </button>
                <button class="fun-btn btn-fruit" onclick="plantItem('fruit', '🍊')">
                    <span>🍊</span> Пригодится
                </button>
            </div>

<div class="stats-panel">
                <div class="stat-row">
                    <span>🌿 Новые знания:</span>
                    <span class="stat-count" id="cnt-leaf">0</span>
                </div>
                <div class="stat-row">
                    <span>🌺 Впечатления:</span>
                    <span class="stat-count" id="cnt-flower">0</span>
                </div>
                <div class="stat-row">
                    <span>🍊 Польза:</span>
                    <span class="stat-count" id="cnt-fruit">0</span>
                </div>
            </div>
        </div>
    </div>

function plantItem(type, emoji) {
            const item = document.createElement('div');
            item.classList.add('magic-item');
            item.textContent = emoji;
            
            // Случайная позиция внутри drop-zone
            // Используем проценты для лучшей адаптивности
            const posX = Math.random() * 90; // от 0% до 90% ширины зоны
            const posY = Math.random() * 90; // от 0% до 90% высоты зоны
            const rotation = (Math.random() * 60) - 30; // Случайный наклон от -30 до 30 deg

item.style.left = `${posX}%`;
            item.style.top = `${posY}%`;
            // Передаем переменную вращения в CSS для использования в анимации
            item.style.setProperty('--rotation', `${rotation}deg`);

// Обработчик удаления
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                if(confirm("Убрать этот элемент с дерева?")) {
                    item.classList.remove('appeared');
                    setTimeout(() => item.remove(), 400);
                    updateStats(type, -1);
                }
            });

dropArea.appendChild(item);
            
            // Запуск анимации появления
            requestAnimationFrame(() => {
                item.classList.add('appeared');
            });

updateStats(type, 1);
        }

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Общий заряд класса (с итогом)</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #2c3e50;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh; /* Используем min-height для контента */
            margin: 0;
            /* overflow: hidden;  Убираем, чтобы на маленьких экранах можно было прокрутить до кнопки */
            padding-bottom: 80px; /* Отступ снизу, чтобы кнопка не перекрывала контент */
            box-sizing: border-box;
        }

/* --- ЭКРАН 1: ГОЛОСОВАНИЕ --- */
        #voting-screen {
            text-align: center;
            width: 100%;
            padding: 20px; /* Добавлен отступ для мобильных */
            box-sizing: border-box;
        }

.title {
            font-size: 2.5rem;
            margin-bottom: 40px;
            font-weight: 300;
        }

.cards-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            margin-bottom: 40px; /* Отступ от карточек до кнопки */
        }

.vote-card {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 15px;
            padding: 30px;
            width: 200px;
            cursor: pointer;
            transition: transform 0.2s, background 0.3s;
            text-align: center;
        }

.vote-card:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.2);
        }

.vote-card:active {
            transform: scale(0.95);
        }

.emoji { font-size: 4rem; display: block; margin-bottom: 10px; }
        .label { font-size: 1.2rem; font-weight: bold; }

.card-low { border-bottom: 5px solid #e74c3c; }
        .card-mid { border-bottom: 5px solid #f1c40f; }
        .card-high { border-bottom: 5px solid #2ecc71; }

#success-msg {
            position: fixed; /* Фиксируем, чтобы всегда было видно по центру экрана */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.9);
            padding: 30px 50px;
            border-radius: 10px;
            font-size: 2rem;
            color: #2ecc71;
            display: none;
            z-index: 100;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

@keyframes popIn { from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* --- ОБНОВЛЕННЫЕ СТИЛИ КНОПКИ --- */
        .finish-btn {
            position: fixed;
            bottom: 30px;
            left: 50%;
            /* Центрируем по горизонтали, учитывая собственную ширину */
            transform: translateX(-50%);
            
            padding: 15px 50px; /* Увеличенные отступы */
            background-color: #3498db; /* Яркий, акцентный синий */
            color: white; /* Высококонтрастный текст */
            border: none;
            border-radius: 50px; /* Закругленная форма */
            cursor: pointer;
            font-size: 1.2rem; /* Увеличенный шрифт */
            font-weight: 700; /* Жирный текст */
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Объемная тень */
            transition: all 0.3s ease;
            z-index: 10;
        }

.finish-btn:hover {
            background-color: #2980b9; /* Немного темнее при наведении */
            /* При наведении поднимаем кнопку, сохраняя центрирование по горизонтали */
            transform: translateX(-50%) translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* Усиление тени */
        }

.finish-btn:active {
            /* Эффект нажатия */
            transform: translateX(-50%) scale(0.98);
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

/* --- ЭКРАН 2: РЕЗУЛЬТАТ --- */
        #result-screen {
            display: none;
            flex-direction: column;
            align-items: center;
            animation: fadeIn 1s;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.battery-shell {
            position: relative;
            width: 200px;
            height: 350px;
            border: 10px solid #fff;
            border-radius: 25px;
            padding: 5px;
            background: rgba(255, 255, 255, 0.05);
            margin-bottom: 20px;
            box-sizing: content-box;
        }

.battery-shell::before {
            content: '';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 20px;
            background: #fff;
            border-radius: 8px 8px 0 0;
        }

.liquid {
            position: absolute;
            bottom: 5px;
            left: 5px;
            right: 5px;
            height: 0%;
            background: #2ecc71;
            border-radius: 15px;
            transition: height 2s ease-out, background-color 2s;
            overflow: hidden;
            box-shadow: 0 0 20px currentColor;
        }

.liquid::after {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            background: rgba(255,255,255,0.3);
            border-radius: 40%;
            top: -30px;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            animation: wave 5s linear infinite;
        }

@keyframes wave {
            0% { transform: translateX(-50%) rotate(0deg); }
            100% { transform: translateX(-50%) rotate(360deg); }
        }

.result-text {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

.status-message {
            font-size: 2rem;
            margin-top: 10px;
            font-weight: bold;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            min-height: 60px; 
        }

.stats-detail {
            font-size: 1rem;
            color: #bdc3c7;
            margin-top: 20px;
        }

.btn-restart {
            margin-top: 30px;
            padding: 10px 30px;
            background: transparent;
            border: 2px solid white;
            color: white;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1rem;
            transition: 0.3s;
        }
        .btn-restart:hover { background: white; color: #2c3e50; }

/* Адаптив для небольших экранов */
        @media (max-height: 700px) {
            .title { font-size: 2rem; margin-bottom: 20px; }
            .vote-card { padding: 20px; width: 150px; }
            .emoji { font-size: 3rem; }
            .battery-shell { height: 250px; width: 150px; }
            .status-message { font-size: 1.5rem; }
        }
    </style>
</head>
<body>

<div id="success-msg">✅ Голос принят!</div>

<div id="voting-screen">
        <h1 class="title">Как вы оцениваете своё состояние?</h1>
        
        <div class="cards-container">
            <div class="vote-card card-low" onclick="vote(20)">
                <span class="emoji">🔋</span>
                <span class="label">Села батарейка</span>
                <div style="font-size: 0.8rem; margin-top:5px; color:#aaa;">(Устал / Не понял)</div>
            </div>

<div class="vote-card card-mid" onclick="vote(60)">
                <span class="emoji">⚡</span>
                <span class="label">Заряд есть</span>
                <div style="font-size: 0.8rem; margin-top:5px; color:#aaa;">(Нормально / Понятно)</div>
            </div>

<div class="vote-card card-high" onclick="vote(100)">
                <span class="emoji">🚀</span>
                <span class="label">Полный заряд!</span>
                <div style="font-size: 0.8rem; margin-top:5px; color:#aaa;">(Энергия / Всё супер)</div>
            </div>
        </div>

<button class="finish-btn" onclick="showResults()">Показать итог (Учитель)</button>
    </div>

<div id="result-screen">
        <h1 style="margin-bottom: 5px;">Энергия класса</h1>
        
        <div class="result-text" id="percent-text">0%</div>

<div class="stats-detail" id="stats-detail">
            Проголосовало: 0 чел.
        </div>

<button class="btn-restart" onclick="restart()">Начать заново</button>
    </div>

function vote(value) {
            votesCount++;
            totalScore += value;
            const msg = document.getElementById('success-msg');
            msg.style.display = 'block';
            // Сброс анимации для повторного срабатывания
            msg.style.animation = 'none';
            msg.offsetHeight; /* trigger reflow */
            msg.style.animation = null; 
            
            setTimeout(() => { msg.style.display = 'none'; }, 800);
        }

function showResults() {
            if (votesCount === 0) {
                alert("Ещё никто не проголосовал!");
                return;
            }

document.getElementById('voting-screen').style.display = 'none';
            document.getElementById('result-screen').style.display = 'flex';
            // Скрываем кнопку итога на экране результатов, если она fixed
            document.querySelector('.finish-btn').style.display = 'none';

const average = Math.round(totalScore / votesCount);

setTimeout(() => {
                animateBattery(average);
            }, 100);

document.getElementById('stats-detail').innerText = `Проголосовало: ${votesCount} чел.`;
        }

function animateBattery(percent) {
            const liquid = document.getElementById('battery-liquid');
            const textNum = document.getElementById('percent-text');
            const statusText = document.getElementById('status-text');

liquid.style.height = percent + '%';
            
            let currentNum = 0;
            const interval = setInterval(() => {
                if (currentNum >= percent) {
                    clearInterval(interval);
                    if (percent === 0) textNum.innerText = '0%'; // Edge case для 0
                } else {
                    currentNum++;
                    textNum.innerText = currentNum + '%';
                }
            }, 20);

let color = '#2ecc71';
            let message = '';

if (percent < 35) {
                color = '#e74c3c';
                message = "Энергия на исходе... Тема была сложной.";
            } else if (percent < 75) {
                color = '#f1c40f';
                message = "Стабильный заряд. Мы неплохо поработали.";
            } else {
                color = '#2ecc71';
                message = "Мощный заряд! Класс отлично усвоил материал!";
            }

liquid.style.backgroundColor = color;
            liquid.style.boxShadow = `0 0 20px ${color}`;
            statusText.innerText = message;
            statusText.style.color = color;
        }

function restart() {
            if(confirm("Сбросить все результаты и начать новое голосование?")) {
                votesCount = 0;
                totalScore = 0;
                document.getElementById('battery-liquid').style.height = '0%';
                document.getElementById('percent-text').innerText = '0%';
                document.getElementById('status-text').innerText = '...';
                
                document.getElementById('result-screen').style.display = 'none';
                document.getElementById('voting-screen').style.display = 'block';
                // Возвращаем кнопку итога
                document.querySelector('.finish-btn').style.display = 'block';
            }
        }
    </script>
</body>
</html>

<div id="insta-reflection-app">
    <style>
        /* === 1. ИЗОЛЯЦИЯ И СБРОС === */
        #insta-reflection-app {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #000; /* Темная тема, как в сторис */
            color: white;
            width: 100%;
            max-width: 600px; /* Формат телефона/планшета */
            margin: 20px auto;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 800px; /* Высокий экран */
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            border: 1px solid #333;
        }

#insta-reflection-app * { box-sizing: border-box; outline: none; user-select: none; }

/* Режим на весь экран */
        #insta-reflection-app.fullscreen-mode {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            max-width: none; border-radius: 0; z-index: 999999; margin: 0;
        }

/* === 2. ВЕРХНЯЯ ПАНЕЛЬ (СТОРИС) === */
        .story-header {
            padding: 15px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            z-index: 10;
        }

.progress-bars { display: flex; gap: 5px; margin-bottom: 10px; }
        .p-bar { height: 3px; background: rgba(255,255,255,0.3); flex: 1; border-radius: 2px; }
        .p-bar.active { background: white; }

.user-info { display: flex; align-items: center; justify-content: space-between; }
        .user-left { display: flex; align-items: center; gap: 10px; }
        .avatar { width: 40px; height: 40px; border-radius: 50%; background: #333; border: 2px solid #e1306c; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; }
        .username { font-weight: bold; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
        .time-ago { font-size: 0.9rem; opacity: 0.7; margin-left: 10px; }

.btn-fs { background: rgba(255,255,255,0.2); border: none; color: white; padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 0.8rem; }

/* === 3. ОСНОВНОЙ КОНТЕНТ === */
        .story-content {
            flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center; position: relative; padding: 20px;
        }
        
        .question-sticker {
            background: white; color: black; padding: 30px; border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-width: 80%;
            transform: rotate(-2deg); transition: 0.3s;
        }
        .question-sticker h2 { margin: 0; font-size: 2rem; font-weight: 800; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .question-sticker p { margin-top: 10px; font-size: 1.2rem; color: #555; font-weight: 600; }

/* === 4. ПАНЕЛЬ РЕАКЦИЙ === */
        .reactions-bar {
            padding: 20px; padding-bottom: 40px;
            display: flex; gap: 15px; justify-content: center; align-items: flex-end;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        }

.react-btn {
            background: transparent; border: none; cursor: pointer;
            display: flex; flex-direction: column; align-items: center;
            transition: transform 0.1s; position: relative;
        }
        .react-btn:active { transform: scale(0.8); }
        .emoji-icon { font-size: 4.5rem; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); transition: 0.2s; }
        .react-btn:hover .emoji-icon { transform: scale(1.2) translateY(-10px); }
        
        .count-badge {
            background: #e1306c; color: white; font-size: 0.9rem; font-weight: bold;
            padding: 2px 8px; border-radius: 10px; margin-top: 5px; opacity: 0; transition: 0.3s;
        }

/* === 5. АНИМАЦИЯ ВЫЛЕТА (FLYING EMOJIS) === */
        .flying-emoji {
            position: absolute; pointer-events: none; font-size: 3rem;
            animation: flyUp 1.5s ease-out forwards; z-index: 100;
        }

@keyframes flyUp {
            0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
            50% { transform: translateY(-200px) scale(1.2) rotate(10deg); opacity: 0.8; }
            100% { transform: translateY(-500px) scale(0.5) rotate(-10deg); opacity: 0; }
        }

/* === 6. ЭКРАН СТАТИСТИКИ (INSIGHTS) === */
        .insights-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95); z-index: 200;
            display: none; flex-direction: column; align-items: center; justify-content: center;
        }
        .insights-title { font-size: 2rem; font-weight: bold; margin-bottom: 30px; }
        .stat-row { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; width: 80%; }
        .stat-emoji { font-size: 2.5rem; }
        .stat-bar-bg { flex: 1; height: 15px; background: #333; border-radius: 10px; overflow: hidden; }
        .stat-bar-fill { height: 100%; background: linear-gradient(90deg, #f09433, #bc1888); width: 0%; transition: width 1s; }
        .stat-num { font-size: 1.5rem; font-weight: bold; width: 50px; text-align: right; }

.btn-control {
            margin-top: 30px; padding: 12px 25px; font-size: 1.2rem;
            border: 2px solid #555; background: transparent; color: white;
            border-radius: 30px; cursor: pointer; transition: 0.3s;
        }
        .btn-control:hover { border-color: white; background: rgba(255,255,255,0.1); }
        .btn-primary { background: #0095f6; border: none; font-weight: bold; }
        .btn-primary:hover { background: #0081d6; }

</style>

<div class="story-header">
        <div class="progress-bars">
            <div class="p-bar active"></div>
            <div class="p-bar"></div>
        </div>
        <div class="user-info">
            <div class="user-left">
                <div class="avatar">🎓</div>
                <div class="username">class_biology</div>
                <div class="time-ago">24m</div>
            </div>
            <div style="display: flex; gap: 10px;">
                <button class="btn-fs" onclick="InstaApp.showInsights()">📊 Статистика</button>
                <button class="btn-fs" onclick="InstaApp.toggleFS()">⛶</button>
            </div>
        </div>
    </div>

<div class="story-content" id="story-area">
        <div class="question-sticker">
            <h2>ВОПРОС ДНЯ</h2>
            <p>Как вам сегодняшний урок?</p>
            <p style="font-size: 0.9rem; color: #999; margin-top: 5px;">Нажми на реакцию 👇</p>
        </div>
        </div>

<div class="insights-overlay" id="insights-box">
        <div class="insights-title">Статистика реакций</div>
        
        <div class="stat-row">
            <span class="stat-emoji">🔥</span>
            <div class="stat-bar-bg"><div class="stat-bar-fill" id="bar-fire"></div></div>
            <span class="stat-num" id="stat-fire">0</span>
        </div>
        <div class="stat-row">
            <span class="stat-emoji">😍</span>
            <div class="stat-bar-bg"><div class="stat-bar-fill" id="bar-love"></div></div>
            <span class="stat-num" id="stat-love">0</span>
        </div>
        <div class="stat-row">
            <span class="stat-emoji">🤯</span>
            <div class="stat-bar-bg"><div class="stat-bar-fill" id="bar-mind"></div></div>
            <span class="stat-num" id="stat-mind">0</span>
        </div>
        <div class="stat-row">
            <span class="stat-emoji">😴</span>
            <div class="stat-bar-bg"><div class="stat-bar-fill" id="bar-sleep"></div></div>
            <span class="stat-num" id="stat-sleep">0</span>
        </div>

<div style="display: flex; gap: 20px;">
            <button class="btn-control" onclick="InstaApp.closeInsights()">Назад</button>
            <button class="btn-control btn-primary" onclick="InstaApp.reset()">Новый опрос</button>
        </div>
    </div>

react: function(e, type, emojiChar) {
                // 1. Увеличить счетчик
                this.counts[type]++;
                
                // 2. Обновить бейдж (счетчик под кнопкой)
                const badge = document.getElementById('count-' + type);
                badge.innerText = this.counts[type];
                badge.style.opacity = 1;

// 3. Создать летящий эмодзи
                this.spawnEmoji(e.clientX, e.clientY, emojiChar);

// 4. Случайная вибрация стикера (вопроса)
                const sticker = document.querySelector('.question-sticker');
                sticker.style.transform = `rotate(${Math.random()*4 - 2}deg) scale(1.02)`;
                setTimeout(() => sticker.style.transform = `rotate(-2deg) scale(1)`, 100);
            },

spawnEmoji: function(x, y, char) {
                const el = document.createElement('div');
                el.innerText = char;
                el.className = 'flying-emoji';
                
                // Корректируем координаты относительно контейнера
                const rect = this.wrapper.getBoundingClientRect();
                // Немного рандома по X, чтобы не летели в одну линию
                const randomX = (Math.random() * 60) - 30;
                
                el.style.left = (x - rect.left + randomX) + 'px';
                el.style.top = (y - rect.top - 50) + 'px';
                
                this.wrapper.appendChild(el);

// Удаляем из DOM после анимации (1.5s)
                setTimeout(() => el.remove(), 1500);
            },

showInsights: function() {
                document.getElementById('insights-box').style.display = 'flex';
                
                // Найти максимум для масштаба графиков
                const max = Math.max(...Object.values(this.counts)) || 1;
                
                // Обновить графики
                for (let key in this.counts) {
                    document.getElementById('stat-' + key).innerText = this.counts[key];
                    const percent = (this.counts[key] / max) * 100;
                    document.getElementById('bar-' + key).style.width = percent + '%';
                }
            },

closeInsights: function() {
                document.getElementById('insights-box').style.display = 'none';
            },

reset: function() {
                if(confirm('Сбросить всю статистику реакций?')) {
                    this.counts = { fire: 0, love: 0, mind: 0, sleep: 0 };
                    // Сброс бейджей
                    ['fire', 'love', 'mind', 'sleep'].forEach(key => {
                        const b = document.getElementById('count-' + key);
                        b.innerText = '0';
                        b.style.opacity = 0;
                    });
                    this.showInsights(); // Обновить графики до нулей
                    this.closeInsights();
                }
            }
        };
    </script>
</div>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рефлексия: Цифровая мишень</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f4f8;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 20px;
        }

h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

.controls {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
        }

button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
            font-weight: bold;
        }

.btn-clear {
            background-color: #e74c3c;
            color: white;
        }
        .btn-clear:hover { background-color: #c0392b; }

.btn-save {
            background-color: #27ae60;
            color: white;
        }
        .btn-save:hover { background-color: #219150; }

.btn-undo {
            background-color: #3498db;
            color: white;
        }
        .btn-undo:hover { background-color: #2980b9; }

/* Контейнер для холста */
        #canvas-container {
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-radius: 10px;
            background: white;
            overflow: hidden;
        }

canvas {
            display: block;
            cursor: crosshair;
        }

.hint {
            margin-top: 15px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>

<h1>🎯 Рефлексия «Мишень»</h1>
    
    <div class="controls">
        <button class="btn-undo" onclick="undoLast()">↩ Отменить последнее</button>
        <button class="btn-clear" onclick="clearMarks()">🗑 Очистить всё</button>
        <button class="btn-save" onclick="saveImage()">💾 Скачать результат</button>
    </div>

<p class="hint">Инструкция: Кликните по мишени. Чем ближе к центру — тем выше ваша оценка (10 баллов). Край — 0 баллов.</p>

// Настройки секторов
        const sectors = [
            { name: "БЫЛО ИНТЕРЕСНО", x: -1, y: -1 }, // Верхний левый
            { name: "АКТИВНО РАБОТАЛ", x: 1, y: -1 }, // Верхний правый
            { name: "УЗНАЛ НОВОЕ", x: -1, y: 1 },   // Нижний левый
            { name: "ВСЁ ПОНЯТНО", x: 1, y: 1 }      // Нижний правый
        ];

// Инициализация при загрузке
        drawAll();

// Обработчик клика
        canvas.addEventListener('mousedown', function(e) {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            marks.push({x: x, y: y});
            drawAll();
        });

// Функция отрисовки всего (фон + метки)
        function drawAll() {
            const w = canvas.width;
            const h = canvas.height;
            const cx = w / 2;
            const cy = h / 2;

// 1. Очистка
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, w, h);

// 2. Рисуем круги мишени (от внешнего к внутреннему)
            const maxRadius = w / 2 - 20;
            const steps = 5; // 5 уровней оценки (2, 4, 6, 8, 10)
            
            for (let i = 0; i < steps; i++) {
                ctx.beginPath();
                ctx.arc(cx, cy, maxRadius * ((steps - i) / steps), 0, Math.PI * 2);
                
                // Чередование цветов для читаемости
                ctx.fillStyle = (i % 2 === 0) ? '#eef2f3' : '#ffffff';
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#bdc3c7';
                ctx.stroke();
            }

// 3. Рисуем оси
            ctx.beginPath();
            ctx.moveTo(cx, 0);
            ctx.lineTo(cx, h);
            ctx.moveTo(0, cy);
            ctx.lineTo(w, cy);
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#2c3e50';
            ctx.stroke();

// 4. Подписи секторов
            ctx.font = 'bold 18px Arial';
            ctx.fillStyle = '#2c3e50';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

// Расчет позиций текста (в центрах квадрантов)
            const textOffset = maxRadius * 0.6; 
            
            // Верх-Лево
            ctx.fillText("БЫЛО ИНТЕРЕСНО", cx - textOffset, cy - textOffset);
            // Верх-Право
            ctx.fillText("АКТИВНО РАБОТАЛ", cx + textOffset, cy - textOffset);
            // Низ-Лево
            ctx.fillText("УЗНАЛ НОВОЕ", cx - textOffset, cy + textOffset);
            // Низ-Право
            ctx.fillText("ВСЁ ПОНЯТНО", cx + textOffset, cy + textOffset);

// 5. Подписи очков (ось)
            ctx.font = '12px Arial';
            ctx.fillStyle = '#7f8c8d';
            for (let i = 1; i <= steps; i++) {
                ctx.fillText(i * 2, cx + 5, cy - (maxRadius * (i / steps)) + 10);
            }

// 6. Рисуем все метки (выстрелы)
            marks.forEach(mark => {
                drawMark(mark.x, mark.y);
            });
        }

// Функция отрисовки одной точки
        function drawMark(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 6, 0, Math.PI * 2);
            // Полупрозрачный красный цвет (эффект тепловой карты при наложении)
            ctx.fillStyle = 'rgba(231, 76, 60, 0.6)'; 
            ctx.fill();
            ctx.strokeStyle = '#c0392b';
            ctx.lineWidth = 1;
            ctx.stroke();
        }

// Удалить последнюю точку
        function undoLast() {
            marks.pop();
            drawAll();
        }

// Очистить всё
        function clearMarks() {
            if(confirm("Вы уверены, что хотите стереть все результаты?")) {
                marks = [];
                drawAll();
            }
        }

// Сохранить как картинку
        function saveImage() {
            const link = document.createElement('a');
            link.download = 'рефлексия_урок.png';
            link.href = canvas.toDataURL();
            link.click();
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Облако тегов класса</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

/* --- ВЕРХНЯЯ ПАНЕЛЬ (ВВОД) --- */
        header {
            background: white;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 10;
        }

input[type="text"] {
            padding: 12px 20px;
            font-size: 18px;
            border: 2px solid #ddd;
            border-radius: 30px;
            width: 300px;
            outline: none;
            transition: 0.3s;
        }

input[type="text"]:focus {
            border-color: #3498db;
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
        }

button.btn-add {
            padding: 12px 25px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.2s;
        }
        button.btn-add:hover { background-color: #2980b9; }

button.btn-clear {
            padding: 12px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
        }
        button.btn-clear:hover { background-color: #c0392b; }

/* --- ОБЛАСТЬ ОБЛАКА --- */
        #cloud-container {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            align-content: center; /* Центрирование по вертикали */
            gap: 15px;
            overflow-y: auto;
        }

/* Стили самих слов */
        .tag {
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: default;
            line-height: 1;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            user-select: none;
        }

.tag:hover {
            transform: scale(1.1);
            text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
            z-index: 5;
        }

/* Анимация появления */
        @keyframes popIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        
        .new-tag {
            animation: popIn 0.6s ease-out;
        }

/* Пустое состояние */
        .empty-state {
            color: #95a5a6;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
<body>

<header>
        <input type="text" id="wordInput" placeholder="Введите слово (понятие)..." autocomplete="off">
        <button class="btn-add" onclick="handleAdd()">Добавить</button>
        <button class="btn-clear" onclick="resetCloud()" title="Очистить всё">🗑</button>
    </header>

<div id="cloud-container">
        <div class="empty-state">Облако пока пусто.<br>Назовите главное слово урока!</div>
    </div>

const input = document.getElementById('wordInput');
        const container = document.getElementById('cloud-container');

// Обработка Enter
        input.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                handleAdd();
            }
        });

function handleAdd() {
            let text = input.value.trim();
            if (!text) return;

// Приводим к нижнему регистру для сравнения, но первую букву делаем заглавной для красоты
            // Чтобы "Клетка" и "клетка" считались одним словом
            const key = text.toLowerCase();
            const displayOverlay = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();

// Логика счетчика
            if (wordsMap[key]) {
                wordsMap[key].count++;
            } else {
                wordsMap[key] = {
                    text: displayOverlay,
                    count: 1,
                    // Присваиваем случайный цвет при создании
                    color: colors[Math.floor(Math.random() * colors.length)]
                };
            }

// Очищаем поле и фокус
            input.value = '';
            input.focus();

// Перерисовываем облако
            renderCloud();
        }

function renderCloud() {
            // Если пусто
            if (Object.keys(wordsMap).length === 0) {
                container.innerHTML = '<div class="empty-state">Облако пока пусто.<br>Назовите главное слово урока!</div>';
                return;
            }

container.innerHTML = '';

// Сортируем слова: сначала популярные, чтобы они были (обычно) ближе к центру или началу
            // Но для flexbox интереснее случайный порядок или просто поток. 
            // Давайте сделаем просто перебор, Flex сам уложит.
            
            // Превращаем объект в массив для удобства
            const tags = Object.values(wordsMap);

tags.forEach(tagData => {
                const span = document.createElement('span');
                span.className = 'tag';
                span.textContent = tagData.text;
                
                // --- ГЛАВНАЯ МАГИЯ РАЗМЕРА ---
                // Базовый размер 1.5rem. За каждый повтор добавляем размер.
                // Ограничиваем максимальный размер (например, 8rem), чтобы не разорвало экран.
                const size = Math.min(1.5 + (tagData.count - 1) * 0.8, 8); 
                
                span.style.fontSize = size + 'rem';
                span.style.color = tagData.color;
                span.style.fontWeight = tagData.count > 1 ? 'bold' : 'normal';
                
                // Добавляем класс анимации
                span.classList.add('new-tag');

container.appendChild(span);
            });
        }

function resetCloud() {
            if (confirm('Очистить всё облако?')) {
                wordsMap = {};
                renderCloud();
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рефлексия: Сортировка знаний</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f6;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 100vh;
            box-sizing: border-box;
        }

header {
            text-align: center;
            margin-bottom: 20px;
        }

h1 {
            margin: 0;
            color: #2c3e50;
        }

/* Панель управления для добавления слов */
        .input-panel {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #dfe6e9;
            border-radius: 5px;
            width: 300px;
        }

button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover { background-color: #2980b9; }

/* Основная рабочая область */
        .workspace {
            display: flex;
            flex: 1;
            gap: 20px;
            height: 100%; 
        }

/* Зона исходных карточек (Склад) */
        .staging-area {
            flex: 1;
            background: #fff;
            border: 2px dashed #bdc3c7;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 10px;
            overflow-y: auto;
        }

/* Контейнер для трех зон рефлексии */
        .drop-zones {
            flex: 3;
            display: flex;
            gap: 15px;
        }

.zone {
            flex: 1;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s, box-shadow 0.2s;
            border: 2px solid transparent;
        }

.zone h2 {
            text-align: center;
            font-size: 1.2rem;
            margin-top: 0;
            margin-bottom: 15px;
            pointer-events: none; /* Чтобы текст не мешал перетаскиванию */
        }

.zone-content {
            flex: 1;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
            padding: 10px;
            overflow-y: auto;
            min-height: 200px;
        }

/* Стилизация конкретных зон */
        .backpack { background-color: #d4efdf; border-color: #27ae60; }
        .backpack h2::before { content: '🎒 '; }
        
        .grinder { background-color: #fcf3cf; border-color: #f1c40f; }
        .grinder h2::before { content: '🧠 '; } /* Используем мозг как символ обработки */
        
        .bin { background-color: #fadbd8; border-color: #c0392b; }
        .bin h2::before { content: '🗑️ '; }

/* Эффект при наведении перетаскиваемого элемента */
        .zone.drag-over {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            background-color: white; /* Подсветка */
        }

/* Сама Карточка */
        .card {
            background-color: white;
            border: 1px solid #ccc;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: grab;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-size: 16px;
            user-select: none;
            max-width: 100%;
            word-wrap: break-word;
        }

.card:active {
            cursor: grabbing;
            opacity: 0.6;
        }

/* Счетчик внизу зоны */
        .counter {
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            color: #555;
        }
    </style>
</head>
<body>

<header>
        <h1>Рефлексия: Сортировка понятий</h1>
    </header>

<div class="input-panel">
        <input type="text" id="termInput" placeholder="Введите термин или тему урока..." onkeypress="handleEnter(event)">
        <button onclick="addCard()">Добавить карточку</button>
    </div>

<div class="workspace">
        <div class="staging-area" id="staging" ondrop="drop(event)" ondragover="allowDrop(event)">
            <p style="width: 100%; text-align: center; color: #999; pointer-events: none;" id="empty-msg">Здесь появятся карточки</p>
        </div>

<div class="drop-zones">
            
            <div class="zone backpack" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
                <h2>Рюкзак<br><small style="font-size: 0.7em; font-weight: normal;">Беру с собой (Понял)</small></h2>
                <div class="zone-content"></div>
                <div class="counter">0 шт.</div>
            </div>

<div class="zone grinder" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
                <h2>Мясорубка<br><small style="font-size: 0.7em; font-weight: normal;">Нужно переработать</small></h2>
                <div class="zone-content"></div>
                <div class="counter">0 шт.</div>
            </div>

<div class="zone bin" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
                <h2>Корзина<br><small style="font-size: 0.7em; font-weight: normal;">Оказалось лишним</small></h2>
                <div class="zone-content"></div>
                <div class="counter">0 шт.</div>
            </div>

</div>
    </div>

// Обработка нажатия Enter в поле ввода
        function handleEnter(e) {
            if (e.key === 'Enter') addCard();
        }

// Добавление новой карточки
        function addCard() {
            const input = document.getElementById('termInput');
            const text = input.value.trim();
            const stagingArea = document.getElementById('staging');
            const emptyMsg = document.getElementById('empty-msg');

if (text) {
                // Скрываем надпись "пусто", если она есть
                if (emptyMsg) emptyMsg.style.display = 'none';

cardCount++;
                const card = document.createElement('div');
                card.className = 'card';
                card.draggable = true;
                card.id = 'card-' + cardCount;
                card.innerText = text;
                
                // Привязываем события перетаскивания
                card.ondragstart = dragStart;
                
                stagingArea.appendChild(card);
                input.value = ''; // Очистить поле
                input.focus();
            }
        }

// Начало перетаскивания
        function dragStart(ev) {
            // Запоминаем ID перетаскиваемого элемента
            ev.dataTransfer.setData("text", ev.target.id);
            ev.dataTransfer.effectAllowed = "move";
        }

// Разрешить сброс в эту зону
        function allowDrop(ev) {
            ev.preventDefault(); // Обязательно для работы drop
        }

// Визуальный эффект при заходе в зону
        function dragEnter(ev) {
            ev.preventDefault();
            // Ищем ближайший родительский элемент с классом .zone
            const zone = ev.target.closest('.zone');
            if (zone) {
                zone.classList.add('drag-over');
            }
        }

// Убираем эффект при выходе из зоны
        function dragLeave(ev) {
            const zone = ev.target.closest('.zone');
            if (zone) {
                zone.classList.remove('drag-over');
            }
        }

// Сам процесс сброса (Drop)
        function drop(ev) {
            ev.preventDefault();
            
            // Убираем подсветку со всех зон
            document.querySelectorAll('.zone').forEach(z => z.classList.remove('drag-over'));

const data = ev.dataTransfer.getData("text");
            const card = document.getElementById(data);
            
            // Определяем, куда сбросили
            // Если сбросили прямо в зону или её содержимое
            let target = ev.target;
            
            // Если попали в заголовок или счетчик, ищем родительскую зону
            let zone = target.closest('.zone');
            let staging = target.closest('.staging-area');

if (zone) {
                // Добавляем в контейнер контента внутри зоны
                const contentArea = zone.querySelector('.zone-content');
                contentArea.appendChild(card);
                updateCounters();
            } else if (staging) {
                // Возвращаем на склад
                staging.appendChild(card);
                updateCounters();
            }
        }

// Обновление цифр статистики
        function updateCounters() {
            document.querySelectorAll('.zone').forEach(zone => {
                const count = zone.querySelector('.zone-content').children.length;
                zone.querySelector('.counter').innerText = count + ' шт.';
            });
        }

// Добавим пару тестовых карточек для примера при загрузке
        window.onload = function() {
            document.getElementById('termInput').value = "Новая Тема";
            addCard();
            document.getElementById('termInput').value = "Сложный Термин";
            addCard();
            document.getElementById('termInput').value = ""; // очистить
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рефлексия: Светофор (Быстрый выбор)</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

:root {
            --font-main: 'Nunito', sans-serif;
            --bg-gradient: radial-gradient(circle at 50% -20%, #fef9e7 0%, #e0f7fa 100%);
            
            --green-light: #4ade80; --green-dark: #22c55e;
            --yellow-light: #facc15; --yellow-dark: #eab308;
            --red-light: #f87171; --red-dark: #ef4444;

--text-color: #334155;
            --card-bg: rgba(255, 255, 255, 0.85);
        }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: var(--font-main);
            background: var(--bg-gradient);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow: hidden; /* Чтобы конфетти не создавали скролл */
        }

header {
            text-align: center;
            margin-bottom: 30px;
        }

h1 {
            font-size: 2.8rem;
            font-weight: 900;
            color: #1e293b;
            margin-bottom: 10px;
        }

p.instruction {
            font-size: 1.4rem;
            color: #64748b;
            font-weight: 600;
        }

.reflection-card {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            border-radius: 40px;
            padding: 50px 60px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            border: 2px solid rgba(255,255,255,0.6);
            width: 100%;
            max-width: 1000px;
            text-align: center;
        }

.circles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

.option-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            transition: transform 0.2s;
        }

/* Эффект нажатия на весь блок */
        .option-block:active {
            transform: scale(0.95);
        }

.counter-box {
            font-size: 3.5rem;
            font-weight: 900;
            color: #94a3b8;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

/* Активный счетчик становится темным */
        .counter-box.updated {
            color: #333;
            transform: scale(1.3);
        }

.circle-btn {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            outline: none;
            transition: box-shadow 0.3s, transform 0.3s;
        }

/* Цвета */
        .circle-green { background: linear-gradient(135deg, var(--green-light), var(--green-dark)); }
        .circle-yellow { background: linear-gradient(135deg, var(--yellow-light), var(--yellow-dark)); }
        .circle-red { background: linear-gradient(135deg, var(--red-light), var(--red-dark)); }

.circle-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

.desc-text {
            margin-top: 25px;
            font-size: 1.2rem;
            line-height: 1.4;
            font-weight: 700;
            color: #475569;
            max-width: 220px;
        }

/* Частицы салюта */
        .particle {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 100;
        }

@media (max-width: 850px) {
            h1 { font-size: 2rem; }
            .reflection-card { padding: 30px 20px; }
            .circles-grid { grid-template-columns: 1fr; gap: 40px; }
            .counter-box { font-size: 2.5rem; margin-bottom: 10px; }
        }
    </style>
</head>
<body>

<header>
        <h1>Как прошел урок?</h1>
        <p class="instruction">Нажми на цвет, который тебе подходит</p>
    </header>

<div class="reflection-card">
        <div class="circles-grid">
            
            <div class="option-block" onclick="vote('green', this)">
                <div class="counter-box" id="count-green">0</div>
                <button class="circle-btn circle-green"></button>
                <div class="desc-text">Всё понял,<br>могу объяснить другим</div>
            </div>

<div class="option-block" onclick="vote('yellow', this)">
                <div class="counter-box" id="count-yellow">0</div>
                <button class="circle-btn circle-yellow"></button>
                <div class="desc-text">Понял,<br>но есть вопросы</div>
            </div>

<div class="option-block" onclick="vote('red', this)">
                <div class="counter-box" id="count-red">0</div>
                <button class="circle-btn circle-red"></button>
                <div class="desc-text">Тема осталась<br>непонятной</div>
            </div>

</div>
    </div>

function vote(color, element) {
            // Защита от слишком быстрых кликов (дребезг)
            if (isAnimating) return;
            isAnimating = true;

// 1. Обновляем данные
            counts[color]++;
            
            // 2. Обновляем счетчик с анимацией
            const counterEl = document.getElementById(`count-${color}`);
            counterEl.textContent = counts[color];
            counterEl.classList.add('updated');

// 3. Запускаем салют из центра нажатого круга
            const circleBtn = element.querySelector('.circle-btn');
            createParticles(color, circleBtn);

// 4. Сброс состояния анимации через небольшое время
            setTimeout(() => {
                counterEl.classList.remove('updated');
                isAnimating = false;
            }, 300);
        }

function createParticles(color, targetElement) {
            const rect = targetElement.getBoundingClientRect();
            // Центр элемента
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;

const colorsMap = {
                green: ['#4ade80', '#22c55e', '#bbf7d0'],
                yellow: ['#facc15', '#eab308', '#fef08a'],
                red: ['#f87171', '#ef4444', '#fecaca']
            };

const palette = colorsMap[color];

// Создаем 20 частиц
            for (let i = 0; i < 20; i++) {
                const p = document.createElement('div');
                p.classList.add('particle');
                
                // Случайный цвет из палитры
                p.style.backgroundColor = palette[Math.floor(Math.random() * palette.length)];
                
                // Начальная позиция (центр круга)
                p.style.left = centerX + 'px';
                p.style.top = centerY + 'px';
                
                document.body.appendChild(p);

// Вычисляем случайное направление разлета
                const angle = Math.random() * Math.PI * 2;
                const velocity = 50 + Math.random() * 100; // Радиус разлета
                
                const tx = Math.cos(angle) * velocity;
                const ty = Math.sin(angle) * velocity;

// Анимация через WAAPI (Web Animations API) для плавности
                const animation = p.animate([
                    { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
                    { transform: `translate(calc(-50% + ${tx}px), calc(-50% + ${ty}px)) scale(0)`, opacity: 0 }
                ], {
                    duration: 600 + Math.random() * 200,
                    easing: 'cubic-bezier(0, .9, .57, 1)',
                });

// Удаляем элемент после завершения анимации
                animation.onfinish = () => p.remove();
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Полёт Знаний</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap');

:root {
            --sky-top: #00d2ff;
            --sky-bottom: #3a7bd5;
            --glass-bg: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.5);
            --text-color: #fff;
        }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Fredoka', sans-serif;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end; /* Панель внизу */
            position: relative;
        }

/* --- Анимированный фон (Облака) --- */
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
            z-index: 1;
            opacity: 0.8;
            animation: moveClouds linear infinite;
        }
        
        /* Разные формы облаков через псевдоэлементы */
        .cloud::after, .cloud::before {
            content: '';
            position: absolute;
            background: inherit;
            border-radius: 50%;
        }

/* Настройки конкретных облаков */
        .c1 { width: 120px; height: 50px; top: 20%; left: -20%; animation-duration: 25s; }
        .c1::after { width: 60px; height: 60px; top: -30px; left: 15px; }
        .c1::before { width: 50px; height: 50px; top: -20px; right: 15px; }

.c2 { width: 180px; height: 70px; top: 40%; left: -20%; animation-duration: 35s; animation-delay: 5s; opacity: 0.6; }
        .c2::after { width: 80px; height: 80px; top: -40px; left: 25px; }
        
        .c3 { width: 100px; height: 40px; top: 10%; left: -20%; animation-duration: 45s; animation-delay: 2s; }
        
        @keyframes moveClouds {
            0% { left: -20%; }
            100% { left: 120%; }
        }

/* --- Зоны высоты (Визуальные разделители) --- */
        .zone-label {
            position: absolute;
            right: 20px;
            font-size: 1.2rem;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            pointer-events: none;
            z-index: 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .zone-high { top: 15%; }
        .zone-mid { top: 50%; }
        .zone-low { bottom: 25%; }

/* --- Воздушные шары (Элементы голосования) --- */
        .balloon-wrapper {
            position: absolute;
            bottom: -100px; /* Стартуют за экраном */
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: bottom 1.5s cubic-bezier(0.25, 1, 0.5, 1); /* Плавный взлет */
            z-index: 10;
            cursor: pointer;
        }

.balloon {
            font-size: 3.5rem;
            filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
            animation: wobble 3s ease-in-out infinite alternate; /* Покачивание */
        }

.string {
            width: 2px;
            height: 40px;
            background: rgba(255,255,255,0.6);
            margin-top: -10px;
        }

@keyframes wobble {
            0% { transform: rotate(-5deg); }
            100% { transform: rotate(5deg); }
        }

/* --- Панель управления --- */
        .control-panel {
            width: 90%;
            max-width: 800px;
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 20px 40px;
            margin-bottom: 30px;
            z-index: 100;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

h1 {
            color: #fff;
            margin-bottom: 20px;
            font-size: 2rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            text-align: center;
        }

.buttons-grid {
            display: flex;
            justify-content: space-around;
            width: 100%;
            gap: 20px;
            flex-wrap: wrap;
        }

.action-btn {
            flex: 1;
            min-width: 200px;
            border: none;
            border-radius: 20px;
            padding: 15px 20px;
            font-family: 'Fredoka', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

.action-btn:active { transform: scale(0.95); }
        .action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

/* Стили кнопок */
        .btn-high { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #d6336c; }
        .btn-mid { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); color: #2563eb; }
        .btn-low { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); color: #059669; }

.count-badge {
            background: rgba(255,255,255,0.8);
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 1.2rem;
            min-width: 40px;
            text-align: center;
        }

/* Адаптив */
        @media (max-width: 700px) {
            h1 { font-size: 1.5rem; }
            .buttons-grid { flex-direction: column; }
            .action-btn { width: 100%; }
            .balloon { font-size: 2.5rem; }
        }
    </style>
</head>
<body>

<div class="zone-label zone-high">Высота: Отлично!</div>
    <div class="zone-label zone-mid">Высота: Есть вопросы</div>
    <div class="zone-label zone-low">Высота: Было трудно</div>

<div class="control-panel">
        <h1>🎈 Как прошёл наш полёт?</h1>
        
        <div class="buttons-grid">
            <button class="action-btn btn-high" onclick="launchBalloon('high', '🚀')">
                <span>Всё супер!</span>
                <span class="count-badge" id="count-high">0</span>
            </button>
            
            <button class="action-btn btn-mid" onclick="launchBalloon('mid', '☁️')">
                <span>В облаках</span>
                <span class="count-badge" id="count-mid">0</span>
            </button>
            
            <button class="action-btn btn-low" onclick="launchBalloon('low', '⛰️')">
                <span>На земле</span>
                <span class="count-badge" id="count-low">0</span>
            </button>
        </div>
    </div>

function launchBalloon(level, emoji) {
            // 1. Обновляем счетчик
            counts[level]++;
            document.getElementById(`count-${level}`).textContent = counts[level];

// 2. Создаем шар
            const wrapper = document.createElement('div');
            wrapper.classList.add('balloon-wrapper');
            
            // Выбираем цвет шара в зависимости от уровня
            let balloonEmoji = '🎈';
            if (level === 'high') balloonEmoji = '🎈'; // Красный
            if (level === 'mid') balloonEmoji = '🔵';  // Синий
            if (level === 'low') balloonEmoji = '🟢';  // Зеленый (или можно использовать разные цветные шарики)
            // Но для красоты используем стандартный красный шар, он контрастнее всего на небе, 
            // либо разные эмодзи, как передано в аргументе, но эмодзи 🎈 выглядит лучше всего как шар.
            // Давайте сделаем их разными цветами через hue-rotate фильтр CSS для разнообразия?
            
            wrapper.innerHTML = `<div class="balloon">🎈</div><div class="string"></div>`;
            
            // Случайный цвет (оттенок)
            const hue = Math.floor(Math.random() * 360);
            wrapper.querySelector('.balloon').style.filter = `hue-rotate(${hue}deg)`;

// 3. Позиционирование по горизонтали (случайно)
            // Ограничиваем от 5% до 95%, чтобы не улетали за экран
            const randomLeft = 5 + Math.random() * 90;
            wrapper.style.left = `${randomLeft}%`;

// 4. Добавляем на страницу
            container.appendChild(wrapper);

// 5. Запускаем полет (через небольшую паузу, чтобы CSS transition сработал)
            requestAnimationFrame(() => {
                // Определяем высоту полета
                // high = 80-90% от низа
                // mid = 50-60% от низа
                // low = 20-30% от низа
                
                let flightHeight;
                if (level === 'high') flightHeight = 80 + Math.random() * 10;
                else if (level === 'mid') flightHeight = 50 + Math.random() * 10;
                else flightHeight = 25 + Math.random() * 10;

wrapper.style.bottom = `${flightHeight}%`;
                
                // Добавляем случайную задержку анимации покачивания, чтобы они не двигались синхронно
                wrapper.querySelector('.balloon').style.animationDelay = `-${Math.random() * 5}s`;
            });

// 6. Удаление при клике (если учитель хочет убрать лишнее)
            wrapper.addEventListener('click', (e) => {
                if(confirm('Убрать этот шар?')) {
                    wrapper.style.opacity = '0';
                    setTimeout(() => wrapper.remove(), 500);
                    counts[level]--;
                    document.getElementById(`count-${level}`).textContent = counts[level];
                }
            });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Океан Знаний: Аналитика</title>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --surface-color: #4facfe;
            --deep-color: #002c4e;
            --sand-color: #e67e22;
        }

body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(to bottom, var(--surface-color) 0%, var(--deep-color) 90%, var(--sand-color) 100%);
            font-family: 'Fredoka', sans-serif;
            user-select: none;
            position: relative;
        }

/* --- UI Элементы --- */
        .ui-layer {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 100;
            padding: 0 20px;
            box-sizing: border-box;
        }

.btn {
            border: none;
            padding: 12px 24px;
            border-radius: 50px;
            font-family: inherit;
            font-size: 1.1rem;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.1s, filter 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 100px;
            color: #333;
        }
        
        .btn span { font-size: 0.8rem; opacity: 0.8; margin-top: 2px; }
        .btn:active { transform: scale(0.95); }
        .btn:hover { filter: brightness(1.1); }

.btn-surface { background: #dff9fb; color: #130f40; border-bottom: 4px solid #7ed6df; }
        .btn-middle { background: #e056fd; color: white; border-bottom: 4px solid #be2edd; }
        .btn-deep { background: #f1c40f; color: #2c3e50; border-bottom: 4px solid #d35400; }

.finish-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #ff7675;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 12px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            z-index: 101;
        }
        .finish-btn:hover { background: #d63031; }

/* --- Объекты океана --- */
        .ocean-item {
            position: absolute;
            font-size: 3.5rem;
            cursor: pointer;
            z-index: 10;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
            transition: opacity 0.3s, transform 0.3s;
        }
        
        /* Анимация удаления */
        .poof {
            animation: poofAnim 0.4s forwards;
        }
        @keyframes poofAnim {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }

/* --- МОДАЛЬНОЕ ОКНО РЕЗУЛЬТАТОВ --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            z-index: 200;
            display: none;
            justify-content: center;
            align-items: center;
        }
        
        .result-card {
            background: white;
            padding: 30px;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

@keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

.result-title { font-size: 2rem; color: #2c3e50; margin-bottom: 5px; }
        .result-subtitle { color: #7f8c8d; margin-bottom: 25px; font-size: 1.1rem; }

/* Графики */
        .stat-row {
            display: flex; align-items: center; margin-bottom: 15px;
        }
        .stat-icon { font-size: 2rem; width: 50px; }
        .stat-bar-bg {
            flex: 1; height: 12px; background: #eee; border-radius: 6px; overflow: hidden; margin: 0 15px;
        }
        .stat-bar-fill { height: 100%; width: 0%; transition: width 1s ease-out; }
        .stat-value { width: 40px; font-weight: bold; color: #555; }

.verdict-box {
            background: #f1f2f6;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            font-size: 1.2rem;
            color: #2c3e50;
            font-weight: bold;
        }

.modal-btns { display: flex; gap: 10px; justify-content: center; }
        .btn-restart { background: #74b9ff; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
        .btn-close { background: #dfe6e9; color: #333; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1rem; }

/* Анимации движения */
        @keyframes floatSwim {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(15px, -10px) rotate(5deg); }
            75% { transform: translate(-15px, 10px) rotate(-5deg); }
        }
        @keyframes jellySwim {
            0%, 100% { transform: translateY(0) scaleY(1); }
            50% { transform: translateY(-20px) scaleY(0.9); }
        }
        @keyframes dropDown {
            from { top: -10%; opacity: 0; }
            to { top: calc(90% - 40px); opacity: 1; } /* Падает на песок */
        }

</style>
</head>
<body>

<button class="finish-btn" onclick="OceanGame.finish()">🏁 Подвести итог</button>

<div class="ui-layer">
        <button class="btn btn-surface" onclick="OceanGame.spawn('surface')">
            🐟 Легко
            <span>Поверхность</span>
        </button>
        <button class="btn btn-middle" onclick="OceanGame.spawn('middle')">
            🦑 Вопросы
            <span>Глубина</span>
        </button>
        <button class="btn btn-deep" onclick="OceanGame.spawn('deep')">
            💎 Трудно
            <span>Дно</span>
        </button>
    </div>

<div id="result-modal" class="modal-overlay">
        <div class="result-card">
            <div class="result-title">Результаты урока</div>
            <div class="result-subtitle" id="total-votes">Всего голосов: 0</div>

<div class="modal-btns">
                <button class="btn-restart" onclick="OceanGame.reset()">🔄 Сбросить и начать</button>
                <button class="btn-close" onclick="OceanGame.hideModal()">Закрыть</button>
            </div>
        </div>
    </div>

getRandom: function(arr) { return arr[Math.floor(Math.random() * arr.length)]; },

spawn: function(type) {
                this.counts[type]++;
                const el = document.createElement('div');
                el.classList.add('ocean-item');
                el.innerText = this.getRandom(this.assets[type]);

// Логика позиционирования
                if (type === 'surface') {
                    // Верхние 30%
                    el.style.top = (Math.random() * 30 + 5) + '%'; 
                    el.style.left = (Math.random() * 90) + '%';
                    el.style.animation = 'floatSwim 4s infinite ease-in-out';
                } 
                else if (type === 'middle') {
                    // Середина 30-70%
                    el.style.top = (Math.random() * 30 + 40) + '%';
                    el.style.left = (Math.random() * 90) + '%';
                    el.style.animation = 'jellySwim 3s infinite ease-in-out';
                } 
                else if (type === 'deep') {
                    // Падает на дно
                    el.style.left = (Math.random() * 80 + 10) + '%';
                    el.style.animation = 'dropDown 1s ease-out forwards';
                }

// Удаление при клике (если случайно нажали)
                el.onclick = (e) => {
                    e.stopPropagation(); // Чтобы не создавать новый
                    this.removeElement(el, type);
                };

document.body.appendChild(el);
            },

removeElement: function(el, type) {
                if(this.counts[type] > 0) this.counts[type]--;
                el.classList.add('poof');
                setTimeout(() => el.remove(), 400);
            },

finish: function() {
                const total = this.counts.surface + this.counts.middle + this.counts.deep;
                document.getElementById('total-votes').innerText = `Всего ответов: ${total}`;
                
                // Заполняем бары
                const max = Math.max(total, 1); // Чтобы не делить на 0
                
                document.getElementById('val-surface').innerText = this.counts.surface;
                document.getElementById('bar-surface').style.width = (this.counts.surface / max * 100) + '%';

document.getElementById('val-middle').innerText = this.counts.middle;
                document.getElementById('bar-middle').style.width = (this.counts.middle / max * 100) + '%';

document.getElementById('val-deep').innerText = this.counts.deep;
                document.getElementById('bar-deep').style.width = (this.counts.deep / max * 100) + '%';

// Вердикт
                let msg = "";
                if (total === 0) msg = "Океан спокоен... Жду ответов!";
                else {
                    const winner = Object.keys(this.counts).reduce((a, b) => this.counts[a] > this.counts[b] ? a : b);
                    if (winner === 'surface') msg = "🎉 Тема усвоена отлично! Плаваем уверенно.";
                    else if (winner === 'middle') msg = "🤔 Есть вопросы. Нужно немного прояснить ситуацию.";
                    else msg = "💪 Глубокая работа. Было трудно, но мы нашли сокровища!";
                }
                document.getElementById('verdict-text').innerText = msg;

document.getElementById('result-modal').style.display = 'flex';
            },

hideModal: function() {
                document.getElementById('result-modal').style.display = 'none';
            },

reset: function() {
                if(confirm("Очистить океан и начать заново?")) {
                    this.counts = { surface: 0, middle: 0, deep: 0 };
                    document.querySelectorAll('.ocean-item').forEach(el => el.remove());
                    this.hideModal();
                }
            }
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Космическая Миссия: Рефлексия</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <style>
        :root {
            --neon-blue: #00f3ff;
            --neon-green: #0aff00;
            --neon-red: #ff003c;
            --neon-yellow: #fcee0a;
            --hud-bg: rgba(0, 10, 20, 0.85);
        }

body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: #000;
            font-family: 'Share Tech Mono', monospace;
            color: var(--neon-blue);
            user-select: none;
        }

/* --- КОСМОС (CANVAS) --- */
        #starfield {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0;
        }

/* --- ИНТЕРФЕЙС (HUD) --- */
        .hud-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 10;
            pointer-events: none; /* Чтобы клики проходили сквозь пустые места */
            box-shadow: inset 0 0 100px rgba(0, 243, 255, 0.2);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

/* Сканирующая линия (эффект монитора) */
        .scanline {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.05) 51%);
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 2;
        }

/* --- ВЕРХНЯЯ ПАНЕЛЬ --- */
        .top-bar {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: auto;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
        }

.mission-status {
            border: 1px solid var(--neon-blue);
            padding: 5px 15px;
            border-radius: 5px;
            text-shadow: 0 0 10px var(--neon-blue);
        }

.finish-btn {
            background: rgba(255, 0, 60, 0.2);
            border: 1px solid var(--neon-red);
            color: var(--neon-red);
            padding: 10px 20px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            transition: 0.3s;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .finish-btn:hover { background: var(--neon-red); color: black; box-shadow: 0 0 20px var(--neon-red); }

/* --- НИЖНЯЯ ПАНЕЛЬ (КНОПКИ) --- */
        .control-panel {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 30px;
            pointer-events: auto;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        }

.hud-btn {
            background: rgba(0, 20, 40, 0.6);
            border: 2px solid;
            color: white;
            padding: 15px 10px;
            width: 140px;
            height: 100px; /* Фиксированная высота */
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            font-size: 0.8rem;
            transition: all 0.2s;
            clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

.btn-warp { border-color: var(--neon-green); color: var(--neon-green); }
        .btn-warp:hover { background: var(--neon-green); color: black; box-shadow: 0 0 30px var(--neon-green); }

.btn-asteroid { border-color: var(--neon-yellow); color: var(--neon-yellow); }
        .btn-asteroid:hover { background: var(--neon-yellow); color: black; box-shadow: 0 0 30px var(--neon-yellow); }

.btn-sos { border-color: var(--neon-red); color: var(--neon-red); }
        .btn-sos:hover { background: var(--neon-red); color: black; box-shadow: 0 0 30px var(--neon-red); }

.btn-icon { font-size: 2rem; }

/* --- ЖУРНАЛ СОБЫТИЙ (Центр) --- */
        .log-console {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }
        .log-message {
            font-size: 1.5rem;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.5s;
            text-shadow: 0 0 10px currentColor;
        }

/* --- ОКНО РЕЗУЛЬТАТОВ --- */
        .report-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

.report-card {
            border: 2px solid var(--neon-blue);
            background: rgba(0, 20, 40, 0.9);
            width: 90%; max-width: 600px;
            padding: 30px;
            box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
            position: relative;
        }
        /* Уголки для красоты */
        .report-card::before {
            content: ''; position: absolute; top: -5px; left: -5px; width: 20px; height: 20px;
            border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue);
        }
        .report-card::after {
            content: ''; position: absolute; bottom: -5px; right: -5px; width: 20px; height: 20px;
            border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue);
        }

.report-title {
            font-family: 'Orbitron'; font-size: 2rem; color: white;
            border-bottom: 1px solid var(--neon-blue); padding-bottom: 15px; margin-bottom: 20px;
            text-align: center; letter-spacing: 3px;
        }

.stat-line {
            display: flex; align-items: center; margin-bottom: 15px; font-size: 1.2rem;
        }
        .stat-label { width: 120px; }
        .stat-bar-box { flex: 1; height: 20px; background: #111; border: 1px solid #333; margin: 0 15px; position: relative; }
        .stat-bar { height: 100%; width: 0%; transition: width 1s; box-shadow: 0 0 10px currentColor; }
        .stat-num { width: 50px; text-align: right; }

.verdict-screen {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            margin-top: 20px;
            border-left: 4px solid var(--neon-blue);
            font-size: 1.1rem;
            line-height: 1.5;
        }

.modal-controls { margin-top: 25px; text-align: center; display: flex; gap: 10px; justify-content: center;}
        .btn-action {
            background: transparent; border: 1px solid var(--neon-blue); color: var(--neon-blue);
            padding: 10px 20px; font-family: 'Orbitron'; cursor: pointer;
        }
        .btn-action:hover { background: var(--neon-blue); color: black; }

/* Эффект красной тревоги */
        @keyframes redAlert {
            0% { box-shadow: inset 0 0 0 rgba(255,0,0,0); }
            50% { box-shadow: inset 0 0 100px rgba(255,0,0,0.5); }
            100% { box-shadow: inset 0 0 0 rgba(255,0,0,0); }
        }
        .alert-mode { animation: redAlert 1s infinite; }

</style>
</head>
<body>

<div class="hud-overlay" id="hud">
        
        <div class="top-bar">
            <div class="mission-status">
                СТАТУС: <span id="system-status" style="color:var(--neon-green)">НОРМА</span>
            </div>
            <button class="finish-btn" onclick="SpaceMission.finish()">
                ЗАВЕРШИТЬ МИССИЮ
            </button>
        </div>

<div class="log-console">
            <div id="log-msg" class="log-message">SYSTEM READY</div>
        </div>

<div class="control-panel">
            <button class="hud-btn btn-warp" onclick="SpaceMission.vote('warp')">
                <span class="btn-icon">🚀</span>
                <span>ГИПЕРПРЫЖОК</span>
                </button>
            <button class="hud-btn btn-asteroid" onclick="SpaceMission.vote('asteroid')">
                <span class="btn-icon">☄️</span>
                <span>МАНЕВР</span>
                </button>
            <button class="hud-btn btn-sos" onclick="SpaceMission.vote('sos')">
                <span class="btn-icon">🆘</span>
                <span>SOS</span>
                </button>
        </div>
    </div>

<div id="report-screen" class="report-modal">
        <div class="report-card">
            <div class="report-title">ОТЧЕТ О МИССИИ</div>
            
            <div class="stat-line" style="color: var(--neon-green)">
                <span class="stat-label">УСПЕХ</span>
                <div class="stat-bar-box"><div id="bar-warp" class="stat-bar" style="background:var(--neon-green)"></div></div>
                <span id="val-warp" class="stat-num">0</span>
            </div>

<div class="verdict-screen">
                <strong style="display:block; margin-bottom:5px;">КОММЕНТАРИЙ БОРТОВОГО ИИ:</strong>
                <span id="ai-verdict">Ожидание данных телеметрии...</span>
            </div>

<div class="modal-controls">
                <button class="btn-action" onclick="SpaceMission.reset()">НОВАЯ МИССИЯ</button>
                <button class="btn-action" onclick="SpaceMission.closeReport()">ЗАКРЫТЬ</button>
            </div>
        </div>
    </div>

init() {
                this.ctx = this.canvas.getContext('2d');
                this.resize();
                window.addEventListener('resize', () => this.resize());
                
                // Создаем 400 звезд
                for(let i=0; i<400; i++) {
                    this.stars.push({
                        x: Math.random() * this.width - this.width/2,
                        y: Math.random() * this.height - this.height/2,
                        z: Math.random() * this.width
                    });
                }
                this.animate();
            },

resize() {
                this.width = window.innerWidth;
                this.height = window.innerHeight;
                this.canvas.width = this.width;
                this.canvas.height = this.height;
            },

setWarp(isActive) {
                // Если варп - ускоряемся до 50, иначе возвращаемся к 2
                this.targetSpeed = isActive ? 50 : 2;
            },

setChaos(isActive) {
                // Эффект тряски или замедления можно добавить здесь
                this.targetSpeed = isActive ? 0.5 : 2;
            },

animate() {
                // Плавное изменение скорости
                this.speed += (this.targetSpeed - this.speed) * 0.05;

this.ctx.fillStyle = "#000";
                this.ctx.fillRect(0, 0, this.width, this.height);

this.ctx.fillStyle = "#fff";
                
                // Центр экрана
                const cx = this.width / 2;
                const cy = this.height / 2;

this.stars.forEach(star => {
                    // Движение к зрителю (уменьшение Z)
                    star.z -= this.speed;

// Если звезда пролетела мимо, перекидываем назад
                    if (star.z <= 0) {
                        star.z = this.width;
                        star.x = Math.random() * this.width - this.width/2;
                        star.y = Math.random() * this.height - this.height/2;
                    }

// Проекция 3D на 2D
                    const x = (star.x / star.z) * 100 + cx;
                    const y = (star.y / star.z) * 100 + cy;
                    
                    // Размер зависит от близости
                    const size = (1 - star.z / this.width) * 3;

// Цвет (немного голубоватый для далеких)
                    if(this.speed > 20) {
                        // Эффект полосок при гиперпрыжке
                        this.ctx.strokeStyle = "rgba(100, 200, 255, 0.5)";
                        this.ctx.beginPath();
                        this.ctx.moveTo(x, y);
                        this.ctx.lineTo(x - (x-cx)*0.1, y - (y-cy)*0.1);
                        this.ctx.stroke();
                    } else {
                        this.ctx.fillRect(x, y, size, size);
                    }
                });

requestAnimationFrame(() => this.animate());
            }
        };

// === 2. ЛОГИКА МИССИИ ===
        const SpaceMission = {
            stats: { warp: 0, asteroid: 0, sos: 0 },
            logEl: document.getElementById('log-msg'),
            hudEl: document.getElementById('hud'),
            statusEl: document.getElementById('system-status'),

init() {
                StarEngine.init();
            },

vote(type) {
                this.stats[type]++;
                
                // Визуальная реакция
                if (type === 'warp') {
                    this.showMsg("ГИПЕРДВИГАТЕЛЬ: ЗАРЯД +1", "var(--neon-green)");
                    StarEngine.setWarp(true);
                    setTimeout(() => StarEngine.setWarp(false), 800); // Короткий рывок
                    this.setStatus("УСКОРЕНИЕ", "var(--neon-green)");
                } 
                else if (type === 'asteroid') {
                    this.showMsg("МАНЕВР УКЛОНЕНИЯ", "var(--neon-yellow)");
                    this.setStatus("ТУРБУЛЕНТНОСТЬ", "var(--neon-yellow)");
                } 
                else if (type === 'sos') {
                    this.showMsg("ВНИМАНИЕ: СБОЙ СИСТЕМЫ", "var(--neon-red)");
                    this.hudEl.classList.add('alert-mode');
                    setTimeout(() => this.hudEl.classList.remove('alert-mode'), 1500);
                    this.setStatus("ТРЕВОГА", "var(--neon-red)");
                }
            },

showMsg(text, color) {
                this.logEl.innerText = text;
                this.logEl.style.color = color;
                this.logEl.style.opacity = 1;
                this.logEl.style.transform = "scale(1.2)";
                
                setTimeout(() => {
                    this.logEl.style.opacity = 0;
                    this.logEl.style.transform = "scale(1)";
                }, 1500);
            },

setStatus(text, color) {
                this.statusEl.innerText = text;
                this.statusEl.style.color = color;
                // Сброс на НОРМА через 2 сек
                if (this.statusTimer) clearTimeout(this.statusTimer);
                this.statusTimer = setTimeout(() => {
                    this.statusEl.innerText = "НОРМА";
                    this.statusEl.style.color = "var(--neon-green)";
                }, 2000);
            },

finish() {
                const total = this.stats.warp + this.stats.asteroid + this.stats.sos;
                const modal = document.getElementById('report-screen');
                const verdictEl = document.getElementById('ai-verdict');
                
                // Заполнение цифр
                const max = Math.max(total, 1);
                
                document.getElementById('val-warp').innerText = this.stats.warp;
                document.getElementById('bar-warp').style.width = (this.stats.warp / max * 100) + '%';
                
                document.getElementById('val-asteroid').innerText = this.stats.asteroid;
                document.getElementById('bar-asteroid').style.width = (this.stats.asteroid / max * 100) + '%';
                
                document.getElementById('val-sos').innerText = this.stats.sos;
                document.getElementById('bar-sos').style.width = (this.stats.sos / max * 100) + '%';

// Анализ
                if (total === 0) {
                    verdictEl.innerText = "Данные телеметрии отсутствуют. Экипаж молчит.";
                } else {
                    const winner = Object.keys(this.stats).reduce((a, b) => this.stats[a] > this.stats[b] ? a : b);
                    
                    if (winner === 'warp') {
                        verdictEl.innerText = "Миссия выполнена успешно! Экипаж демонстрирует отличную подготовку. Готовы к переходу в следующий сектор.";
                        verdictEl.style.color = "var(--neon-green)";
                    } else if (winner === 'asteroid') {
                        verdictEl.innerText = "Миссия пройдена, но с трудностями. Были столкновения в поясе астероидов. Рекомендуется калибровка навигационных систем (повторение темы).";
                        verdictEl.style.color = "var(--neon-yellow)";
                    } else {
                        verdictEl.innerText = "КРИТИЧЕСКИЕ ПОВРЕЖДЕНИЯ. Большинство систем отказало. Продолжать полет невозможно без капитального ремонта (дополнительного урока).";
                        verdictEl.style.color = "var(--neon-red)";
                    }
                }

modal.style.display = 'flex';
            },

closeReport() {
                document.getElementById('report-screen').style.display = 'none';
            },

reset() {
                if(confirm("Сбросить бортовой журнал?")) {
                    this.stats = { warp: 0, asteroid: 0, sos: 0 };
                    this.closeReport();
                    this.showMsg("ЖУРНАЛ ОЧИЩЕН", "#fff");
                }
            }
        };

// Запуск
        SpaceMission.init();

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ням-Ням Знаний</title>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --dark: #2C3E50;
            --bg-color: #F7F9FC;
            --monster-color: #FF6B6B;
        }

* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

body {
            margin: 0;
            height: 100vh;
            background: var(--bg-color);
            background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
            background-size: 20px 20px;
            font-family: 'Nunito', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
        }

/* --- Header & Progress --- */
        header {
            width: 100%;
            padding: 20px;
            text-align: center;
        }

h1 {
            font-family: 'Fredoka One', cursive;
            color: var(--dark);
            margin: 0 0 15px 0;
            font-size: 1.5rem;
        }

.progress-container {
            width: 80%;
            max-width: 400px;
            height: 20px;
            background: #ddd;
            border-radius: 10px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            border: 3px solid #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

.progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--secondary), #26a69a);
            transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

/* --- The Monster --- */
        .monster-area {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
        }

.monster {
            width: 180px;
            height: 180px;
            background: var(--monster-color);
            border-radius: 50%;
            position: relative;
            transition: transform 0.3s, background-color 0.5s;
            box-shadow: 
                inset -20px -20px 60px rgba(0,0,0,0.2), /* 3D Shadow */
                inset 10px 10px 30px rgba(255,255,255,0.8), /* Highlight */
                0 20px 40px rgba(0,0,0,0.2); /* Drop Shadow */
            
            /* Organic Blob Animation */
            animation: float 6s ease-in-out infinite, blob 8s ease-in-out infinite;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

.face {
            font-size: 4rem;
            position: relative;
            z-index: 2;
            pointer-events: none;
            transition: all 0.2s;
        }

/* --- Controls (The Food) --- */
        .controls {
            width: 100%;
            max-width: 500px;
            padding: 20px 20px 40px 20px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }

.food-btn {
            background: #fff;
            border: none;
            border-radius: 20px;
            padding: 15px 5px;
            font-family: 'Fredoka One', cursive;
            color: var(--dark);
            cursor: pointer;
            box-shadow: 0 8px 0 #e0e0e0, 0 10px 10px rgba(0,0,0,0.1);
            transition: all 0.1s;
            position: relative;
            overflow: hidden;
        }

.food-btn:active {
            transform: translateY(8px);
            box-shadow: 0 0 0 #e0e0e0, inset 0 2px 5px rgba(0,0,0,0.1);
        }

.food-icon { font-size: 2.5rem; display: block; margin-bottom: 5px; }
        .food-label { font-size: 0.9rem; opacity: 0.8; display: block; }

/* --- Animations --- */
        @keyframes float {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-20px) scale(1.02); }
        }

@keyframes blob {
            0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
            50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
            100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
        }

@keyframes eat {
            0% { transform: scale(1); }
            40% { transform: scale(1.3) rotate(-10deg); } /* Open mouth */
            60% { transform: scale(0.9) rotate(5deg); }   /* Chew */
            80% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

.eating { animation: eat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* Flying Food Particle */
        .projectile {
            position: absolute;
            font-size: 2rem;
            pointer-events: none;
            z-index: 10;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        /* Stats Popups */
        .pop-text {
            position: absolute;
            font-family: 'Fredoka One', cursive;
            color: var(--dark);
            font-size: 1.2rem;
            pointer-events: none;
            animation: fadeUp 1s forwards;
            white-space: nowrap;
        }

@keyframes fadeUp {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }

</style>
</head>
<body>

<header>
        <h1>Покорми Знаниями!</h1>
        <div class="progress-container">
            <div class="progress-bar" id="progress"></div>
        </div>
    </header>

<div class="controls">
        <button class="food-btn" onclick="feedMonster('easy', '🍩', '#FF9F43')">
            <span class="food-icon">🍩</span>
            <span class="food-label">Легкотня!</span>
        </button>

<button class="food-btn" onclick="feedMonster('medium', '🥦', '#2ECC71')">
            <span class="food-icon">🥦</span>
            <span class="food-label">Узнал новое</span>
        </button>

<button class="food-btn" onclick="feedMonster('hard', '🍋', '#FDCB6E')">
            <span class="food-icon">🍋</span>
            <span class="food-label">Было трудно</span>
        </button>
    </div>

this.init();
            }

init() {
                // Idle animation switcher
                setInterval(() => {
                    if (!this.monsterEl.classList.contains('eating')) {
                        this.faceEl.textContent = this.getRandom(this.faces.idle);
                    }
                }, 3000);
            }

getRandom(arr) {
                return arr[Math.floor(Math.random() * arr.length)];
            }

feed(type, emoji, color) {
                if (this.satiety >= this.maxSatiety) {
                    alert("Я наелся знаниями! Спасибо! 🎉");
                    return; // Prevent overfeeding
                }

// 1. Projectile Animation
                this.spawnProjectile(emoji);

// 2. Monster Reaction (Delayed slightly to match projectile hit)
                setTimeout(() => {
                    this.monsterEl.classList.remove('eating');
                    void this.monsterEl.offsetWidth; // Trigger reflow
                    this.monsterEl.classList.add('eating');
                    this.monsterEl.style.backgroundColor = color;

// Change Face based on food
                    if (type === 'hard') this.faceEl.textContent = this.getRandom(this.faces.sour);
                    else this.faceEl.textContent = this.getRandom(this.faces.eating);

// Update State
                    this.satiety += 10;
                    this.updateUI();
                    
                    // Spawn text feedback
                    this.spawnFloatingText(type);
                    
                }, 300);

// 3. Return to idle color/face after munching
                setTimeout(() => {
                    this.monsterEl.style.backgroundColor = 'var(--monster-color)';
                }, 1000);
            }

spawnProjectile(emoji) {
                // Find clicked button position (using event usually, but simplified here)
                // For simplicity, we spawn from bottom center
                const flyItem = document.createElement('div');
                flyItem.classList.add('projectile');
                flyItem.textContent = emoji;
                
                // Start position (bottom of screen)
                flyItem.style.left = '50%';
                flyItem.style.bottom = '150px';
                
                document.body.appendChild(flyItem);

// Animate to monster center
                requestAnimationFrame(() => {
                    const monsterRect = this.monsterEl.getBoundingClientRect();
                    const endY = window.innerHeight - monsterRect.bottom + (monsterRect.height / 2);
                    
                    flyItem.style.transform = `translate(-50%, -${window.innerHeight - 300}px) scale(0.5)`;
                    flyItem.style.opacity = '0';
                });

// Cleanup
                setTimeout(() => flyItem.remove(), 500);
            }

spawnFloatingText(type) {
                const text = document.createElement('div');
                text.classList.add('pop-text');
                
                const msgs = {
                    easy: ["Вкусно!", "Ням!", "Изи!"],
                    medium: ["Полезно!", "Витамины!", "Сила!"],
                    hard: ["Ой кисло!", "Ух ты!", "Мощно!"]
                };
                
                text.textContent = this.getRandom(msgs[type]);
                
                // Random position around monster
                const rect = this.monsterEl.getBoundingClientRect();
                const randomX = (Math.random() * 100) - 50;
                
                text.style.left = (rect.left + rect.width/2 + randomX) + 'px';
                text.style.top = (rect.top) + 'px';
                
                document.body.appendChild(text);
                setTimeout(() => text.remove(), 1000);
            }

updateUI() {
                // Progress Bar
                this.progressEl.style.width = `${this.satiety}%`;
                
                // Grow Monster slightly
                const baseScale = 1 + (this.satiety / 200); // Max 1.5x size
                this.monsterEl.style.setProperty('transform', `scale(${baseScale})`); // Note: CSS animation overrides this, handled via composition if needed, but for simplicity we rely on eating class override
            }
        }

// Initialize Game
        const game = new MonsterGame();

// Global function for HTML buttons
        function feedMonster(type, emoji, color) {
            game.feed(type, emoji, color);
        }

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лестница Успеха / Табыс сатысы / Ladder of Success</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-1: #e53935;
            --color-2: #fb8c00;
            --color-3: #7cb342;
            --color-4: #1e88e5;
        }

* {
            box-sizing: border-box;
            user-select: none;
        }

body {
            margin: 0;
            padding: 15px;
            background-color: #e0f2fe;
            font-family: 'Nunito', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

/* Переключатель языков */
        .lang-switch-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, 0.85);
            padding: 6px 12px;
            border-radius: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            backdrop-filter: blur(5px);
        }

.lang-btn {
            border: none;
            background: transparent;
            padding: 6px 16px;
            font-size: 0.95rem;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            color: #555;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.2s ease;
        }

.lang-btn.active {
            background: #0284c7;
            color: white;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
        }

/* Главный контейнер лестницы */
        .ladder-wrapper {
            position: relative;
            width: 100%;
            max-width: 850px;
            margin: 0 auto;
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
            border-radius: 24px;
            overflow: hidden;
            background: white;
        }

.ladder-bg {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }

/* Интерактивные ступеньки */
        .step-btn {
            position: absolute;
            background: rgba(255, 255, 255, 0.01);
            border: 2px dashed transparent;
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            font-size: clamp(11px, 2.1vw, 21px);
            padding-left: 10px;
            padding-right: 45px; /* Отступ справа, чтобы текст не заходил на звездочку */
            transition: all 0.2s ease;
        }

/* Позиционирование ступенек */
        .step-4 { top: 19.5%; left: 39.5%; width: 42.5%; height: 12.5%; }
        .step-3 { top: 34%; left: 34%; width: 48%; height: 12.5%; }
        .step-2 { top: 49.5%; left: 28.5%; width: 53.5%; height: 12.5%; }
        .step-1 { top: 66%; left: 20.5%; width: 61.5%; height: 15%; }

.step-4:hover, .step-3:hover, .step-2:hover, .step-1:hover {
            border-color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.01);
        }

.step-btn:active { transform: scale(0.98); }

/* Счетчик на звездочке (справа) */
        .star-count {
            position: absolute;
            right: 3.5%;
            top: 50%;
            transform: translateY(-50%);
            font-size: clamp(14px, 2.3vw, 22px);
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 2px #000;
            pointer-events: none;
            line-height: 1;
        }

/* Анимация всплывания +1 */
        .feedback-pop {
            position: absolute;
            font-size: 2.5rem;
            font-weight: 900;
            pointer-events: none;
            opacity: 0;
            text-shadow: 0 3px 8px rgba(0,0,0,0.4);
            animation: floatUp 0.8s ease-out forwards;
            z-index: 10;
        }

@keyframes floatUp {
            0% { transform: translateY(0) scale(0.6); opacity: 1; }
            50% { transform: translateY(-25px) scale(1.2); opacity: 1; }
            100% { transform: translateY(-50px) scale(1); opacity: 0; }
        }

/* Кнопка статистики */
        .stats-trigger-btn {
            margin-top: 20px;
            padding: 12px 35px;
            font-size: 1.1rem;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            background: linear-gradient(45deg, #0284c7, #0369a1);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
            transition: all 0.2s ease;
        }

.stats-trigger-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 22px rgba(2, 132, 199, 0.4);
        }

/* Модальное окно статистики */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            z-index: 100;
            display: none;
            justify-content: center;
            align-items: center;
        }

.stats-card {
            background: white;
            padding: 30px;
            border-radius: 24px;
            width: 90%;
            max-width: 480px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

@keyframes popIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

.stats-title {
            text-align: center;
            font-size: 1.8rem;
            color: #1e293b;
            margin-top: 0;
            margin-bottom: 5px;
        }

.stats-subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 20px;
            font-size: 1rem;
        }

.stat-row { display: flex; align-items: center; margin-bottom: 12px; }

.stat-badge { 
            width: 32px; height: 32px; 
            border-radius: 50%; color: white; 
            display: flex; justify-content: center; align-items: center; 
            font-weight: 900; font-size: 1.1rem; margin-right: 12px; 
            flex-shrink: 0;
        }

.stat-bar-wrapper { 
            flex: 1; height: 14px; 
            background: #f1f5f9; border-radius: 7px; 
            overflow: hidden; margin-right: 12px; 
        }

.stat-bar-fill { height: 100%; width: 0%; transition: width 0.8s ease-out; }
        .stat-count { width: 35px; font-weight: 900; font-size: 1.1rem; color: #334155; text-align: right; }

.bg-4 { background: var(--color-4); }
        .bg-3 { background: var(--color-3); }
        .bg-2 { background: var(--color-2); }
        .bg-1 { background: var(--color-1); }

.modal-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }

.btn-close, .btn-reset {
            padding: 10px 22px; 
            border-radius: 12px; 
            font-weight: bold; 
            cursor: pointer;
            font-family: 'Nunito', sans-serif;
            border: none;
        }

.btn-close { background: #e2e8f0; color: #334155; }
        .btn-reset { background: #ef4444; color: white; }
    </style>
</head>
<body>

<div class="lang-switch-container">
        <button class="lang-btn active" onclick="LadderApp.setLanguage('ru', event)">РУС</button>
        <button class="lang-btn" onclick="LadderApp.setLanguage('kk', event)">ҚАЗ</button>
        <button class="lang-btn" onclick="LadderApp.setLanguage('en', event)">ENG</button>
    </div>

<div class="ladder-wrapper" id="ladder-area">
        <img decoding="async" src="http://class-kz.ru/wp-content/uploads/2026/07/ladder_success.webp" alt="Лестница успеха" class="ladder-bg">

<div class="step-btn step-4" onclick="LadderApp.vote(4, event, 'var(--color-4)')">
            <span id="text-step-4">Я всё понял!</span>
            <span class="star-count" id="star-count-4">0</span>
        </div>
        
        <div class="step-btn step-3" onclick="LadderApp.vote(3, event, 'var(--color-3)')">
            <span id="text-step-3">Почти получилось</span>
            <span class="star-count" id="star-count-3">0</span>
        </div>
        
        <div class="step-btn step-2" onclick="LadderApp.vote(2, event, 'var(--color-2)')">
            <span id="text-step-2">Я начинаю понимать</span>
            <span class="star-count" id="star-count-2">0</span>
        </div>
        
        <div class="step-btn step-1" onclick="LadderApp.vote(1, event, 'var(--color-1)')">
            <span id="text-step-1">Мне нужна помощь</span>
            <span class="star-count" id="star-count-1">0</span>
        </div>
    </div>

<button class="stats-trigger-btn" id="btn-stats" onclick="LadderApp.showStats()">
        📊 Статистика
    </button>

<div class="modal-overlay" id="stats-modal">
        <div class="stats-card">
            <h2 class="stats-title" id="modal-title">Результаты</h2>
            <div class="stats-subtitle" id="total-votes">Всего голосов: 0</div>

<div class="modal-actions">
                <button class="btn-reset" id="btn-reset" onclick="LadderApp.reset()">🔄 Сброс</button>
                <button class="btn-close" id="btn-close" onclick="LadderApp.closeStats()">Закрыть</button>
            </div>
        </div>
    </div>

// Переводы БЕЗ нумерации
            i18n: {
                ru: {
                    steps: {
                        1: "Мне нужна помощь",
                        2: "Я начинаю понимать",
                        3: "Почти получилось",
                        4: "Я всё понял!"
                    },
                    statsBtn: "📊 Статистика",
                    statsTitle: "Результаты",
                    totalVotes: "Всего голосов: ",
                    resetBtn: "🔄 Сброс",
                    closeBtn: "Закрыть",
                    confirmReset: "Вы уверены, что хотите сбросить результаты?"
                },
                kk: {
                    steps: {
                        1: "Маған көмек керек",
                        2: "Мен түсіне бастадым",
                        3: "Мен бәрін түсіндім деп ойладым",
                        4: "Мен бәрін түсіндім!"
                    },
                    statsBtn: "📊 Статистика",
                    statsTitle: "Нәтижелер",
                    totalVotes: "Барлық дауыс: ",
                    resetBtn: "🔄 Тазалау",
                    closeBtn: "Жабу",
                    confirmReset: "Барлық нәтижелерді тазалағыңыз келе ме?"
                },
                en: {
                    steps: {
                        1: "I need help",
                        2: "I'm starting to understand",
                        3: "It's almost done",
                        4: "I got it!"
                    },
                    statsBtn: "📊 Statistics",
                    statsTitle: "Results",
                    totalVotes: "Total votes: ",
                    resetBtn: "🔄 Reset",
                    closeBtn: "Close",
                    confirmReset: "Are you sure you want to reset all results?"
                }
            },

setLanguage: function(lang, e) {
                this.currentLang = lang;
                
                const btns = document.querySelectorAll('.lang-btn');
                btns.forEach(btn => btn.classList.remove('active'));
                if (e && e.target) e.target.classList.add('active');

const t = this.i18n[lang];
                for (let i = 1; i <= 4; i++) {
                    document.getElementById(`text-step-${i}`).innerText = t.steps[i];
                }

document.getElementById('btn-stats').innerText = t.statsBtn;
                document.getElementById('modal-title').innerText = t.statsTitle;
                document.getElementById('btn-reset').innerText = t.resetBtn;
                document.getElementById('btn-close').innerText = t.closeBtn;
            },

vote: function(level, event, color) {
                this.votes[level]++;

// Обновляем количество прямо на звездочке
                document.getElementById(`star-count-${level}`).innerText = this.votes[level];

// Анимация +1 при клике
                const pop = document.createElement('div');
                pop.classList.add('feedback-pop');
                pop.innerText = '+1';
                pop.style.color = color;

const rect = this.wrapper.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;

pop.style.left = (x - 20) + 'px';
                pop.style.top = (y - 20) + 'px';

this.wrapper.appendChild(pop);

setTimeout(() => pop.remove(), 800);
            },

showStats: function() {
                const t = this.i18n[this.currentLang];
                const total = this.votes[1] + this.votes[2] + this.votes[3] + this.votes[4];
                
                document.getElementById('total-votes').innerText = `${t.totalVotes}${total}`;

const max = Math.max(total, 1);

for (let i = 1; i <= 4; i++) {
                    const count = this.votes[i];
                    document.getElementById(`count-${i}`).innerText = count;
                    
                    setTimeout(() => {
                        document.getElementById(`bar-${i}`).style.width = (count / max * 100) + '%';
                    }, 50);
                }

document.getElementById('stats-modal').style.display = 'flex';
            },

closeStats: function() {
                document.getElementById('stats-modal').style.display = 'none';
                for (let i = 1; i <= 4; i++) {
                    document.getElementById(`bar-${i}`).style.width = '0%';
                }
            },

reset: function() {
                const t = this.i18n[this.currentLang];
                if (confirm(t.confirmReset)) {
                    this.votes = { 1: 0, 2: 0, 3: 0, 4: 0 };
                    for (let i = 1; i <= 4; i++) {
                        document.getElementById(`star-count-${i}`).innerText = '0';
                    }
                    this.closeStats();
                }
            }
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Аквариум рефлексии / Рефлексия аквариумы / Reflection Aquarium</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-green: #27ae60;
            --color-yellow: #d35400;
            --color-red: #c0392b;
            --color-blue: #2980b9;
        }

* {
            box-sizing: border-box;
            user-select: none;
        }

/* --- Переключатель языков --- */
        .lang-switch-container {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.9);
            padding: 6px 14px;
            border-radius: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            backdrop-filter: blur(5px);
            z-index: 10;
        }

.lang-btn.active {
            background: #0284c7;
            color: white;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
        }

/* --- Контейнер аквариума --- */
        .aquarium-wrapper {
            position: relative;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            box-shadow: 0 15px 35px rgba(0, 100, 180, 0.2);
            border-radius: 24px;
            overflow: hidden;
            background: white;
        }

.aquarium-bg {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }

/* --- Интерактивные облачки (Speech Bubbles) --- */
        .bubble-text {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            font-size: clamp(10px, 1.8vw, 18px);
            line-height: 1.15;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }

/* Точные координаты надписей под выноски на изображении */
        .bubble-green {
            top: 14%;
            left: 35%;
            width: 18.5%;
            height: 21%;
            color: var(--color-green);
        }

.bubble-yellow {
            top: 15%;
            left: 51.5%;
            width: 18.5%;
            height: 21%;
            color: var(--color-yellow);
        }

.bubble-red {
            top: 44%;
            left: 34%;
            width: 18.5%;
            height: 21%;
            color: var(--color-red);
        }

.bubble-blue {
            top: 45%;
            left: 51%;
            width: 18.5%;
            height: 21%;
            color: var(--color-blue);
        }

/* Кликабельные зоны для самих рыбок */
        .fish-clickable {
            position: absolute;
            cursor: pointer;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }

.fish-green { top: 20%; left: 17%; width: 16%; height: 25%; }
        .fish-yellow { top: 22%; left: 63%; width: 16%; height: 25%; }
        .fish-red { top: 51%; left: 19%; width: 16%; height: 25%; }
        .fish-blue { top: 52%; left: 64%; width: 16%; height: 25%; }

.bubble-text:hover, .fish-clickable:hover {
            transform: scale(1.06);
        }

.bubble-text:active, .fish-clickable:active {
            transform: scale(0.95);
        }

/* --- Бейджи-счетчики на рыбках --- */
        .fish-badge {
            position: absolute;
            width: clamp(24px, 3.2vw, 36px);
            height: clamp(24px, 3.2vw, 36px);
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: clamp(12px, 1.8vw, 18px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: 2px solid white;
            pointer-events: none;
            z-index: 5;
        }

.badge-green { top: 16%; left: 18%; background: var(--color-green); }
        .badge-yellow { top: 18%; left: 76%; background: var(--color-yellow); }
        .badge-red { top: 48%; left: 19%; background: var(--color-red); }
        .badge-blue { top: 49%; left: 77%; background: var(--color-blue); }

/* Всплывающая анимация +1 */
        .feedback-pop {
            position: absolute;
            font-size: 2.5rem;
            font-weight: 900;
            pointer-events: none;
            opacity: 0;
            text-shadow: 0 3px 8px rgba(0,0,0,0.4);
            animation: floatUp 0.8s ease-out forwards;
            z-index: 20;
        }

/* --- Кнопка статистики --- */
        .stats-trigger-btn {
            margin-top: 18px;
            padding: 12px 35px;
            font-size: 1.1rem;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            background: linear-gradient(45deg, #0284c7, #0369a1);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
            transition: all 0.2s ease;
        }

.stats-trigger-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 22px rgba(2, 132, 199, 0.4);
        }

/* --- Модальное окно статистики --- */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            z-index: 100;
            display: none;
            justify-content: center;
            align-items: center;
        }

.stats-card {
            background: white;
            padding: 30px;
            border-radius: 24px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

@keyframes popIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

.stats-title {
            text-align: center;
            font-size: 1.8rem;
            color: #1e293b;
            margin-top: 0;
            margin-bottom: 5px;
        }

.stats-subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 20px;
            font-size: 1rem;
        }

.stat-row { 
            display: flex; 
            align-items: center; 
            margin-bottom: 12px; 
        }

.stat-bar-wrapper { 
            flex: 1; height: 14px; 
            background: #f1f5f9; border-radius: 7px; 
            overflow: hidden; margin-right: 12px; 
        }

.stat-bar-fill { height: 100%; width: 0%; transition: width 0.8s ease-out; }
        .stat-count { width: 35px; font-weight: 900; font-size: 1.1rem; color: #334155; text-align: right; }

.bg-green { background: var(--color-green); }
        .bg-yellow { background: var(--color-yellow); }
        .bg-red { background: var(--color-red); }
        .bg-blue { background: var(--color-blue); }

.modal-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }

.btn-close { background: #e2e8f0; color: #334155; }
        .btn-reset { background: #ef4444; color: white; }
    </style>
</head>
<body>

<div class="lang-switch-container">
        <button class="lang-btn active" onclick="AquariumApp.setLanguage('ru', event)">РУС</button>
        <button class="lang-btn" onclick="AquariumApp.setLanguage('kk', event)">ҚАЗ</button>
        <button class="lang-btn" onclick="AquariumApp.setLanguage('en', event)">ENG</button>
    </div>

<div class="aquarium-wrapper" id="aquarium-area">
        <img decoding="async" src="http://class-kz.ru/wp-content/uploads/2026/07/aquarium.webp" alt="Аквариум рефлексии" class="aquarium-bg">

<div class="bubble-text bubble-green" id="text-green" onclick="AquariumApp.vote('green', event)">
            Всё понятно
        </div>
        
        <div class="bubble-text bubble-yellow" id="text-yellow" onclick="AquariumApp.vote('yellow', event)">
            Есть трудности
        </div>
        
        <div class="bubble-text bubble-red" id="text-red" onclick="AquariumApp.vote('red', event)">
            Нужна помощь
        </div>
        
        <div class="bubble-text bubble-blue" id="text-blue" onclick="AquariumApp.vote('blue', event)">
            Хочу знать больше
        </div>

<div class="fish-clickable fish-green" onclick="AquariumApp.vote('green', event)"></div>
        <div class="fish-clickable fish-yellow" onclick="AquariumApp.vote('yellow', event)"></div>
        <div class="fish-clickable fish-red" onclick="AquariumApp.vote('red', event)"></div>
        <div class="fish-clickable fish-blue" onclick="AquariumApp.vote('blue', event)"></div>

<div class="fish-badge badge-green" id="badge-green">0</div>
        <div class="fish-badge badge-yellow" id="badge-yellow">0</div>
        <div class="fish-badge badge-red" id="badge-red">0</div>
        <div class="fish-badge badge-blue" id="badge-blue">0</div>
    </div>

<button class="stats-trigger-btn" id="btn-stats" onclick="AquariumApp.showStats()">
        📊 Статистика
    </button>

<div class="modal-actions">
                <button class="btn-reset" id="btn-reset" onclick="AquariumApp.reset()">🔄 Сброс</button>
                <button class="btn-close" id="btn-close" onclick="AquariumApp.closeStats()">Закрыть</button>
            </div>
        </div>
    </div>

i18n: {
                ru: {
                    green: "Всё понятно",
                    yellow: "Есть трудности",
                    red: "Нужна помощь",
                    blue: "Хочу знать больше",
                    statsBtn: "📊 Статистика",
                    statsTitle: "Результаты",
                    totalVotes: "Всего голосов: ",
                    resetBtn: "🔄 Сброс",
                    closeBtn: "Закрыть",
                    confirmReset: "Вы уверены, что хотите сбросить результаты?"
                },
                kk: {
                    green: "Бәрін түсіндім",
                    yellow: "Қиындықтар бар",
                    red: "Көмек керек",
                    blue: "Көбірек білгім келеді",
                    statsBtn: "📊 Статистика",
                    statsTitle: "Нәтижелер",
                    totalVotes: "Барлық дауыс: ",
                    resetBtn: "🔄 Тазалау",
                    closeBtn: "Жабу",
                    confirmReset: "Барлық нәтижелерді тазалағыңыз келе ме?"
                },
                en: {
                    green: "Everything is clear",
                    yellow: "There are difficulties",
                    red: "I need help",
                    blue: "I want to know more",
                    statsBtn: "📊 Statistics",
                    statsTitle: "Results",
                    totalVotes: "Total votes: ",
                    resetBtn: "🔄 Reset",
                    closeBtn: "Close",
                    confirmReset: "Are you sure you want to reset all results?"
                }
            },

const t = this.i18n[lang];
                document.getElementById('text-green').innerText = t.green;
                document.getElementById('text-yellow').innerText = t.yellow;
                document.getElementById('text-red').innerText = t.red;
                document.getElementById('text-blue').innerText = t.blue;

vote: function(fish, event) {
                this.votes[fish]++;

// Обновляем счетчик на рыбке
                document.getElementById(`badge-${fish}`).innerText = this.votes[fish];

// Анимация всплывающего +1
                const pop = document.createElement('div');
                pop.classList.add('feedback-pop');
                pop.innerText = '+1';
                pop.style.color = this.colors[fish];

const rect = this.wrapper.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;

pop.style.left = (x - 20) + 'px';
                pop.style.top = (y - 20) + 'px';

this.wrapper.appendChild(pop);

setTimeout(() => pop.remove(), 800);
            },

showStats: function() {
                const t = this.i18n[this.currentLang];
                const total = this.votes.green + this.votes.yellow + this.votes.red + this.votes.blue;
                
                document.getElementById('total-votes').innerText = `${t.totalVotes}${total}`;

const max = Math.max(total, 1);

['green', 'yellow', 'red', 'blue'].forEach(fish => {
                    const count = this.votes[fish];
                    document.getElementById(`count-${fish}`).innerText = count;
                    
                    setTimeout(() => {
                        document.getElementById(`bar-${fish}`).style.width = (count / max * 100) + '%';
                    }, 50);
                });

document.getElementById('stats-modal').style.display = 'flex';
            },

closeStats: function() {
                document.getElementById('stats-modal').style.display = 'none';
                ['green', 'yellow', 'red', 'blue'].forEach(fish => {
                    document.getElementById(`bar-${fish}`).style.width = '0%';
                });
            },

reset: function() {
                const t = this.i18n[this.currentLang];
                if (confirm(t.confirmReset)) {
                    this.votes = { green: 0, yellow: 0, red: 0, blue: 0 };
                    ['green', 'yellow', 'red', 'blue'].forEach(fish => {
                        document.getElementById(`badge-${fish}`).innerText = '0';
                    });
                    this.closeStats();
                }
            }
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рефлексия Смайлики / Эмоциялар / Emoji Reflection</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-green: #4caf50;
            --color-yellow: #ffb300;
            --color-red: #f44336;
            --color-blue: #2196f3;
        }

* {
            box-sizing: border-box;
            user-select: none;
        }

body {
            margin: 0;
            padding: 15px;
            background-color: #f0f4f8;
            font-family: 'Nunito', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

/* --- Переключатель языков --- */
        .lang-switch-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 6px 14px;
            border-radius: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            backdrop-filter: blur(5px);
            z-index: 10;
        }

.lang-btn.active {
            background: #0284c7;
            color: white;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
        }

/* --- Контейнер поля --- */
        .smile-wrapper {
            position: relative;
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
            border-radius: 24px;
            overflow: hidden;
            background: white;
            padding-bottom: 5px;
        }

.smile-bg {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }

/* --- Интерактивные кликабельные зоны (Смайлики) --- */
        .smile-clickable {
            position: absolute;
            cursor: pointer;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }

.smile-green  { top: 2%; left: 2%;  width: 22%; height: 75%; }
        .smile-yellow { top: 2%; left: 26%; width: 22%; height: 75%; }
        .smile-red    { top: 2%; left: 50%; width: 22%; height: 75%; }
        .smile-blue   { top: 2%; left: 74%; width: 22%; height: 75%; }

.smile-clickable:hover { transform: scale(1.04); }
        .smile-clickable:active { transform: scale(0.96); }

/* --- Плашки с текстом под смайликами --- */
        .label-box {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            font-size: clamp(10px, 1.6vw, 17px);
            line-height: 1.15;
            padding: 8px 6px;
            cursor: pointer;
            border-radius: 14px;
            color: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.18);
            transition: transform 0.2s ease, filter 0.2s ease;
            z-index: 5;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

.label-green {
            top: 79%; left: 2%; width: 22%;
            background: linear-gradient(135deg, #4caf50, #2e7d32);
        }

.label-yellow {
            top: 79%; left: 26%; width: 22%;
            background: linear-gradient(135deg, #ffb300, #f57f17);
        }

.label-red {
            top: 79%; left: 50%; width: 22%;
            background: linear-gradient(135deg, #f44336, #c62828);
        }

.label-blue {
            top: 79%; left: 74%; width: 22%;
            background: linear-gradient(135deg, #2196f3, #1565c0);
        }

.label-box:hover {
            transform: translateY(-2px) scale(1.03);
            filter: brightness(1.08);
        }

.label-box:active {
            transform: scale(0.96);
        }

/* --- Бейджи-счетчики голосов --- */
        .badge {
            position: absolute;
            width: clamp(24px, 3.2vw, 36px);
            height: clamp(24px, 3.2vw, 36px);
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: clamp(12px, 1.8vw, 18px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: 2px solid white;
            pointer-events: none;
            z-index: 6;
        }

.badge-green  { top: 67%; left: 18%; background: #2e7d32; }
        .badge-yellow { top: 67%; left: 42%; background: #f57f17; }
        .badge-red    { top: 67%; left: 66%; background: #c62828; }
        .badge-blue   { top: 67%; left: 90%; background: #1565c0; }

/* --- Кнопка статистики --- */
        .stats-trigger-btn {
            margin-top: 20px;
            padding: 12px 35px;
            font-size: 1.1rem;
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            background: linear-gradient(45deg, #0284c7, #0369a1);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
            transition: all 0.2s ease;
        }

.stats-trigger-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 22px rgba(2, 132, 199, 0.4);
        }

@keyframes popIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

.stats-title {
            text-align: center;
            font-size: 1.8rem;
            color: #1e293b;
            margin-top: 0;
            margin-bottom: 5px;
        }

.stats-subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 20px;
            font-size: 1rem;
        }

.stat-row { 
            display: flex; 
            align-items: center; 
            margin-bottom: 12px; 
        }

.stat-bar-wrapper { 
            flex: 1; height: 14px; 
            background: #f1f5f9; border-radius: 7px; 
            overflow: hidden; margin-right: 12px; 
        }

.stat-bar-fill { height: 100%; width: 0%; transition: width 0.8s ease-out; }
        .stat-count { width: 35px; font-weight: 900; font-size: 1.1rem; color: #334155; text-align: right; }

.bg-green  { background: var(--color-green); }
        .bg-yellow { background: var(--color-yellow); }
        .bg-red    { background: var(--color-red); }
        .bg-blue   { background: var(--color-blue); }

.modal-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }

.btn-close { background: #e2e8f0; color: #334155; }
        .btn-reset { background: #ef4444; color: white; }
    </style>
</head>
<body>

<div class="lang-switch-container">
        <button class="lang-btn active" onclick="SmileApp.setLanguage('ru', event)">РУС</button>
        <button class="lang-btn" onclick="SmileApp.setLanguage('kk', event)">ҚАЗ</button>
        <button class="lang-btn" onclick="SmileApp.setLanguage('en', event)">ENG</button>
    </div>

<div class="smile-wrapper" id="smile-area">
        <img decoding="async" src="http://class-kz.ru/wp-content/uploads/2026/07/smile.webp" alt="Смайлики рефлексии" class="smile-bg">

<div class="smile-clickable smile-green" onclick="SmileApp.vote('green', event)"></div>
        <div class="smile-clickable smile-yellow" onclick="SmileApp.vote('yellow', event)"></div>
        <div class="smile-clickable smile-red" onclick="SmileApp.vote('red', event)"></div>
        <div class="smile-clickable smile-blue" onclick="SmileApp.vote('blue', event)"></div>

<div class="label-box label-green" id="text-green" onclick="SmileApp.vote('green', event)">
            Я справился!
        </div>
        <div class="label-box label-yellow" id="text-yellow" onclick="SmileApp.vote('yellow', event)">
            Мне было трудно
        </div>
        <div class="label-box label-red" id="text-red" onclick="SmileApp.vote('red', event)">
            Нужна помощь
        </div>
        <div class="label-box label-blue" id="text-blue" onclick="SmileApp.vote('blue', event)">
            Хочу узнать больше
        </div>

<div class="badge badge-green" id="badge-green">0</div>
        <div class="badge badge-yellow" id="badge-yellow">0</div>
        <div class="badge badge-red" id="badge-red">0</div>
        <div class="badge badge-blue" id="badge-blue">0</div>
    </div>

<button class="stats-trigger-btn" id="btn-stats" onclick="SmileApp.showStats()">
        📊 Статистика
    </button>

<div class="modal-actions">
                <button class="btn-reset" id="btn-reset" onclick="SmileApp.reset()">🔄 Сброс</button>
                <button class="btn-close" id="btn-close" onclick="SmileApp.closeStats()">Закрыть</button>
            </div>
        </div>
    </div>

i18n: {
                ru: {
                    green: "Я справился!",
                    yellow: "Мне было трудно",
                    red: "Нужна помощь",
                    blue: "Хочу узнать больше",
                    statsBtn: "📊 Статистика",
                    statsTitle: "Результаты",
                    totalVotes: "Всего голосов: ",
                    resetBtn: "🔄 Сброс",
                    closeBtn: "Закрыть",
                    confirmReset: "Вы уверены, что хотите сбросить результаты?"
                },
                kk: {
                    green: "Мен орындадым!",
                    yellow: "Маған қиын болды",
                    red: "Көмек керек",
                    blue: "Көбірек білгім келеді",
                    statsBtn: "📊 Статистика",
                    statsTitle: "Нәтижелер",
                    totalVotes: "Барлық дауыс: ",
                    resetBtn: "🔄 Тазалау",
                    closeBtn: "Жабу",
                    confirmReset: "Барлық нәтижелерді тазалағыңыз келе ме?"
                },
                en: {
                    green: "I managed!",
                    yellow: "It was hard",
                    red: "I need help",
                    blue: "Want to learn more",
                    statsBtn: "📊 Statistics",
                    statsTitle: "Results",
                    totalVotes: "Total votes: ",
                    resetBtn: "🔄 Reset",
                    closeBtn: "Close",
                    confirmReset: "Are you sure you want to reset all results?"
                }
            },

vote: function(color, event) {
                this.votes[color]++;

// Обновление цифры на бейдже
                document.getElementById(`badge-${color}`).innerText = this.votes[color];

// Всплывающая анимация +1
                const pop = document.createElement('div');
                pop.classList.add('feedback-pop');
                pop.innerText = '+1';
                pop.style.color = this.colors[color];

const rect = this.wrapper.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;

pop.style.left = (x - 20) + 'px';
                pop.style.top = (y - 20) + 'px';

this.wrapper.appendChild(pop);

setTimeout(() => pop.remove(), 800);
            },

const max = Math.max(total, 1);

['green', 'yellow', 'red', 'blue'].forEach(color => {
                    const count = this.votes[color];
                    document.getElementById(`count-${color}`).innerText = count;
                    
                    setTimeout(() => {
                        document.getElementById(`bar-${color}`).style.width = (count / max * 100) + '%';
                    }, 50);
                });

document.getElementById('stats-modal').style.display = 'flex';
            },

closeStats: function() {
                document.getElementById('stats-modal').style.display = 'none';
                ['green', 'yellow', 'red', 'blue'].forEach(color => {
                    document.getElementById(`bar-${color}`).style.width = '0%';
                });
            },

reset: function() {
                const t = this.i18n[this.currentLang];
                if (confirm(t.confirmReset)) {
                    this.votes = { green: 0, yellow: 0, red: 0, blue: 0 };
                    ['green', 'yellow', 'red', 'blue'].forEach(color => {
                        document.getElementById(`badge-${color}`).innerText = '0';
                    });
                    this.closeStats();
                }
            }
        };
    </script>
</body>
</html>

Подведение итогов урока — важный этап обучения, который помогает школьникам осознать собственный прогресс, а педагогу — моментально оценить степень усвоения учебного материала. Обновленный модуль онлайн рефлексии на портале Class-KZ предлагает 15 готовых цифровых инструментов для проведения обратной связи прямо во время занятия.

Все инструменты полностью бесплатны, работают непосредственно в браузере и не требуют регистрации от учителя или учеников. Приложение оптимизировано для работы на интерактивных досках, сенсорных экранах, проекторах, а также на смартфонах и планшетах.

🚀 Быстрый запуск на интерактивной доске

Для проведения экспресс-оценки в конце или середине урока:

Откройте интерактивную панель меню рефлексии на этой странице.
Нажмите кнопку «⛶ На весь экран» в верхнем углу для разворачивания приложения на всю область доски.
Выберите подходящий по смыслу и возрасту учащихся визуальный инструмент.
Предложите ученикам по очереди подходить к доске или голосовать с мест.
Для расширения рабочей области рекомендуется использовать кнопки клавиатуры компьютера Ctrl +

🎓 Полный каталог онлайн-инструментов рефлексии

В обновленной версии собраны методические техники, адаптированные под форматы геймификации и интерактивного взаимодействия:

1. Цифровые метрики и экспресс-голосования

📶 Вай-фай Урока: Имитация теста скорости (Speedtest). Ученики выбирают уровень сигнала от 1 до 5 (от «Сигнал потерян» до «5G — летает!»). В конце система вычисляет среднюю «скорость подключения» класса и время задержки (Ping).
🔋 Заряд Класса: Визуализация уровня энергии. Каждый голос наполняет жидкий индикатор батареи класса, показывая итоговый процент усвоения темы («Села батарейка», «Заряд есть», «Полный заряд!»).
🚦 Светофор: Классическая методика самооценки, дополненная динамическими эффектами и яркими праздничными вспышками при нажатии на зеленый, желтый или красный сектор.

2. Игровые и сюжетные интерактивные модули

🚀 Космическая Миссия: Игровой HUD-интерфейс с трехмерным звездным полем и режимом гиперпрыжка. Учащиеся выбирают между успешным «Гиперпрыжком», «Маневром» или сигналом «SOS», получая финальный отчет и комментарий от бортового ИИ.
👾 Тамагочи («Ням-Ням Знаний»): Интерактивный персонаж, которого класс «кормит» знаниями. Доступен выбор пончиков (легкая тема), брокколи (полезные знания) и лимонов (сложный материал) с живой анимацией эмоций персонажа.
🌊💎 Океан Сокровищ: Ученики отправляют объекты на разную глубину: рыбок на поверхность (все легко), кальмаров на глубину (есть вопросы) или сокровища на самое дно (было трудно, но нашли суть).
🎈 Воздушные Шары: Визуализация полета знаний. Запуск разноцветных шаров на разную высоту экрана в зависимости от уверенности учеников в изученном материале.

3. Аналитические и методические сервисы

🎯 Мишень: Графический модуль, разделенный на 4 сектора («Было интересно», «Активно работал», «Узнал новое», «Всё понятно»). Чем ближе клик к центру, тем выше балл. Готовый результат можно сохранить в виде картинки PNG.
🎒 Рюкзак (Сортировка знаний): Удобный сервис перетаскивания (Drag-and-Drop). Позволяет сортировать термины и понятия по трем категориям: «Рюкзак» (беру с собой), «Мясорубка» (нужно переработать) и «Корзина» (оказалось лишним).
☁️ Облако Тегов: Инструмент для коллективного формирования главных понятий урока. Повторяющиеся слова автоматически увеличиваются в размере.
🌳 Волшебный Сад: Выращивание «Дерева впечатлений», на крону которого ученики прикрепляют зеленые листы (новые знания), цветы (впечатления) и плоды (практическая польза).
📸 Инста-Сторис: Формат популярной социальной сети с плавающими эмодзи-реакциями (🔥, 😍, 🤯, 😴) и панелью аналитики ответов для учителя.

4. Мультиязычные модули (Казахский / Русский / Английский)

Инструменты этой серии оснащены встроенным переключателем языков интерфейса (ҚАЗ / РУС / ENG), что делает их идеальными для полиязычного образования и школ Казахстана:

📊 Лестница успеха: Оценка ступени освоения материала с наглядным подбором формулировок и мгновенным подсчетом рейтинга.
🐠 Аквариум: Выбор рыбок с речевыми облачками выносок для фиксации индивидуальных результатов.
😊 Смайлики: Наглядная эмоциональная шкала самочувствия и понятности темы.

🛠 Преимущества использования на Class-KZ

Характеристика	Описание для педагога
Мгновенный старт	Все 15 сервисов объединены в одном удобном меню и открываются в 1 клик.
Без установки	Работает прямо в браузере (Chrome, Яндекс, Edge, Safari) на любом устройстве.
Интерактивность	Адаптировано под касания пальцем или стилусом на интерактивных досках.
Аналитика в реальном времени	Встроенные модальные окна со статистикой выводят итоговые диаграммы класса.
Языковая адаптация	Поддержка казахского, русского и английского языков в ключевых модулях.

💡 Методические рекомендации учителю

Рефлексия деятельности (5-7 классы): Используйте модуль «Рюкзак» или «Мишень» для подведения итогов практической или лабораторной работы.
Рефлексия содержания учебного материала (8-11 классы): Применяйте «Вай-фай Урока», «Заряд Класса» или «Космическую Миссию» для быстрой диагностики понимания сложных тем.
Эмоциональная рефлексия (1-4 классы): Идеально подойдут «Смайлики», «Волшебный Сад» и «Тамагочи».
Языковые уроки и Билингвальное обучение: Задействуйте «Лестницу успеха» или «Аквариум» с мгновенным переключением на казахский или английский язык.

Как использовать этот конструктор на уроке?

На интерактивной доске: Откройте страницу в браузере. Нажмите кнопку «На весь экран» в верхнем меню приложения. Вызывайте учеников к доске для взаимодействия.
На обычном проекторе: Вы можете управлять мышкой, опрашивая класс устно («Кто за то, чтобы положить этот термин в Корзину?») и перемещая элементы самостоятельно.

Требуется ли регистрация? Нет, все приемы рефлексии работают локально в вашем браузере. Рекомендуется использовать полноэкранный режим. Мы не сохраняем данные учеников на сервере, что гарантирует полную конфиденциальность.

Можно ли скачать результаты? В инструменте «Мишень» предусмотрена кнопка сохранения результата в виде изображения. В остальных инструментах (например, Облако слов) вы можете сделать скриншот экрана.

Интерактивная рефлексия онлайн: Набор онлайн приемов для учителя

Интерактивная рефлексия на уроке онлайн: 15 готовых цифровых инструментов для современного учителя

🎓 Меню рефлексии

🚀 Быстрый запуск на интерактивной доске

🎓 Полный каталог онлайн-инструментов рефлексии

1. Цифровые метрики и экспресс-голосования

2. Игровые и сюжетные интерактивные модули

3. Аналитические и методические сервисы

4. Мультиязычные модули (Казахский / Русский / Английский)

🛠 Преимущества использования на Class-KZ

💡 Методические рекомендации учителю

Как использовать этот конструктор на уроке?

Также рекомендуется:

Генератор-конструктор суммативных работ (СОР, СОЧ)

Генератор-конструктор рабочих листов учащихся онлайн

Генератор-конструктор классных часов

Краткосрочное планирование (КСП)

Суммативное оценивание учащихся (СОР, СОЧ)