project.html - patch - Dasha1777/The_quest1

project.html
559 строк29 KB
Dasha1777
Create: project.html
06 авг 2026, 18:27
06 авг 2026, 18:27a5fb904
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Квест «Измерим мир»</title>
    <style>
        /* ===== ОБЩИЕ СТИЛИ ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            color: #fff;
            padding: 20px;
        }
        .container {
            max-width: 1000px; margin: 0 auto;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 30px; padding: 30px;
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        /* ===== ШАПКА ===== */
        .main-header { text-align: center; padding: 30px 0; border-bottom: 2px solid rgba(255, 255, 255, 0.1); margin-bottom: 30px; }
        .main-header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 5px; color: #fdbb2d; }
        .main-header h2 { font-size: 3.5rem; font-weight: 700; background: linear-gradient(45deg, #fdbb2d, #f7971e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 10px 0; }
        .subtitle { font-size: 1.2rem; color: #aaa; letter-spacing: 2px; }

        /* ===== ПРОБЛЕМНАЯ СИТУАЦИЯ ===== */
        .problem-box {
            background: rgba(255, 50, 50, 0.15); border-left: 5px solid #ff4444;
            padding: 25px; border-radius: 15px; margin-bottom: 30px;
        }
        .problem-box h3 { color: #ff6b6b; font-size: 1.3rem; margin-bottom: 10px; }
        .problem-box p { font-size: 1.1rem; line-height: 1.6; color: #ddd; }
        .status-bar {
            margin-top: 15px; background: #1a1a1a; padding: 12px 20px;
            border-radius: 8px; font-family: 'Courier New', monospace;
            color: #ff4444; border: 1px solid #ff4444;
            display: inline-block; animation: blink 1s infinite;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

        /* ===== ВОПРОС ===== */
        .question-box {
            background: rgba(253, 187, 45, 0.1); border: 2px dashed #fdbb2d;
            padding: 25px; border-radius: 15px; text-align: center; margin-bottom: 30px;
        }
        .question-box h3 { color: #fdbb2d; font-size: 1.2rem; }
        .question-text { font-size: 1.8rem; font-weight: 300; font-style: italic; margin-top: 10px; color: #fff; }

        /* ===== ПРОГРЕСС И ОЦЕНКА ===== */
        .progress-section {
            background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 15px;
            margin-bottom: 30px; text-align: center;
        }
        .progress-text { font-size: 1.1rem; color: #aaa; margin-bottom: 10px; }
        .grade-badge {
            display: inline-block; padding: 8px 16px; border-radius: 50px;
            font-weight: bold; font-size: 1.2rem; margin-left: 10px;
        }
        .grade-2 { background: rgba(220, 53, 69, 0.3); border: 1px solid #dc3545; color: #ff6b6b; }
        .grade-3 { background: rgba(255, 193, 7, 0.3); border: 1px solid #ffc107; color: #ffc107; }
        .grade-4 { background: rgba(52, 138, 189, 0.3); border: 1px solid #3490dc; color: #3490dc; }
        .grade-5 { background: rgba(40, 167, 69, 0.3); border: 1px solid #28a745; color: #28a745; }

        .progress-bar { width: 100%; height: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; margin-top: 10px; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, #fdbb2d, #f7971e); width: 0%; transition: width 0.5s ease; border-radius: 10px; }

        /* ===== НАВИГАЦИЯ ПО КОМНАТАМ ===== */
        .room-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
        .room-tab {
            padding: 12px 20px; border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: #888; cursor: pointer; transition: 0.3s;
            font-size: 0.9rem; font-weight: bold;
        }
        .room-tab:hover { background: rgba(255, 255, 255, 0.1); }
        .room-tab.active { border-color: #fdbb2d; color: #fdbb2d; background: rgba(253, 187, 45, 0.15); }
        .room-tab.completed { border-color: #28a745; color: #28a745; }
        .room-tab.completed::after { content: ' ✅'; }

        /* ===== КОМНАТЫ ===== */
        .room-content { display: none; animation: fadeIn 0.5s ease; }
        .room-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .room-task {
            background: rgba(255, 255, 255, 0.08); padding: 30px;
            border-radius: 20px; margin-bottom: 25px;
        }
        .room-task h3 { color: #fdbb2d; margin-bottom: 15px; font-size: 1.4rem; }
        .room-task p { line-height: 1.8; color: #ddd; }
        .room-task ul { color: #ddd; margin: 15px 0; padding-left: 20px; line-height: 2; }
        .hint-box {
            background: rgba(255, 255, 255, 0.05); border-left: 4px solid #fdbb2d;
            padding: 15px 20px; border-radius: 10px; margin: 15px 0; color: #bbb;
        }

        .input-group { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
        .input-group input {
            flex: 1; min-width: 200px; padding: 14px 20px;
            border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
            background: rgba(255, 255, 255, 0.05); color: #fff;
            font-size: 1.1rem; transition: 0.3s;
        }
        .input-group input:focus { outline: none; border-color: #fdbb2d; }
        .input-group textarea {
            width: 100%; padding: 15px; border-radius: 12px;
            background: rgba(255, 255, 255, 0.05); color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.2);
            font-size: 1rem; font-family: inherit; resize: vertical; min-height: 120px;
        }
        .input-group textarea:focus { outline: none; border-color: #fdbb2d; }

        .btn {
            padding: 14px 30px; border: none; border-radius: 12px;
            font-size: 1.1rem; font-weight: bold; cursor: pointer;
            transition: 0.3s; background: #fdbb2d; color: #1a1a2e;
        }
        .btn:hover { transform: scale(1.05); background: #ffd966; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #34ce57; }
        .btn-secondary { background: rgba(255, 255, 255, 0.1); color: #fff; }
        .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        .result-box { margin: 20px 0; padding: 15px 20px; border-radius: 12px; display: none; }
        .result-box.success { display: block; background: rgba(40, 167, 69, 0.2); border: 2px solid #28a745; color: #90ee90; }
        .result-box.error { display: block; background: rgba(220, 53, 69, 0.2); border: 2px solid #dc3545; color: #ff6b6b; }
        .result-box.info { display: block; background: rgba(253, 187, 45, 0.15); border: 2px solid #fdbb2d; color: #fdbb2d; }

        .objects-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 15px; margin: 20px 0; text-align: center;
        }
        .object-card { background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 10px; }
        .object-card .icon { font-size: 2.5rem; display: block; }
        .object-card .weight { margin-top: 5px; color: #aaa; }

        /* ===== СЕРТИФИКАТ ===== */
        .certificate {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border: 3px solid #fdbb2d; padding: 40px;
            border-radius: 30px; text-align: center;
        }
        .certificate h1 {
            font-size: 3rem; background: linear-gradient(45deg, #fdbb2d, #f7971e);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }
        .seal { font-size: 5rem; margin: 20px 0; }
        .team-name {
            font-size: 2rem; color: #fdbb2d; margin: 20px 0;
            padding: 10px 30px; border: 2px dashed #fdbb2d;
            display: inline-block; background: transparent; border-radius: 15px;
        }
        .team-name input {
            background: transparent; border: none; color: #fdbb2d;
            font-size: 2rem; text-align: center; width: 100%;
            font-family: inherit;
        }
        .team-name input:focus { outline: none; }

        .puzzle-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 10px; max-width: 400px; margin: 20px auto;
        }
        .puzzle-piece {
            background: rgba(255, 255, 255, 0.1); border: 2px solid #555;
            border-radius: 10px; padding: 20px; text-align: center;
            font-size: 2rem; transition: 0.3s;
        }
        .puzzle-piece.done { background: rgba(40, 167, 69, 0.3); border-color: #28a745; }
        .puzzle-piece .label { font-size: 0.7rem; color: #888; margin-top: 5px; display: block; }

        .codex-display {
            background: rgba(255, 255, 255, 0.05); padding: 20px;
            border-radius: 15px; text-align: left; margin: 20px 0;
        }
        .codex-display li { margin: 10px 0; color: #ddd; list-style: none; }
        .codex-display li::before { content: '📜 '; }

        /* ===== АДАПТИВНОСТЬ ===== */
        @media (max-width: 768px) {
            .container { padding: 15px; }
            .main-header h1 { font-size: 1.8rem; }
            .main-header h2 { font-size: 2.2rem; }
            .question-text { font-size: 1.3rem; }
            .room-tabs { gap: 5px; }
            .room-tab { padding: 8px 12px; }
            .room-task { padding: 20px; }
            .puzzle-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 480px) {
            .room-tab { padding: 6px 10px; font-size: 0.8rem; }
            .input-group { flex-direction: column; }
            .input-group input, .input-group textarea { width: 100%; }
            .btn { width: 100%; margin-top: 10px; }
            .puzzle-grid { grid-template-columns: 1fr; }
        }
    </style>

    <script>
        // Состояние прогресса
        let completedRooms = new Set();
        const totalRooms = 6; // 5 комнат с задачами + комната кодекса

        function getGrade(percent) {
            if (percent >= 90) return { grade: 5, class: 'grade-5' };
            if (percent >= 70) return { grade: 4, class: 'grade-4' };
            if (percent >= 50) return { grade: 3, class: 'grade-3' };
            return { grade: 2, class: 'grade-2' };
        }

        function updateProgress() {
            const count = completedRooms.size;
            const percent = (count / totalRooms) * 100;
            const gradeData = getGrade(percent);

            document.getElementById('progressText').textContent = count;
            document.getElementById('progressFill').style.width = percent + '%';
            
            // Обновляем бейдж оценки
            const gradeBadge = document.getElementById('gradeBadge');
            gradeBadge.textContent = gradeData.grade;
            gradeBadge.className = 'grade-badge ' + gradeData.class;

            // Обновляем вкладки
            const tabs = document.querySelectorAll('.room-tab');
            tabs.forEach(tab => {
                const roomIndex = parseInt(tab.getAttribute('data-room'), 10);
                // Комнаты 0–5 считаются за прогресс, сертификат (6) — нет
                if (roomIndex < totalRooms && completedRooms.has(roomIndex)) {
                    tab.classList.add('completed');
                } else {
                    tab.classList.remove('completed');
                }
            });

            // Если все комнаты пройдены — открываем сертификат
            if (count === totalRooms) {
                openRoom(6);
                updatePuzzlePieces();
            }
        }

        function openRoom(index) {
            // Скрываем все комнаты
            document.querySelectorAll('.room-content').forEach(el => {
                el.classList.remove('active');
            });
            // Убираем active у всех вкладок
            document.querySelectorAll('.room-tab').forEach(el => {
                el.classList.remove('active');
            });

            // Показываем нужную
            const room = document.querySelector(`.room-content[data-room="${index}"]`);
            const tab = document.querySelector(`.room-tab[data-room="${index}"]`);

            if (room) room.classList.add('active');
            if (tab) tab.classList.add('active');
        }

        function checkRoom(roomIndex, correctAnswer, tolerance = 0.01) {
            const input = document.getElementById(`answer${roomIndex}`);
            const resultBox = document.getElementById(`result${roomIndex}`);

            if (!input || !resultBox) return;

            let userValueStr = input.value.trim().replace(',', '.');
            const userValue = parseFloat(userValueStr);

            resultBox.className = 'result-box'; // сброс классов

            if (isNaN(userValue)) {
                resultBox.textContent = '❌ Пожалуйста, введите число.';
                resultBox.classList.add('error');
                return;
            }

            if (Math.abs(userValue - correctAnswer) <= tolerance) {
                completedRooms.add(roomIndex - 1); // комнаты в JS нумеруются с 0
                resultBox.textContent = '✅ Верно! Комната пройдена.';
                resultBox.classList.add('success');
                updateProgress();
            } else {
                resultBox.textContent = `❌ Не совсем. Попробуйте ещё раз. (Правильный ответ ≈ ${correctAnswer})`;
                resultBox.classList.add('error');
            }
        }

        function saveCodex() {
            const text = document.getElementById('codexInput').value.trim();
            const display = document.getElementById('codexDisplay');

            if (!text) {
                alert('Пожалуйста, напишите хотя бы один пункт кодекса.');
                return;
            }

            const lines = text.split(/\r?\n/).filter(l => l.trim() !== '');
            if (lines.length < 5) {
                alert('Напишите минимум 5 правил.');
                return;
            }

            display.innerHTML = '';
            lines.slice(0, 5).forEach((line, idx) => {
                const li = document.createElement('li');
                li.textContent = `${idx + 1}. ${line}`;
                display.appendChild(li);
            });

            completedRooms.add(5); // комната 6 (индекс 5) пройдена
            updateProgress();
        }

        function updatePuzzlePieces() {
            const pieces = document.querySelectorAll('.puzzle-piece');
            pieces.forEach(piece => {
                const puzzleIndex = parseInt(piece.getAttribute('data-puzzle'), 10) - 1;
                if (completedRooms.has(puzzleIndex)) {
                    piece.textContent = '✅';
                    piece.classList.add('done');
                }
            });
        }

        function printCertificate() {
            window.print();
        }

        // Инициализация
        document.addEventListener('DOMContentLoaded', () => {
            const tabs = document.querySelectorAll('.room-tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const index = parseInt(tab.getAttribute('data-room'), 10);
                    openRoom(index);
                });
            });

            // Открываем первую комнату по умолчанию, если не открыта другая
            const activeTab = document.querySelector('.room-tab.active');
            if (activeTab) {
                const index = parseInt(activeTab.getAttribute('data-room'), 10);
                openRoom(index);
            } else {
                openRoom(0);
            }

            updateProgress();

            // Автоматически обновляем оценку в сертификате при вводе названия команды
            const teamInput = document.getElementById('teamName');
            if (teamInput) {
                teamInput.addEventListener('input', (e) => {
                    document.getElementById('displayTeamName').textContent = e.target.value || '—';
                });
            }
        });
    </script>
</head>
<body>

<div class="container" id="app">
    <!-- ===== ШАПКА ===== -->
    <header class="main-header">
        <h1>📐 Квест-экспедиция</h1>
        <h2>«ИЗМЕРИМ МИР»</h2>
        <p class="subtitle">5–6 класс | Информатика · Математика · Физика · География · История</p>
    </header>

    <!-- ===== ПРОБЛЕМНАЯ СИТУАЦИЯ ===== -->
    <div class="problem-box">
        <h3>⚠️ ПРОБЛЕМНАЯ СИТУАЦИЯ</h3>
        <p>В Музее древних мер пропали эталонные образцы. Без них люди забудут, как измерять длину, массу, время и температуру. Только <strong>юные метрологи</strong> могут восстановить систему мер!</p>
        <div class="status-bar">STATUS: CRITICAL ERROR // UNITS OFFLINE</div>
    </div>

    <!-- ===== КЛЮЧЕВОЙ ВОПРОС ===== -->
    <div class="question-box">
        <h3>🎯 КЛЮЧЕВОЙ ВОПРОС</h3>
        <p class="question-text">«Что было бы, если бы все единицы измерения исчезли?»</p>
    </div>

    <!-- ===== ПРОГРЕСС И ОЦЕНКА ===== -->
    <div class="progress-section">
        <div class="progress-text">Прогресс: <span id="progressText">0</span> / 6 комнат | Оценка: <span class="grade-badge grade-2" id="gradeBadge">2</span></div>
        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
    </div>

    <!-- ===== ВКЛАДКИ КОМНАТ ===== -->
    <div class="room-tabs" id="roomTabs">
        <button class="room-tab active" data-room="0">📜 Комната 1</button>
        <button class="room-tab" data-room="1">📏 Комната 2</button>
        <button class="room-tab" data-room="2">⚖️ Комната 3</button>
        <button class="room-tab" data-room="3">⏳ Комната 4</button>
        <button class="room-tab" data-room="4">🌡️ Комната 5</button>
        <button class="room-tab" data-room="5">🧠 Комната 6</button>
        <button class="room-tab" data-room="6">🏆 Сертификат</button>
    </div>

    <!-- ===== КОМНАТА 1 ===== -->
    <div class="room-content active" data-room="0">
        <div class="room-task">
            <h3>📜 Комната №1: «Древние меры»</h3>
            <p><strong>Задание:</strong> В древней Руси использовали необычные единицы измерения.</p>
            <ul>
                <li>1 <strong>локоть</strong> ≈ 45 см</li>
                <li>1 <strong>пуд</strong> = 16,38 кг</li>
                <li>1 <strong>верста</strong> = 1,067 км</li>
            </ul>
            <p>❓ <strong>Вопрос:</strong> Сколько килограммов в <strong>3 пудах</strong>?</p>
            <div class="hint-box">💡 Умножьте количество пудов на 16,38.</div>
            <div class="input-group">
                <input type="text" id="answer1" placeholder="Введите число (например, 49.14)">
                <button class="btn" onclick="checkRoom(1, 49.14, 0.01)">✅ Проверить</button>
            </div>
            <div id="result1" class="result-box"></div>
        </div>
    </div>

    <!-- ===== КОМНАТА 2 ===== -->
    <div class="room-content" data-room="1">
        <div class="room-task">
            <h3>📏 Комната №2: «Лаборатория длины»</h3>
            <p><strong>Задание:</strong> Вы нашли древний свиток, где расстояние указано в <strong>саженях</strong>.</p>
            <p><strong>1 сажень = 2,13 м</strong></p>
            <p>📜 <em>«От камня до дуба — 5 саженей»</em></p>
            <p>❓ Переведите это расстояние в <strong>метры</strong> (ответ округлите до десятых).</p>
            <div class="hint-box">💡 Умножьте количество саженей на 2,13.</div>
            <div class="input-group">
                <input type="text" id="answer2" placeholder="Введите число (например, 10.6)">
                <button class="btn" onclick="checkRoom(2, 10.65, 0.05)">✅ Проверить</button>
            </div>
            <div id="result2" class="result-box"></div>
        </div>
    </div>

    <!-- ===== КОМНАТА 3 ===== -->
    <div class="room-content" data-room="2">
        <div class="room-task">
            <h3>⚖️ Комната №3: «Весы времени»</h3>
            <p><strong>Задание:</strong> Найдите общую массу всех объектов в <strong>килограммах</strong>.</p>
            <div class="objects-grid">
                <div class="object-card">
                    <span class="icon">🍎</span>
                    <div>Яблоко — 150 г</div>
                </div>
                <div class="object-card">
                    <span class="icon">📚</span>
                    <div>Книга — 0,8 кг</div>
                </div>
                <div class="object-card">
                    <span class="icon">🐘</span>
                    <div><strong>Слон — 5 т</strong></div>
                </div>
                <div class="object-card">
                    <span class="icon">✏️</span>
                    <div>Карандаш — 8 г</div>
                </div>
            </div>
            <p>❓ <strong>Вопрос:</strong> Сколько килограммов весят все объекты вместе?</p>
            <div class="hint-box">💡 1 т = 1000 кг, 1 кг = 1000 г</div>
            <div class="input-group">
                <input type="text" id="answer3" placeholder="Введите число (например, 5000.958)">
                <button class="btn" onclick="checkRoom(3, 5000.958, 0.01)">✅ Проверить</button>
            </div>
            <div id="result3" class="result-box"></div>
        </div>
    </div>

    <!-- ===== КОМНАТА 4 ===== -->
    <div class="room-content" data-room="3">
        <div class="room-task">
            <h3>⏳ Комната №4: «Хронос»</h3>
            <p><strong>Задание:</strong> Артефакт был создан <strong>в 1850 году</strong>.</p>
            <p>❓ <strong>Вопрос:</strong> Сколько <strong>минут</strong> прошло до 1 января 2026 года?</p>
            <p style="color:#aaa;font-size:0.9rem;">(В каждом году 365 дней)</p>
            <div class="hint-box">💡 Годы → Дни → Часы → Минуты</div>
            <div class="input-group">
                <input type="text" id="answer4" placeholder="Введите число минут">
                <button class="btn" onclick="checkRoom(4, 92505600, 1000)">✅ Проверить</button>
            </div>
            <div id="result4" class="result-box"></div>
        </div>
    </div>

    <!-- ===== КОМНАТА 5 ===== -->
    <div class="room-content" data-room="4">
        <div class="room-task">
            <h3>🌡️ Комната №5: «Термомир»</h3>
            <p><strong>Задание:</strong> Переведите температуру в другую шкалу.</p>
            <div style="background:rgba(255,255,255,0.05);padding:15px;border-radius:10px;margin:15px 0;">
                <p><strong>Формула:</strong> °F = (°C × 9/5) + 32</p>
            </div>
            <p>❓ <strong>Вопрос:</strong> Чему равна <strong>температура кипения воды</strong> (100°C) в <strong>шкале Фаренгейта</strong>?</p>
            <div class="hint-box">💡 Подставьте 100°C в формулу: (100 × 9/5) + 32 = ?</div>
            <div class="input-group">
                <input type="text" id="answer5" placeholder="Введите число (например, 212)">
                <button class="btn" onclick="checkRoom(5, 212, 0.5)">✅ Проверить</button>
            </div>
            <div id="result5" class="result-box"></div>
        </div>
    </div>

    <!-- ===== КОМНАТА 6: КОДЕКС МЕТРОЛОГА ===== -->
    <div class="room-content" data-room="5">
        <div class="room-task">
            <h3>🧠 Комната №6: «Кодекс метролога»</h3>
            <p><strong>Задание:</strong> Составьте собственный кодекс правил измерения — минимум 5 пунктов. Это станет основой вашей «научной школы».</p>
            <div class="codex-display" id="codexDisplay">
                <!-- Сюда будут добавляться пункты кодекса -->
            </div>
            <textarea id="codexInput" rows="5" placeholder="Напишите по одному правилу в каждой строке (минимум 5)"></textarea>
            <div style="margin-top: 15px; text-align: center;">
                <button class="btn btn-success" onclick="saveCodex()">📜 Сохранить кодекс</button>
            </div>
            <div id="result6" class="result-box" style="margin-top: 10px;"></div>
        </div>
    </div>

    <!-- ===== СЕРТИФИКАТ ===== -->
    <div class="room-content" data-room="6">
        <div class="certificate">
            <h1>🏆 СЕРТИФИКАТ МЕТРОЛОГА</h1>
            <p style="color: #ddd; margin-bottom: 20px;">Вы успешно восстановили систему мер и доказали, что без точных измерений мир теряет порядок!</p>
            <div class="seal">🏅</div>
            <div class="team-name">
                <input type="text" id="teamName" placeholder="Название вашей команды">
            </div>
            <p style="color: #aaa; margin: 20px 0;">Команда «<span id="displayTeamName">—</span>»</p>

            <p style="margin: 20px 0; color: #fff; font-weight: bold;">Ваша итоговая оценка: <span class="grade-badge grade-2" id="finalGradeBadge">5</span></p>

            <div class="puzzle-grid">
                <div class="puzzle-piece" data-puzzle="1"><span class="label">Комната 1</span></div>
                <div class="puzzle-piece" data-puzzle="2"><span class="label">Комната 2</span></div>
                <div class="puzzle-piece" data-puzzle="3"><span class="label">Комната 3</span></div>
                <div class="puzzle-piece" data-puzzle="4"><span class="label">Комната 4</span></div>
                <div class="puzzle-piece" data-puzzle="5"><span class="label">Комната 5</span></div>
                <div class="puzzle-piece" data-puzzle="6"><span class="label">Кодекс</span></div>
            </div>

            <p style="margin: 20px 0; color: #ddd;">Собранные фрагменты знаний:</p>
            <button class="btn btn-secondary" onclick="printCertificate()">🖨️ Распечатать сертификат</button>
        </div>
    </div>
</div> <!-- .container -->
</body>
</html>