Hugging Face's logo

Spaces:
Metapp
/
Anvico
Running

App Files Community
Anvico / index.html
Kgshop's picture
Kgshop
Update index.html
a2084e7 verified
Raw
History Blame Contribute Delete
10.9 kB
<!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>