index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anvico - приложение</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" href="/icon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="icon" type="image/png" sizes="192x192" href="/icon.png">
    <link rel="icon" href="icon.png" type="image/png">
    <meta name="google-site-verification" content="V6EqDTA9Oj9V1OfNbnBHj5RKrdcXlABD8tqfEFVUHJY" />
    <meta name="description" content=" ">
    <style>
        /* Базовые стили для экрана пароля, чтобы он выглядел аккуратно */
        #passwordScreen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
            background-color: #f4f4f9;
            font-family: Arial, sans-serif;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
        }
        .password-container {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 90%;
            width: 320px;
        }
        .password-container h2 {
            margin-top: 0;
            color: #333;
        }
        .password-container input {
            width: 100%;
            padding: 12px;
            margin: 15px 0;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .password-container button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .password-container button:hover {
            background-color: #0056b3;
        }
        #errorMessage {
            color: red;
            font-size: 14px;
            display: none;
            margin-top: 10px;
        }
        /* Скрываем основной контент до ввода пароля */
        #mainContent {
            display: none;
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>

    <!-- ЭКРАН ВВОДА ПАРОЛЯ -->
    <div id="passwordScreen">
        <div class="password-container">
            <h2>Доступ закрыт</h2>
            <p style="color: #666; font-size: 14px;">Введите пароль для входа в приложение</p>
            <input type="password" id="passwordInput" placeholder="Введите пароль">
            <button id="loginButton">Войти</button>
            <div id="errorMessage">Неверный пароль. Попробуйте еще раз.</div>
        </div>
    </div>

    <!-- ОСНОВНОЕ СОДЕРЖИМОЕ ПРИЛОЖЕНИЯ -->
    <div id="mainContent">
        <!-- Атрибут src заменен на data-src, чтобы страница не загружалась в фоне до ввода пароля -->
        <iframe
            id="appIframe"
            data-src="https://metastore-full.hf.space/219382/catalog"
            frameborder="0"
            allowfullscreen
            allow="cross-origin-isolated; cookies"
            style="width: 100%; height: 100%; border: none;"></iframe>

        <button id="installButton">Установить приложение</button>
        <button id="iosInstallPrompt">Установить приложение</button>

        <div id="iosInstallModal">
            <div class="modal-content">
                <h2>Установите приложение Anvico</h2>
                <a href="#" id="openZoomModal">
                    <img src="https://huggingface.co/spaces/Morshen/alpha/resolve/main/pwa_ios.png" alt="Инструкция по установке PWA на iOS">
                </a>
                <p>1. Нажмите кнопку "Поделиться" внизу Safari.</p>
                <p>2. Выберите "На экран «Домой»".</p>
                <p>3. Подтвердите установку.</p>
                <button id="closeIosModal">Закрыть</button>
            </div>
        </div>

        <div id="imageZoomModal">
            <span id="closeZoomModal">×</span>
            <img id="zoomedImage" src="" alt="Увеличенное изображение">
        </div>
    </div>

    <script>
        // === ЛОГИКА АВТОРИЗАЦИИ ===
        const passwordScreen = document.getElementById('passwordScreen');
        const mainContent = document.getElementById('mainContent');
        const passwordInput = document.getElementById('passwordInput');
        const loginButton = document.getElementById('loginButton');
        const errorMessage = document.getElementById('errorMessage');
        const appIframe = document.getElementById('appIframe');

        // Функция для разблокировки приложения
        function unlockApp() {
            passwordScreen.style.display = 'none';
            mainContent.style.display = 'block';
            // Загружаем iframe только после успешного входа
            if (!appIframe.src) {
                appIframe.src = appIframe.getAttribute('data-src');
            }
        }

        // Проверяем, сохранен ли пароль на этом устройстве
        if (localStorage.getItem('isAnvicoAuthenticated') === 'true') {
            unlockApp();
        }

        // Обработчик кнопки "Войти"
        loginButton.addEventListener('click', () => {
            if (passwordInput.value === '999888008') {
                localStorage.setItem('isAnvicoAuthenticated', 'true');
                unlockApp();
            } else {
                errorMessage.style.display = 'block';
            }
        });

        // Вход по нажатию Enter на клавиатуре
        passwordInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                loginButton.click();
            }
        });


        // === ОРИГИНАЛЬНАЯ ЛОГИКА PWA ===
        let deferredPrompt;
        const installButton = document.getElementById('installButton');
        const iosInstallPrompt = document.getElementById('iosInstallPrompt');
        const iosInstallModal = document.getElementById('iosInstallModal');
        const closeIosModal = document.getElementById('closeIosModal');
        const openZoomModal = document.getElementById('openZoomModal');
        const imageZoomModal = document.getElementById('imageZoomModal');
        const closeZoomModal = document.getElementById('closeZoomModal');
        const zoomedImage = document.getElementById('zoomedImage');

        function isIos() {
            return /iphone|ipad|ipod/i.test(navigator.userAgent);
        }

        function isInStandaloneMode() {
            return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
        }

        window.addEventListener('beforeinstallprompt', (event) => {
            event.preventDefault();
            deferredPrompt = event;
            installButton.style.display = 'block';
            installButton.classList.add('pulse-animation');

            installButton.addEventListener('click', async () => {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                if (outcome === 'accepted') {
                    console.log('Пользователь принял запрос на установку');
                } else {
                    console.log('Пользователь отклонил запрос на установку');
                }
                deferredPrompt = null;
                installButton.style.display = 'none';
                installButton.classList.remove('pulse-animation');
            });
        });

        if (isIos() && !isInStandaloneMode()) {
            iosInstallPrompt.style.display = 'block';
            installButton.style.display = 'none';
            iosInstallPrompt.classList.add('pulse-animation');

            iosInstallPrompt.addEventListener('click', () => {
                iosInstallModal.style.display = 'block';
                localStorage.setItem('iosInstallPromptShown', 'true');
            });

            closeIosModal.addEventListener('click', () => {
                iosInstallModal.style.display = 'none';
            });

            openZoomModal.addEventListener('click', (event) => {
                event.preventDefault();
                zoomedImage.src = 'https://huggingface.co/spaces/Morshen/alpha/resolve/main/pwa_ios.png';
                imageZoomModal.style.display = 'block';
            });

            closeZoomModal.addEventListener('click', () => {
                imageZoomModal.style.display = 'none';
            });
        } else {
            installButton.style.display = deferredPrompt ? 'block' : 'none';
            iosInstallPrompt.style.display = 'none';
            if (deferredPrompt) {
                installButton.classList.add('pulse-animation');
            }
        }

        if (isIos() && !isInStandaloneMode() && localStorage.getItem('iosInstallPromptShown') === 'true') {
            setTimeout(() => {
                iosInstallModal.style.display = 'block';
            }, 5000);
        }

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js')
                    .then((registration) => {
                        console.log('Сервисный рабочий процесс зарегистрирован:', registration);
                    })
                    .catch((error) => {
                        console.log('Ошибка регистрации сервисного рабочего процесса:', error);
                    });
            });
        }

        // Перехват ошибок
        window.addEventListener('error', (event) => {
            console.error('Произошла ошибка:', event.message, event.filename, event.lineno);
        });
    </script>
</body>
</html>