index.html - master - lenaz21/CIN

index.html
1 093 строки46 KB
lenaz21
Create: index.html
20 июл 2026, 16:04
20 июл 2026, 16:04171d00f
<!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', 'Roboto', system-ui, -apple-system, sans-serif;
            background: #d4e4f0;
            background-image: 
                radial-gradient(ellipse at 20% 50%, #b8d4e8 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, #b8d4e8 0%, transparent 60%),
                linear-gradient(180deg, #d4e4f0 0%, #b8cce0 100%);
            padding: 30px 20px;
            color: #1e2a3a;
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .container {
            max-width: 1300px;
            width: 100%;
            margin: 0 auto;
        }

        /* ---------- Заголовок ---------- */
        .header {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            background: linear-gradient(135deg, #e8f0f8 0%, #d0e0ee 100%);
            border-radius: 20px 20px 0 0;
            padding: 24px 32px;
            box-shadow: 
                0 -4px 20px rgba(0,0,0,0.06),
                inset 0 1px 0 rgba(255,255,255,0.8);
            border-bottom: 4px solid #9ab8d0;
            position: relative;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 40px;
            right: 40px;
            height: 12px;
            background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 100%);
            border-radius: 0 0 50% 50%;
        }

        .header-icon {
            font-size: 38px;
            line-height: 1;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
            color: #1a3a5a;
            letter-spacing: 1px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }

        /* ---------- Главное правило ---------- */
        .golden-rule {
            background: linear-gradient(135deg, #f0f6fc 0%, #dce8f4 100%);
            border: 2px solid #9ab8d0;
            border-radius: 16px;
            padding: 16px 24px;
            margin: 24px 0 30px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            box-shadow: 
                0 4px 16px rgba(80, 140, 180, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.7);
            position: relative;
        }

        .golden-rule::before {
            content: '📌';
            font-size: 24px;
            margin-right: 4px;
        }

        .golden-rule .text {
            font-size: 16px;
            font-weight: 600;
            color: #1a3a5a;
            flex: 1;
        }

        .golden-rule .text strong {
            color: #1a5a8a;
            background: rgba(255,255,255,0.5);
            padding: 2px 12px;
            border-radius: 20px;
            font-weight: 700;
        }

        .golden-rule .badge-rule {
            background: #4a7a9a;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 16px;
            border-radius: 40px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(74, 122, 154, 0.3);
        }

        /* ============================================================ */
        /*   ТРИ ПАРАЛЛЕЛЬНЫХ БЛОКА                                     */
        /* ============================================================ */

        .album-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin-bottom: 30px;
        }

        .album-page {
            position: relative;
            background: #eef4fa;
            border-radius: 16px 16px 20px 20px;
            padding: 22px 20px 20px;
            box-shadow: 
                0 8px 32px rgba(60, 80, 100, 0.12),
                0 2px 0 0 #c8d8e8,
                inset 0 1px 0 rgba(255,255,255,0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #c8d8e8;
            display: flex;
            flex-direction: column;
        }

        .album-page:hover {
            transform: translateY(-6px) rotate(0.5deg);
            box-shadow: 
                0 16px 48px rgba(60, 80, 100, 0.18),
                0 2px 0 0 #b8c8d8,
                inset 0 1px 0 rgba(255,255,255,0.8);
        }

        .album-page::after {
            content: '';
            position: absolute;
            top: 8px;
            right: -6px;
            bottom: 8px;
            width: 12px;
            background: linear-gradient(270deg, rgba(60,80,100,0.08) 0%, transparent 100%);
            border-radius: 0 8px 8px 0;
            pointer-events: none;
        }

        .album-page::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(225deg, #c8d8e8 0%, #eef4fa 60%);
            border-radius: 0 16px 0 16px;
            opacity: 0.5;
            pointer-events: none;
        }

        .page-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 2px dashed #c8d8e8;
        }

        .page-header .emoji {
            font-size: 26px;
            line-height: 1;
        }

        .page-header h2 {
            font-size: 18px;
            font-weight: 700;
            color: #1a3a5a;
            letter-spacing: -0.2px;
        }

        .page-header .tag {
            background: #c8d8e8;
            color: #1a3a5a;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 12px;
            border-radius: 20px;
            margin-left: auto;
            white-space: nowrap;
        }

        /* ============================================================ */
        /*   ОГЛАВЛЕНИЕ                                                 */
        /* ============================================================ */

        .toc {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
        }

        .toc-item {
            border-bottom: 1px dashed #c8d8e8;
            padding: 6px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.15s ease;
            border-radius: 6px;
            padding-left: 8px;
            user-select: none;
        }

        .toc-item:hover {
            background: rgba(180, 210, 230, 0.2);
        }

        .toc-item .toc-num {
            font-size: 13px;
            font-weight: 700;
            color: #4a7a9a;
            width: 22px;
            text-align: center;
            flex-shrink: 0;
        }

        .toc-item .toc-label {
            font-size: 13.5px;
            font-weight: 600;
            color: #1a3a5a;
            flex: 1;
        }

        .toc-item .toc-arrow {
            font-size: 12px;
            color: #7a9ab0;
            transition: transform 0.25s ease;
        }

        .toc-item.active .toc-arrow {
            transform: rotate(90deg);
        }

        /* Подразделы (вложенные) */
        .toc-sub {
            list-style: none;
            padding: 0;
            margin: 0;
            padding-left: 32px;
        }

        .toc-sub .toc-item {
            border-bottom: none;
            padding: 4px 0;
            font-size: 12.5px;
        }

        .toc-sub .toc-item .toc-num {
            font-size: 12px;
            width: 18px;
            color: #7a9ab0;
        }

        .toc-sub .toc-item .toc-label {
            font-size: 12.5px;
            font-weight: 500;
            color: #2a4a6a;
        }

        /* ============================================================ */
        /*   БЛОК "ВАЖНО" ВНИЗУ (как в 2-11)                           */
        /* ============================================================ */

        .important-tip {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(200, 225, 245, 0.5);
            border-radius: 8px;
            font-size: 12px;
            color: #1a3a5a;
            border: 1px dashed #7a9ab0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .important-tip .tip-icon {
            font-size: 18px;
            flex-shrink: 0;
            line-height: 1.3;
        }

        .important-tip .tip-text {
            font-size: 12.5px;
            line-height: 1.5;
        }

        .important-tip .tip-text strong {
            color: #1a4a6a;
        }

        /* ============================================================ */
        /*   МОДАЛЬНОЕ ОКНО (POP-UP)                                    */
        /* ============================================================ */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(30, 50, 70, 0.6);
            backdrop-filter: blur(6px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.open {
            display: flex;
        }

        .modal-window {
            background: #eef4fa;
            border-radius: 24px;
            padding: 32px 36px;
            max-width: 520px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 24px 64px rgba(30, 50, 70, 0.3);
            border: 1px solid #b8cfe0;
            position: relative;
            animation: slideUp 0.35s ease;
            transform-origin: center;
        }

        .modal-window .modal-icon {
            font-size: 36px;
            text-align: center;
            margin-bottom: 6px;
        }

        .modal-window h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1a3a5a;
            text-align: center;
            margin-bottom: 12px;
        }

        .modal-window .modal-body {
            font-size: 15px;
            color: #1a2a3a;
            line-height: 1.7;
        }

        .modal-window .modal-body ul {
            margin: 6px 0 6px 18px;
            padding-left: 4px;
        }

        .modal-window .modal-body li {
            margin-bottom: 4px;
        }

        .modal-window .modal-body li strong {
            color: #1a4a6a;
        }

        .modal-window .modal-body .warning-text {
            font-size: 13px;
            color: #4a6a3a;
            margin-top: 8px;
            padding: 8px 12px;
            background: rgba(235, 248, 240, 0.8);
            border-radius: 8px;
            border-left: 3px solid #2a8a5e;
        }

        .modal-window .modal-body .danger-text {
            font-size: 13px;
            color: #6a4a3a;
            margin-top: 8px;
            padding: 8px 12px;
            background: rgba(253, 238, 235, 0.8);
            border-radius: 8px;
            border-left: 3px solid #c0392b;
        }

        .modal-window .close-btn {
            position: absolute;
            top: 12px;
            right: 18px;
            font-size: 28px;
            color: #7a9ab0;
            cursor: pointer;
            transition: color 0.2s;
            background: none;
            border: none;
            line-height: 1;
        }

        .modal-window .close-btn:hover {
            color: #3a5a7a;
        }

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

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

        /* ---------- Подвал альбома ---------- */
        .album-footer {
            background: linear-gradient(135deg, #e8f0f8 0%, #d0e0ee 100%);
            border-radius: 0 0 20px 20px;
            padding: 16px 32px;
            text-align: center;
            font-size: 13px;
            color: #4a6a8a;
            border-top: 2px solid #b8c8d8;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }

        .album-footer span {
            font-weight: 600;
            color: #2a5a7a;
        }

        /* ---------- Адаптивность ---------- */
        @media (max-width: 1024px) {
            .album-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        @media (max-width: 700px) {
            body {
                padding: 16px 12px;
            }

            .header {
                padding: 18px 20px;
                flex-direction: column;
                align-items: flex-start;
            }
            .header h1 {
                font-size: 22px;
            }

            .album-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .album-page {
                padding: 18px 14px;
            }

            .golden-rule {
                padding: 14px 16px;
                flex-direction: column;
                align-items: flex-start;
            }
            .golden-rule .text {
                font-size: 14px;
            }

            .page-header h2 {
                font-size: 17px;
            }

            .modal-window {
                padding: 24px 20px;
                max-width: 400px;
            }
            .modal-window h3 {
                font-size: 18px;
            }
            .modal-window .modal-body {
                font-size: 14px;
            }

            .toc-sub {
                padding-left: 24px;
            }

            .important-tip {
                font-size: 11px;
                padding: 8px 12px;
            }
            .important-tip .tip-text {
                font-size: 11.5px;
            }
        }

        @media (max-width: 400px) {
            .header h1 {
                font-size: 18px;
            }
            .toc-item .toc-label {
                font-size: 12.5px;
            }
            .modal-window {
                padding: 20px 16px;
            }
            .modal-window h3 {
                font-size: 16px;
            }
            .modal-window .modal-body {
                font-size: 13px;
            }
            .toc-sub {
                padding-left: 18px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- ======== ОБЛОЖКА АЛЬБОМА (шапка) ======== -->
        <div class="header">
            <span class="header-icon">📖</span>
            <h1>ЦИН</h1>
        </div>

        <!-- ======== ГЛАВНОЕ ПРАВИЛО ======== -->
        <div class="golden-rule">
            <span class="text">
                <strong>Главное правило</strong> — для корректной консультации всегда осуществляйте <strong>проверку статуса заявления на ТПГУ</strong>.
            </span>
            <span class="badge-rule">Важно!</span>
        </div>

        <!-- ======== ТРИ СТРАНИЦЫ АЛЬБОМА ======== -->
        <div class="album-grid">

            <!-- ======================================== -->
            <!-- СТРАНИЦА 1 — ДЕТСКИЙ САД                 -->
            <!-- ======================================== -->
            <div class="album-page">
                <div class="page-header">
                    <span class="emoji">🧸</span>
                    <h2>Дошкольные учреждения</h2>
                    <span class="tag">ДОУ</span>
                </div>

                <ul class="toc">
                    <li class="toc-item" onclick="openModal('modalChanged')">
                        <span class="toc-num">1</span>
                        <span class="toc-label">Что изменилось?</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalRegistration')">
                        <span class="toc-num">2</span>
                        <span class="toc-label">Прописка — обязательное условие</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalApplication')">
                        <span class="toc-num">3</span>
                        <span class="toc-label">Заявление</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalBuilding')">
                        <span class="toc-num">4</span>
                        <span class="toc-label">Многокорпусный комплекс</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalChange')">
                        <span class="toc-num">5</span>
                        <span class="toc-label">Что можно изменить</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalQueue')">
                        <span class="toc-num">6</span>
                        <span class="toc-label">Как двигается очередь</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalRefuse')">
                        <span class="toc-num">7</span>
                        <span class="toc-label">Если не хотите место</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalWhen')">
                        <span class="toc-num">8</span>
                        <span class="toc-label">Когда ждать</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                </ul>
            </div>

            <!-- ======================================== -->
            <!-- СТРАНИЦА 2 — 1-Й КЛАСС                   -->
            <!-- ======================================== -->
            <div class="album-page">
                <div class="page-header">
                    <span class="emoji">📚</span>
                    <h2>1‑й класс</h2>
                    <span class="tag">начальная школа</span>
                </div>

                <ul class="toc">
                    <li class="toc-item" onclick="openModal('modalAutoTransfer')">
                        <span class="toc-num">1</span>
                        <span class="toc-label">Автоматический перевод</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <ul class="toc-sub">
                        <li class="toc-item" onclick="openModal('modalRf')">
                            <span class="toc-num">1.1</span>
                            <span class="toc-label">Для граждан РФ</span>
                            <span class="toc-arrow">▶</span>
                        </li>
                        <li class="toc-item" onclick="openModal('modalForeign')">
                            <span class="toc-num">1.2</span>
                            <span class="toc-label">Для иностранных граждан</span>
                            <span class="toc-arrow">▶</span>
                        </li>
                    </ul>
                    <li class="toc-item" onclick="openModal('modalTest')">
                        <span class="toc-num">2</span>
                        <span class="toc-label">Тестирование по русскому</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalRules')">
                        <span class="toc-num">3</span>
                        <span class="toc-label">Общие правила</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalAddress')">
                        <span class="toc-num">4</span>
                        <span class="toc-label">Если не хотите по адресу</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalAnswer1')">
                        <span class="toc-num">5</span>
                        <span class="toc-label">Срок ответа</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                </ul>

                <!-- БЛОК "ВАЖНО" ВНИЗУ (как в 2-11) -->
                <div class="important-tip">
                    <span class="tip-icon">💡</span>
                    <span class="tip-text">
                        <strong>Важно:</strong> Ребёнок гарантированно будет зачислен по основному списку в первый класс в одну из школ, территориально закреплённых за адресом его регистрации.
                    </span>
                </div>
            </div>

            <!-- ======================================== -->
            <!-- СТРАНИЦА 3 — 2–11 КЛАССЫ                -->
            <!-- ======================================== -->
            <div class="album-page">
                <div class="page-header">
                    <span class="emoji">🏫</span>
                    <h2>2–11 классы</h2>
                    <span class="tag">перевод</span>
                </div>

                <ul class="toc">
                    <li class="toc-item" onclick="openModal('modalTiming')">
                        <span class="toc-num">1</span>
                        <span class="toc-label">Когда подавать заявление</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalSchoolChoice')">
                        <span class="toc-num">2</span>
                        <span class="toc-label">Выбор школы</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalForeign2')">
                        <span class="toc-num">3</span>
                        <span class="toc-label">Для иностранных граждан</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalGrade10')">
                        <span class="toc-num">4</span>
                        <span class="toc-label">Заявление в 10 класс</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                    <li class="toc-item" onclick="openModal('modalAnswer2')">
                        <span class="toc-num">5</span>
                        <span class="toc-label">Срок ответа</span>
                        <span class="toc-arrow">▶</span>
                    </li>
                </ul>

                <div class="important-tip">
                    <span class="tip-icon">💡</span>
                    <span class="tip-text">
                        <strong>Важно:</strong> решение принимает школа. Отказать могут, если <strong>нет свободных мест</strong>.
                    </span>
                </div>
            </div>

        </div>

        <!-- ======== ПОДВАЛ АЛЬБОМА ======== -->
        <div class="album-footer">
            <span>📖</span> Информация на основе материалов ДОНМ / ЦИН &nbsp;·&nbsp; Актуально на 2026 год
        </div>

    </div>

    <!-- ============================================================ -->
    <!--   МОДАЛЬНЫЕ ОКНА (все разделы)                               -->
    <!-- ============================================================ -->

    <!-- Модальное окно 1: Что изменилось? -->
    <div class="modal-overlay" id="modalChanged" onclick="closeModalOutside(event, 'modalChanged')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalChanged')">✕</button>
            <div class="modal-icon">🧸</div>
            <h3>Что изменилось?</h3>
            <div class="modal-body">
                <p>Детский сад — это теперь часть школы (дошкольные группы). Так ребёнку легче перейти в 1‑й класс.</p>
            </div>
        </div>
    </div>

    <!-- Модальное окно 2: Прописка -->
    <div class="modal-overlay" id="modalRegistration" onclick="closeModalOutside(event, 'modalRegistration')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalRegistration')">✕</button>
            <div class="modal-icon">🏠</div>
            <h3>Прописка — обязательное условие</h3>
            <div class="modal-body">
                <p>У ребёнка <strong>обязательно</strong> должна быть <strong>московская прописка</strong> — постоянная <strong>или</strong> временная.</p>
                <p>На момент предоставления места в ДОУ родитель <strong>обязан подтвердить актуальность прописки</strong>, указанной в заявлении. Если прописка изменилась или истекла — место может быть аннулировано.</p>
            </div>
        </div>
    </div>

    <!-- Модальное окно 3: Заявление -->
    <div class="modal-overlay" id="modalApplication" onclick="closeModalOutside(event, 'modalApplication')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalApplication')">✕</button>
            <div class="modal-icon">📋</div>
            <h3>Заявление</h3>
            <div class="modal-body">
                <ul>
                    <li>Можно выбрать <strong>до 3 садов</strong>. Система сама предложит те, что прикреплены к вашему адресу.</li>
                    <li><strong>Группы:</strong>
                        <ul>
                            <li><strong>ГПД</strong> — обычный сад (полный день).</li>
                            <li><strong>ГКП</strong> — группа кратковременного пребывания (от 1,5 до 3 лет, это не ясли!).</li>
                        </ul>
                    </li>
                    <li><strong>Согласие или отказ от места в ГКП не влияет</strong> на очередь в ГПД.</li>
                    <li><strong>Возраст на 1 сентября:</strong> не старше 7 лет.</li>
                    <li><strong>Льготы:</strong> можно указать только <strong>одну</strong>.</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Модальное окно 4: Многокорпусный комплекс -->
    <div class="modal-overlay" id="modalBuilding" onclick="closeModalOutside(event, 'modalBuilding')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalBuilding')">✕</button>
            <div class="modal-icon">🏢</div>
            <h3>Многокорпусный комплекс</h3>
            <div class="modal-body">
                <p>Детский сад состоит из <strong>основного здания</strong> и <strong>дополнительных корпусов</strong>, распределённых по разным адресам.</p>
                <p>Предоставление места по <strong>конкретному адресу</strong> — это компетенция образовательной организации.</p>
            </div>
        </div>
    </div>

    <!-- Модальное окно 5: Что можно изменить -->
    <div class="modal-overlay" id="modalChange" onclick="closeModalOutside(event, 'modalChange')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalChange')">✕</button>
            <div class="modal-icon">✏️</div>
            <h3>Что можно изменить</h3>
            <div class="modal-body">
                <p>После подачи заявления можно изменить:</p>
                <ul>
                    <li>ранее выбранный <strong>год поступления</strong> ребёнка в образовательную организацию;</li>
                    <li><strong>адрес регистрации</strong> ребёнка;</li>
                    <li>сведения о наличии <strong>льгот</strong>;</li>
                    <li>выбранную ранее <strong>образовательную организацию</strong> (или организации).</li>
                </ul>
                <div class="warning-text">
                    ⚠️ <strong>Важно:</strong> внести изменения можно <strong>только после</strong> того, как в личном кабинете появится статус по заявлению: <strong>«Изменение заявления возможно»</strong>.
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно 6: Как двигается очередь -->
    <div class="modal-overlay" id="modalQueue" onclick="closeModalOutside(event, 'modalQueue')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalQueue')">✕</button>
            <div class="modal-icon">📌</div>
            <h3>Как двигается очередь</h3>
            <div class="modal-body">
                <p>Место зависит от: <strong>возраста</strong>, <strong>желаемой даты поступления</strong>, <strong>даты постановки на очередь</strong>, <strong>адреса</strong> и <strong>льгот</strong>.</p>
                <div class="warning-text">
                    ⚠️ <strong>Важно:</strong> нельзя называть конкретное время зачисления ребенка. Оператор должен уточнить статус заявления, рекомендовать проверять очередь, пользоваться статьёй базы знаний <strong>«Когда ребенку предоставят место в детском саду? Когда подойдет очередь?»</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно 7: Если не хотите место -->
    <div class="modal-overlay" id="modalRefuse" onclick="closeModalOutside(event, 'modalRefuse')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalRefuse')">✕</button>
            <div class="modal-icon">🤷</div>
            <h3>Если не хотите место</h3>
            <div class="modal-body">
                <p><strong>Это зависит от того, откуда пришло предложение:</strong></p>
                <ul>
                    <li><strong>📍 Из основного списка</strong> — очередь <strong>сохраняется</strong>, дата зачисления переносится.</li>
                    <li><strong>📍 Из дополнительного списка</strong> — очередь <strong>сохраняется</strong> в выбранное место, дата зачисления переносится.</li>
                    <li><strong>📍 Альтернативное место</strong>:
                        <ul>
                            <li><strong>При согласии</strong> — временное зачисление с <strong>сохранением очереди</strong> в основное ДОУ.</li>
                            <li><strong>При отказе</strong> — очередь <strong>сохраняется</strong> с <strong>переносом даты зачисления</strong>.</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Модальное окно 8: Когда ждать -->
    <div class="modal-overlay" id="modalWhen" onclick="closeModalOutside(event, 'modalWhen')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalWhen')">✕</button>
            <div class="modal-icon">⏳</div>
            <h3>Когда ждать</h3>
            <div class="modal-body">
                <p><strong>Комплектование групп на 1 сентября</strong> — ежегодно <strong>с 1 марта по 31 августа</strong>.</p>
                <p>Зачисление — обычно <strong>во 2‑й половине августа</strong>.</p>
                <div class="warning-text">
                    <strong>Важно:</strong> перераспределение мест происходит в течение <strong>всего года</strong>. Статус — в личном кабинете → <strong>«Заявки и уведомления»</strong>.
                </div>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!--   МОДАЛЬНЫЕ ОКНА ДЛЯ 1-ГО КЛАССА                             -->
    <!-- ============================================================ -->

    <!-- Автоматический перевод -->
    <div class="modal-overlay" id="modalAutoTransfer" onclick="closeModalOutside(event, 'modalAutoTransfer')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalAutoTransfer')">✕</button>
            <div class="modal-icon">🔄</div>
            <h3>Автоматический перевод</h3>
            <div class="modal-body">
                <p>Если ребёнок уже ходит в <strong>дошкольную группу этой школы</strong> — возможен <strong>автоматический перевод</strong> в 1‑й класс.</p>
            </div>
        </div>
    </div>

    <!-- 1.1 Для граждан РФ -->
    <div class="modal-overlay" id="modalRf" onclick="closeModalOutside(event, 'modalRf')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalRf')">✕</button>
            <div class="modal-icon">🇷🇺</div>
            <h3>Для граждан РФ</h3>
            <div class="modal-body">
                <p><strong>Согласны</strong> на автоперевод — уведомление на почту, <strong>заявление не нужно</strong>.</p>
                <p><strong>Не согласны</strong> — на <strong>mos.ru до 1 марта</strong> подать заявление.</p>
            </div>
        </div>
    </div>

    <!-- 1.2 Для иностранных граждан (1 класс) -->
    <div class="modal-overlay" id="modalForeign" onclick="closeModalOutside(event, 'modalForeign')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalForeign')">✕</button>
            <div class="modal-icon">🌍</div>
            <h3>Для иностранных граждан</h3>
            <div class="modal-body">
                <p><strong>Согласны</strong> на автоперевод — заявление на <strong>mos.ru с 1 апреля</strong>.</p>
                <p><strong>Не согласны</strong> — заявление на <strong>mos.ru до 1 марта</strong>.</p>
            </div>
        </div>
    </div>

    <!-- 2. Тестирование по русскому -->
    <div class="modal-overlay" id="modalTest" onclick="closeModalOutside(event, 'modalTest')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalTest')">✕</button>
            <div class="modal-icon">📝</div>
            <h3>Тестирование по русскому языку</h3>
            <div class="modal-body">
                <p><strong>Дети иностранных граждан</strong> обязательно проходят тестирование.</p>
                <p><strong>Исключение</strong> — граждане <strong>Белоруссии</strong>.</p>
            </div>
        </div>
    </div>

    <!-- 3. Общие правила (1 класс) -->
    <div class="modal-overlay" id="modalRules" onclick="closeModalOutside(event, 'modalRules')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalRules')">✕</button>
            <div class="modal-icon">📋</div>
            <h3>Общие правила</h3>
            <div class="modal-body">
                <ul>
                    <li><strong>Сроки подачи (не из ДОУ):</strong> с 1 апреля по 5 сентября.</li>
                    <li><strong>Возраст на 1 сентября:</strong> от 6,5 до 8 лет.</li>
                    <li><strong>Выбор школ:</strong> до 3, но <strong>обязательно</strong> одна — по адресу.</li>
                    <li><strong>Льготы</strong> — только если поступаете <strong>не по адресу</strong>.</li>
                    <li><strong>Нельзя</strong> подать заявление «к конкретному учителю» или «в конкретное здание».</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 4. Если не хотите по адресу -->
    <div class="modal-overlay" id="modalAddress" onclick="closeModalOutside(event, 'modalAddress')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalAddress')">✕</button>
            <div class="modal-icon">🏫</div>
            <h3>Если не хотите в школу по адресу регистрации</h3>
            <div class="modal-body">
                <p>После получения <strong>приглашения</strong> сообщить сотруднику школы о своём желании.</p>
                <p>Ждать приглашение в желаемую школу (<strong>июль</strong>, при наличии свободных мест).</p>
            </div>
        </div>
    </div>

    <!-- 5. Срок ответа (1 класс) -->
    <div class="modal-overlay" id="modalAnswer1" onclick="closeModalOutside(event, 'modalAnswer1')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalAnswer1')">✕</button>
            <div class="modal-icon">📬</div>
            <h3>Срок ответа</h3>
            <div class="modal-body">
                <p>В течение <strong>30 дней</strong> после подтверждения адреса регистрации.</p>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!--   МОДАЛЬНЫЕ ОКНА ДЛЯ 2–11 КЛАССОВ                            -->
    <!-- ============================================================ -->

    <!-- 1. Когда подавать заявление -->
    <div class="modal-overlay" id="modalTiming" onclick="closeModalOutside(event, 'modalTiming')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalTiming')">✕</button>
            <div class="modal-icon">📅</div>
            <h3>Когда подавать заявление</h3>
            <div class="modal-body">
                <ul>
                    <li><strong>Перевод в течение учебного года</strong> (1–11 классы) — <strong>с 5 сентября</strong> до конца учебного года.</li>
                    <li><strong>Перевод с 1 сентября</strong> следующего года — <strong>после 1 июня</strong> до начала учебного года.</li>
                    <li><strong>Перевод в 10 класс</strong> (после 9 класса) — <strong>после 15 июня</strong> до начала учебного года.</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 2. Выбор школы -->
    <div class="modal-overlay" id="modalSchoolChoice" onclick="closeModalOutside(event, 'modalSchoolChoice')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalSchoolChoice')">✕</button>
            <div class="modal-icon">🏫</div>
            <h3>Выбор школы</h3>
            <div class="modal-body">
                <p>Только <strong>1 учреждение</strong> независимо от района проживания.</p>
            </div>
        </div>
    </div>

    <!-- 3. Для иностранных граждан (2–11) -->
    <div class="modal-overlay" id="modalForeign2" onclick="closeModalOutside(event, 'modalForeign2')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalForeign2')">✕</button>
            <div class="modal-icon">🌍</div>
            <h3>Для иностранных граждан</h3>
            <div class="modal-body">
                <p><strong>Иностранные граждане</strong> (кроме граждан <strong>Белоруссии</strong>) проходят <strong>тестирование по русскому языку</strong>, если <strong>ранее не учились</strong> в московской школе.</p>
            </div>
        </div>
    </div>

    <!-- 4. Заявление в 10 класс -->
    <div class="modal-overlay" id="modalGrade10" onclick="closeModalOutside(event, 'modalGrade10')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalGrade10')">✕</button>
            <div class="modal-icon">📝</div>
            <h3>Заявление в 10 класс</h3>
            <div class="modal-body">
                <p>Заявление в 10 класс может подать <strong>ребёнок после 14 лет</strong> или его <strong>законный представитель</strong>.</p>
            </div>
        </div>
    </div>

    <!-- 5. Срок ответа (2–11) -->
    <div class="modal-overlay" id="modalAnswer2" onclick="closeModalOutside(event, 'modalAnswer2')">
        <div class="modal-window">
            <button class="close-btn" onclick="closeModal('modalAnswer2')">✕</button>
            <div class="modal-icon">📬</div>
            <h3>Срок ответа</h3>
            <div class="modal-body">
                <p>В течение <strong>5 рабочих дней</strong> после проверки данных.</p>
            </div>
        </div>
    </div>


    <!-- ============================================================ -->
    <!--   СКРИПТЫ                                                     -->
    <!-- ============================================================ -->
    <script>
        // ---------- Открытие модального окна ----------
        function openModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.classList.add('open');
                document.body.style.overflow = 'hidden';
            }
        }

        // ---------- Закрытие модального окна ----------
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.classList.remove('open');
                document.body.style.overflow = '';
            }
        }

        // ---------- Закрытие при клике на фон ----------
        function closeModalOutside(event, modalId) {
            if (event.target === document.getElementById(modalId)) {
                closeModal(modalId);
            }
        }

        // ---------- Закрытие по ESC ----------
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const openModals = document.querySelectorAll('.modal-overlay.open');
                openModals.forEach(function(modal) {
                    modal.classList.remove('open');
                });
                document.body.style.overflow = '';
            }
        });
    </script>

</body>
</html>