
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <!-- Фиксация масштаба, чтобы страница не приближалась/отдалялась -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Настройка</title>

    <!-- Подключаем Telegram WebApp JS -->
    <script src="https://telegram.org/js/telegram-web-app.js"></script>

    <style>
        /* Сбрасываем отступы и растягиваем на весь экран */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: "Helvetica Neue", Arial, sans-serif;
            overflow: auto;
            box-sizing: border-box;
        }
        * {
            box-sizing: inherit;
        }

        /* Плашка информации о подписке (теперь внутри #firstPage) */
        .subscription-panel {
            width: 100%;
            text-align: left;
            padding: 16px;
            background: linear-gradient(135deg, #777777, #3332327a);
            color: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            margin-bottom: 24px;
            border-radius: 12px;
        }
        .subscription-panel p {
            margin: 0;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        .subscription-panel strong {
            font-weight: bold;
        }

        /* Основной контейнер, который центрирует всё содержимое */
        .main-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
            padding: 24px;
        }

        /* Общий класс для заголовков */
        .vpn-setup-title {
            font-weight: 700;
            font-size: 28px;
            margin-bottom: 16px;
        }

        /* Общие тексты */
        p {
            margin: 0;
            margin-bottom: 16px;
            line-height: 1.4;
        }

        /* Цвета */
        .dim-text {
            color: rgba(255, 255, 255, 0.7);
        }
        .highlight-blue {
            color: rgb(50, 149, 255);
        }
        .highlight-green {
            color: rgb(40, 167, 70);
        }

        /* Стикеры / видео */
        .sticker {
            margin: 16px auto;
            width: 150px;
            pointer-events: none;
            border-radius: 10px;
            overflow: hidden;
        }

        /* Универсальный стиль для кнопок (без finish-setup) */
        button, a.apk-icon,
        .tab-link,
        .modal-close,
        .back-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            padding: 12px 24px;
            margin: 8px auto;
            border: none;
            border-radius: 12px;
            opacity: 0.95;
            transition: all 0.2s ease-in-out;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            color: #fff;
        }
        button:hover,
        a.apk-icon:hover,
        .tab-link:hover,
        .modal-close:hover,
        .back-button:hover {
            opacity: 1;
        }

        /* Зелёная кнопка "Завершить настройку" (и её вариации для iOS, Windows и т.д.) */
        .finish-setup,
        .finish-setup-ios,
        .finish-setup-linux,
        .finish-setup-macos,
        .finish-setup-windows {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            padding: 12px 24px;
            margin: 8px auto;
            border: none;
            border-radius: 12px;
            opacity: 0.95;
            transition: all 0.2s ease-in-out;
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.7), rgba(40, 167, 69, 0.4)) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            color: #fff;
        }
        .finish-setup:hover,
        .finish-setup-ios:hover,
        .finish-setup-linux:hover,
        .finish-setup-macos:hover,
        .finish-setup-windows:hover {
            opacity: 1;
        }

        .apk-icon {
            width: auto;
            background: linear-gradient(135deg, rgba(5, 248, 62, 0.438), rgba(41, 133, 61, 0.564)) !important;
        }

        /* Стили отдельных кнопок по цвету */
        .btn-blue {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.4)) !important;
        }
        .btn-gray {
            background: linear-gradient(135deg, rgba(108, 117, 125, 0.5), rgba(108, 117, 125, 0.3)) !important;
        }
        .btn-green {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.7), rgba(40, 167, 69, 0.4)) !important;
        }

        /* Общее выравнивание для контейнеров с кнопками */
        .device-options {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 24px;
        }

        /* Если блоки скрыты */
        .hidden-block {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
            min-height: 100vh;
        }

        /* Стилистика для установки (Android, iOS...) */
        .install-app,
        .install-app-ios,
        .install-app-linux,
        .install-app-macos,
        .install-app-windows {
            font-size: 16px;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3), rgba(0, 123, 255, 0.15));
            color: rgba(0, 123, 255, 1);
            width: 65%;
        }

        /* Блоки кнопок для Android */
        .android-app-block {
            display: flex;
            flex-direction: row;
        }

        .android-app-block .install-app {
            margin-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .android-app-block .apk-icon {
            border-left: 1px rgba(0, 123, 255, 1) solid;
            margin-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        /* Модалка (инструкции) */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #313131f7;
            padding: 20px;
            text-align: center;
            border-radius: 14px;
            width: 80%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .modal-content video,
        .modal-content img,
        .modal-content iframe {
            margin-bottom: 15px;
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* Страница ошибки */
        .error-page {
            display: none;
            min-height: 100vh;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }
        .error-page img {
            width: 150px;
            margin-bottom: 20px;
            border-radius: 10px;
        }
        .error-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .error-text {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

        /* iOS вкладки */
        .ios-app-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 16px;
            flex-direction: column;
        }
        .tab-link {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.2), rgba(0, 123, 255, 0.1)) !important;
            color: rgba(0, 123, 255, 1);
            font-size: 15px;
            margin: 0 4px;
            padding: 10px 18px;
        }
        .tab-link:first-of-type {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .tab-link:not(:first-of-type):not(:last-of-type) {
            border-radius: 0;
        }
        .tab-link:last-of-type {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .tab-link:not(:first-of-type) {
            border-top: 1px rgba(0, 123, 255, 1) solid;
        }
        .tab-link.current {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.4)) !important;
            color: #fff;
        }
        .ios-app-content {
            display: flex;
            justify-content: center;
        }
        .tab-content {
            display: none;
            flex-direction: column;
            align-items: center;
        }
        .tab-content.current {
            display: flex;
        }
    </style>
</head>
<body>

    <div class="main-content">
        <!-- Стартовая страница -->
        <div id="firstPage">
            <!-- БЛОК ПОДПИСКИ -->
            <div class="flex mb-8 bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-3xl p-8 dark:text-white text-black flex-col sm:flex-row space-y-10 sm:space-y-0 sm:divide-x sm:rtl:divide-x-reverse sm:divide-blue-600/50">
                <div class="basis-1/3 space-y-5 flex flex-col items-center py-3 sm:ltr:pr-9 sm:rtl:pl-9" x-data>
                    <div x-text="calculatePercentage(dataUsed, dataLimit) + '%'" :class="getChartColor(calculatePercentage(dataUsed, dataLimit))" class="radial-progress font-black text-2xl" id="progress__bar" style="--size:9rem; --thickness: 1.2rem;"></div>
                    <span class="inline-block dark:text-white text-black font-semibold text-lg">{{ user.username }}</span>
                    <span class="px-4 py-2 rounded-full inline-block shadow-md shadow-green-900 font-bold text-gray-200" x-data="{status: 'active'}" x-text="[status == 'active' ? ('active') : status == 'limited' ? $t('limited') : status == 'expired' ? $t('expired') : $t('disabled')]" :class="[status == 'active' ? 'bg-green-500' : status == 'limited' ? 'bg-red-600' : status == 'expired' ? 'bg-orange-600' : 'bg-gray-600']"></span>
                </div>
                <div x-data="{ usedTraffic: {{ user.used_traffic }}, dataLimit: {{ user.data_limit }} }" class="basis-2/3 flex flex-row items-center sm:ltr:pl-9 sm:rtl:pr-9">
                    <div class="data-usage w-full">
                        <p>
                            <strong>Потребление трафика:</strong>
                            {{ user.used_traffic | bytesformat }}
                            /
                            {% if not user.data_limit %}
                                ∞
                            {% else %}
                                {{ user.data_limit | bytesformat }}
                            {% endif %}
                            
                        </p>
                        <p>
                            {% if not user.expire %}
                            <strong>Осталось дней:</strong> ∞
                            {% else %}
                                {% set remaining_days = ((user.expire - now().timestamp()) // (24 * 3600)) %}
                                {% if remaining_days >= 0 %}
                                    <strong>Осталось дней:</strong> {{ remaining_days | int if (remaining_days | int) > -1 else 0 }}
                                {% else %}
                                    <strong>Подписка истекла</strong>
                                {% endif %}
                            {% endif %}
                        </p>
                        <div class="dark:text-white text-black mt-3 text-sm text-center" x-text="resetInterval == 'year' ? $t('resetIntervalYear') : resetInterval == 'month' ? $t('resetIntervalMonth') : resetInterval == 'week' ? $t('resetIntervalWeek') : resetInterval == 'day' ? $t('resetIntervalDay') : ''"></div>
                        <div class="dark:text-white text-black mt-4 text-center">
                            <span class="font-bold" x-text="$t('expirationDate')"></span><br />
                            <span dir="ltr" x-data="{expireDate: ''}" x-init="Alpine.data( 'expireDate', expireDate = expireDateVar )" x-text="expireDate"></span>
                        </div>
                        <div class="dark:text-white text-black mt-5 text-center">
                            <span class="font-bold" x-text="$t('remainingDays')"></span><br />
                        </div>
                    </div>
                </div>
            </div>

            <img class="sticker" preload="auto" src="https://static.rorosin.ru/start.webp" type="image/webp">
            <p style="font-size: 24px; font-weight: 600;">На каком устройстве <br>нужно настроить VPN?</p>
            <p class="dim-text">Выберите своё устройство <br>из списка ниже</p>

            <div class="device-options">
                <button class="btn-blue" id="deviceButtonPhone"></button>
                <button class="btn-gray" id="deviceButtonTV">Телевизор</button>
            </div>
        </div>

        <!-- Страница с сообщением "Скоро будет доступно" (если нужно) -->
        <div id="errorPage" class="error-page">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/err.webp" type="image/webp">
            <p class="error-title">Ошибка!</p>
            <p class="error-text">Функция скоро будет доступна</p>
            <button class="back-button" id="backToFirstPage">Вернуться</button>
        </div>

        <!-- Модальное окно -->
        <div id="instructionModal" class="modal">
            <div class="modal-content">
                <p style="color: white; font-size: 18px; font-weight: bold; margin-bottom: 20px;">
                    Вам необходимо ознакомиться с видео-инструкцией
                </p>
                <div id="modalMedia"></div>
                <button class="modal-close" id="modalCloseButton">Закрыть</button>
            </div>
        </div>

        <!-- Android (и ТВ) -->
        <div class="android-options hidden-block" id="androidOptions">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/tf.webp" type="image/webp">
            <p class="vpn-setup-title">Давайте <br>настроим VPN</p>
            <p class="dim-text">
                Чтобы подключить VPN, <br>
                <span class="highlight-blue">выберите и установите приложение</span>, а затем нажмите <br /><span class="highlight-green">"Завершить настройку"</span>.
            </p>
            <div class="android-app-block" id="hiddify">
                <button class="install-app" id="installAndroidHiddify">Установить Hiddify (Android)</button>
                <a href="https://github.com/hiddify/hiddify-app/releases/latest/download/hiddify-android-universal.apk" class="apk-icon btn-blue" target="_blank" rel="noopener noreferrer">.apk</a>
            </div>
            <div class="android-app-block" id="vpn4tv">
                <button class="install-app" id="installVPN4TV">Установить VPN4TV (Android TV)</button>
                <a href="https://vpn4tv.com/download/vpn4tv.apk" class="apk-icon btn-blue" target="_blank" rel="noopener noreferrer">.apk</a>
            </div>
            <a href="#" class="finish-setup" id="androidFinishSetup" target="_blank" rel="noopener noreferrer">Завершить настройку</a>
        </div>

        <!-- iOS -->
        <div class="ios-options hidden-block" id="iosOptions">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/tf.webp" type="image/webp">
            <p class="vpn-setup-title">Давайте <br>настроим VPN</p>
            <p class="dim-text">
                Чтобы подключить VPN, <br>
                <span class="highlight-blue">выберите и установите приложение</span>, а затем нажмите <br /><span class="highlight-green">"Завершить настройку"</span>.
            </p>

            <div class="ios-app-tabs">
                <button class="tab-link current" data-tab="hiddify">Hiddify (рекомендуется)</button>
                <button class="tab-link" data-tab="v2raytun">v2RayTun</button>
                <button class="tab-link" data-tab="shadowrocket">Shadowrocket (250р)</button>
            </div>

            <div class="ios-app-content">
                <!-- Shadowrocket вкладка -->
                <div id="shadowrocketTab" class="tab-content">
                    <button class="install-app-ios" id="installShadowrocket">1. Установить Shadowrocket</button>
                    <a
                        href="shadowrocket://config/add/https://dignezzz.github.io/ru_direct.conf"
                        class="finish-setup-ios"
                        id="addRouting"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        2. Добавить роутинг
                    </a>
                    <a href="#" class="finish-setup-ios" id="iosFinishSetup-Shadowrocket" target="_blank" rel="noopener noreferrer">
                        3. Завершить настройку
                    </a>
                </div>
                <!-- v2RayTun вкладка -->
                <div id="v2raytunTab" class="tab-content">
                    <button class="install-app-ios" id="installv2RayTunIOS">Установить v2RayTun</button>
                    <a href="#" class="finish-setup-ios" id="iosFinishSetup-v2RayTun" target="_blank" rel="noopener noreferrer">
                        Завершить настройку
                    </a>
                </div>
                <!-- Hiddify вкладка -->
                <div id="hiddifyTab" class="tab-content current">
                    <button class="install-app-ios" id="installHiddifyIOS">Установить Hiddify</button>
                    <a href="#" class="finish-setup-ios" id="iosFinishSetup-Hiddify" target="_blank" rel="noopener noreferrer">
                        Завершить настройку
                    </a>
                </div>
            </div>
        </div>

        <!-- Windows -->
        <div class="windows-options hidden-block" id="windowsOptions">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/pc.webp" type="image/webp">
            <p class="vpn-setup-title">Давайте <br>настроим VPN</p>
            <p class="dim-text">
                Чтобы подключить VPN, <br>
                <span class="highlight-blue">установите приложение</span>, а затем <br>
                нажмите <span class="highlight-green">"Завершить настройку"</span>.
            </p>
            <button class="install-app-windows" id="showModalWindows">Установить приложение</button>
            <a href="#" class="finish-setup-windows" id="windowsFinishSetup" target="_blank" rel="noopener noreferrer">Завершить настройку</a>
        </div>

        <!-- Linux -->
        <div class="linux-options hidden-block" id="linuxOptions">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/pc.webp" type="image/webp">
            <p class="vpn-setup-title">Давайте <br>настроим VPN</p>
            <p class="dim-text">
                Чтобы подключить VPN, <br>
                <span class="highlight-blue">установите приложение</span>, а затем <br>
                нажмите <span class="highlight-green">"Завершить настройку"</span>.
            </p>
            <button class="install-app-linux" id="showModalLinux">Установить приложение</button>
            <a href="#" class="finish-setup-linux" id="linuxFinishSetup" target="_blank" rel="noopener noreferrer">Завершить настройку</a>
        </div>

        <!-- MacOS -->
        <div class="macos-options hidden-block" id="macosOptions">
            <img class="sticker" preload="auto" src="https://static.rorosin.ru/pc.webp" type="image/webp">
            <p class="vpn-setup-title">Давайте <br>настроим VPN</p>
            <p class="dim-text">
                Чтобы подключить VPN, <br>
                <span class="highlight-blue">установите приложение</span>, а затем <br>
                нажмите <span class="highlight-green">"Завершить настройку"</span>.
            </p>
            <button class="install-app-macos" id="showModalMacOS">Установить приложение</button>
            <a href="#" class="finish-setup-macos" id="macosFinishSetup" target="_blank" rel="noopener noreferrer">Завершить настройку</a>
        </div>
    </div>

    <script src="https://static.rorosin.ru/util.js"></script>
    <script>
        // После загрузки сообщаем Telegram WebApp, что готовы, и просим развернуть
        document.addEventListener("DOMContentLoaded", function() {
            if (window.Telegram && window.Telegram.WebApp) {
                Telegram.WebApp.ready();
                Telegram.WebApp.expand();
            }
        });

        const firstPage = document.getElementById('firstPage');
        const errorPage = document.getElementById('errorPage');

        const deviceButtonPhone = document.getElementById("deviceButtonPhone");
        const deviceButtonTV = document.getElementById("deviceButtonTV");
        const backToFirstPage = document.getElementById("backToFirstPage");

        const androidOptions = document.getElementById("androidOptions");
        const iosOptions = document.getElementById("iosOptions");
        const windowsOptions = document.getElementById("windowsOptions");
        const macosOptions = document.getElementById("macosOptions");
        const linuxOptions = document.getElementById("linuxOptions");

        const modal = document.getElementById("instructionModal");
        const modalMedia = document.getElementById("modalMedia");
        const closeModalButton = document.getElementById("modalCloseButton");

        // Линки для магазинов и приложений
        const links = {
            AndroidHiddify: "https://play.google.com/store/apps/details?id=app.hiddify.com",
            AndroidVPN4TV: "https://play.google.com/store/apps/details?id=com.vpn4tv.hiddify",
            iOSv2RayTun: "https://apps.apple.com/us/app/v2raytun/id6476628951",
            iOSShadowrocket: "https://apps.apple.com/us/app/shadowrocket/id932747118",
            iOSHiddify: "https://apps.apple.com/us/app/hiddify-proxy-vpn/id6596777532/",
            WindowsHiddify: "https://github.com/hiddify/hiddify-app/releases/latest/download/Hiddify-Windows-Setup-x64.exe",
            MacOSv2box: "https://apps.apple.com/us/app/v2box-v2ray-client/id6446814690",
            LinuxHiddify: "https://github.com/hiddify/hiddify-app/releases/latest/download/Hiddify-Linux-x64.AppImage"
        };

        // Детект ОС
        function detectOS() {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            if (/android/i.test(userAgent)) return "Android";
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return "iOS";
            if (/Win/.test(userAgent)) return "Windows";
            if (/Mac/.test(userAgent)) return "MacOS";
            if (/Linux/.test(userAgent)) return "Linux";
            return "unknown";
        }
        const os = detectOS();

        // Показать модалку
        function showModal(mediaContent) {
            modalMedia.innerHTML = mediaContent;
            modal.style.display = "flex";
        }

        // Закрыть модалку и открыть Store
        function closeModalAndOpenStore(osName) {
            modal.style.display = "none";
            let storeLink = links[osName];
            if (storeLink) {
                window.open(storeLink, '_blank', 'noopener,noreferrer');
            }
        }

        // Утилита: связываем кнопку, модалку и магазин
        // buttonId: id кнопки, mediaHTML: что показывать в модалке, platform: ключ для links
        function initModalTrigger(buttonId, mediaHTML, platform) {
            const btn = document.getElementById(buttonId);
            if (!btn) return;
            btn.addEventListener("click", () => {
                showModal(mediaHTML);
                closeModalButton.onclick = () => closeModalAndOpenStore(platform);
            });
        }

        // Настраиваем ссылки «Завершить настройку»
        function setFinishSetupLinks() {
            let cleanedURL = "{{ user.subscription_url }}";

            // Shadowrocket (base64)
            let encodedURLForShadowrocket = btoa(cleanedURL);
            document.getElementById("iosFinishSetup-Shadowrocket").href =
                `sub://${encodedURLForShadowrocket}`;

            // // Остальные (encodeURIComponent)
            // const currentURL = encodeURIComponent(cleanedURL);

            // Остальные (ничего не делаем со ссылкой)
            const currentURL = cleanedURL;
            // Android
            document.getElementById("androidFinishSetup").href =
                `v2raytun://import-sub?url=${currentURL}`;
            // iOS (v2RayTun)
            document.getElementById("iosFinishSetup-v2RayTun").href =
                `v2raytun://import/${currentURL}`;
            // iOS (Hiddify)
            document.getElementById("iosFinishSetup-Hiddify").href =
                `hiddify://import/${currentURL}`;
            // Windows
            document.getElementById("windowsFinishSetup").href =
                `hiddify://import/${currentURL}`;
            // Linux
            document.getElementById("linuxFinishSetup").href =
                `hiddify://install-config/?url=${currentURL}`;
            // MacOS
            const v2boxLink = `v2box://install-sub?url=${currentURL}`;

            document.getElementById("macosFinishSetup").href = encodeURIComponent(v2boxLink);
        }

        // Настройка iOS (логика вкладок + кнопки)
        function setupIOS() {
            const tabLinks = document.querySelectorAll('.ios-app-tabs .tab-link');
            const tabContents = document.querySelectorAll('.ios-app-content .tab-content');

            // Логика табов
            tabLinks.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabLinks.forEach(link => link.classList.remove('current'));
                    tabContents.forEach(content => content.classList.remove('current'));

                    tab.classList.add('current');
                    document.getElementById(tab.dataset.tab + 'Tab').classList.add('current');
                });
            });

            // Триггеры для iOS
            initModalTrigger(
                "installShadowrocket",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/ios_shadowrocket.mp4" type="video/mp4">
                    </video>
                `,
                "iOSShadowrocket"
            );

            initModalTrigger(
                "installv2RayTunIOS",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/ios_v2raytun.mp4" type="video/mp4">
                    </video>
                `,
                "iOSv2RayTun"
            );

            initModalTrigger(
                "installHiddifyIOS",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/ios_hiddify.mp4" type="video/mp4">
                    </video>
                `,
                "iOSHiddify"
            );
        }

        // Настройка Android и Android TV
        function setupAndroid() {
            initModalTrigger(
                "installAndroidHiddify",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/android_hiddify.mp4" type="video/mp4">
                    </video>
                `,
                "AndroidHiddify"
            );

            initModalTrigger(
                "installVPN4TV",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/androidtv_vpn4tv.mp4" type="video/mp4">
                    </video>
                `,
                "AndroidVPN4TV"
            );
        }

        // Настройка Windows
        function setupWindows() {
            initModalTrigger(
                "showModalWindows",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/windows_hiddify.mp4" type="video/mp4">
                    </video>
                `,
                "WindowsHiddify"
            );
        }

        // Настройка MacOS
        function setupMacOS() {
            initModalTrigger(
                "showModalMacOS",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/macos_hiddify.mp4" type="video/mp4">
                    </video>
                `,
                "MacOSv2box"
            );
        }
        
        // Настройка Linux
        function setupLinux() {
            initModalTrigger(
                "showModalLinux",
                `
                    <video autoplay loop muted playsinline width="100%" height="auto">
                        <source src="https://static.rorosin.ru/linux_hiddify.mp4" type="video/mp4">
                    </video>
                `,
                "LinuxHiddify"
            );
        }

        // Клик вне модалки
        window.onclick = function(event) {
            if (event.target === modal) {
                modal.style.display = "none";
            }
        };

        // Инициализация
        document.addEventListener('DOMContentLoaded', () => {
            // Telegram WebApp снова
            if (window.Telegram && window.Telegram.WebApp) {
                Telegram.WebApp.ready();
                Telegram.WebApp.expand();
            }

            // Кнопка «Вернуться»
            backToFirstPage.addEventListener('click', function() {
                errorPage.style.display = 'none';
                firstPage.style.display = 'block';
            });

            // Если мобильная ОС - показываем "Телефон", иначе "Компьютер"
            if (os === "Android" || os === "iOS") {
                deviceButtonPhone.textContent = (os === "Android") ? "Телефон (Android)" : "Телефон (iOS)";
                deviceButtonPhone.addEventListener("click", () => {
                    firstPage.style.display = "none";
                    if (os === "Android") {
                        androidOptions.style.display = "flex";
                        setupAndroid();
                    } else {
                        iosOptions.style.display = "flex";
                        setupIOS();
                    }
                });
            } else if (os === "Windows" || os === "MacOS" || os === "Linux") {
                // ПК
                let label = "Компьютер";
                if (os === "Windows") label = "Компьютер (Windows)";
                else if (os === "MacOS") label = "Компьютер (MacOS)";
                else if (os === "Linux") label = "Компьютер (Linux)";
                deviceButtonPhone.textContent = label;

                deviceButtonPhone.addEventListener("click", () => {
                    firstPage.style.display = "none";
                    if (os === "Windows") {
                        windowsOptions.style.display = "flex";
                        setupWindows();
                    } else if (os === "MacOS") {
                        macosOptions.style.display = "flex";
                        setupMacOS();
                    } else if (os === "Linux") {
                        linuxOptions.style.display = "flex";
                        setupLinux();
                    } else {
                        windowsOptions.style.display = "flex";
                        setupWindows();
                    }
                });
            } else {
                // Неизвестная ОС - по умолчанию пусть будет Android
                deviceButtonPhone.textContent = "Телефон (Android)";
                deviceButtonPhone.addEventListener("click", () => {
                    firstPage.style.display = "none";
                    androidOptions.style.display = "flex";
                    setupAndroid();
                });
            }

            // Кнопка «Телевизор» -> аналог Android
            deviceButtonTV.addEventListener("click", () => {
                firstPage.style.display = "none";
                androidOptions.style.display = "flex";
                setupAndroid();
            });

            // Проставляем ссылки «Завершить настройку»
            setFinishSetupLinks();
        });
    </script>
</body>
</html>