<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Установка сертификата — AIS Map</title>
    <link rel="icon" href="/svg/icon.svg" type="image/svg+xml"/>
    <link rel="shortcut icon" href="/svg/icon.svg"/>
    <style>
        * { box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
               max-width: 620px; margin: 0 auto; padding: 20px; background: #f5f5f5; color: #333; }
        h1 { font-size: 22px; text-align: center; }
        .card { background: #fff; border-radius: 8px; padding: 18px; margin: 14px 0;
                box-shadow: 0 1px 4px rgba(0,0,0,.12); }
        .card h2 { font-size: 16px; margin: 0 0 10px; }
        .card ol { padding-left: 20px; margin: 0; }
        .card li { margin: 6px 0; line-height: 1.5; }
        .btn { display: block; width: 100%; text-align: center; padding: 14px;
               background: #2196F3; color: #fff; text-decoration: none;
               border-radius: 6px; font-size: 16px; font-weight: 600; margin: 10px 0; }
        .btn:active { background: #1976D2; }
        .note { font-size: 13px; color: #777; text-align: center; margin-top: 16px; }
        .back { display: block; text-align: center; margin-top: 18px; color: #2196F3; }
    </style>
</head>
<body>
    <h1>Установка сертификата AIS Map</h1>

    <a class="btn" href="/ca.crt">Скачать сертификат (.crt)</a>

    <div class="card">
        <h2>Android</h2>
        <ol>
            <li>Нажмите кнопку выше — скачается файл</li>
            <li>Откройте скачанный файл (или: Настройки → Безопасность → Установка сертификатов)</li>
            <li>Выберите <b>«CA-сертификат»</b> / <b>«Центр сертификации»</b></li>
            <li>Подтвердите установку</li>
            <li>Готово — перезагрузите страницу карты</li>
        </ol>
    </div>

    <div class="card">
        <h2>iPhone / iPad</h2>
        <ol>
            <li>Нажмите кнопку выше — откроется «Профиль загружен»</li>
            <li>Настройки → Основные → <b>Профили</b> → «AIS Map Root CA» → Установить</li>
            <li>Настройки → Основные → <b>Об этом устройстве</b> → Доверие сертификатам → включите «AIS Map Root CA»</li>
            <li>Готово — перезагрузите страницу карты</li>
        </ol>
    </div>

    <div class="card">
        <h2>Firefox (ПК / Android)</h2>
        <ol>
            <li>Откройте <a href="/ca.pem">/ca.pem</a></li>
            <li>Firefox предложит импортировать — отметьте <b>«Доверять для идентификации сайтов»</b></li>
            <li>Нажмите ОК</li>
        </ol>
    </div>

    <div class="card">
        <h2>Chrome / Edge (ПК)</h2>
        <ol>
            <li>Скачайте <a href="/ca.crt">/ca.crt</a></li>
            <li>Настройки → Конфиденциальность и безопасность → Безопасность → Управление сертификатами</li>
            <li>Вкладка <b>«Доверенные корневые центры»</b> → Импорт → выберите файл</li>
        </ol>
    </div>

    <p class="note">После установки предупреждение о безопасности больше не появится.<br>
    Сертификат действителен 10 лет и работает только в вашей локальной сети.</p>

    <a class="back" href="/">← Вернуться к карте</a>
</body>
</html>
