Spaces:
Running
Running
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MASearch</title> | |
| <link rel="manifest" href="/manifest.json"> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100vh; | |
| background-color: #fff; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* Верхний фрейм */ | |
| header { | |
| background: linear-gradient(135deg, #007bff, #00c6ff); | |
| color: white; | |
| padding: 10px 20px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-container img { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| } | |
| .header-info { | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 14px; | |
| } | |
| .visitor-counter { | |
| font-size: 14px; | |
| font-weight: bold; | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| } | |
| .community-link { | |
| font-size: 12px; | |
| color: white; | |
| text-decoration: none; | |
| opacity: 0.8; | |
| } | |
| /* Основное содержимое */ | |
| iframe { | |
| flex: 1; | |
| width: 100%; | |
| border: none; | |
| } | |
| /* Кнопки установки */ | |
| #installButton, #iosInstallPrompt { | |
| display: none; | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 10px 15px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| z-index: 1000; | |
| font-size: 14px; | |
| } | |
| #iosInstallPrompt { | |
| background-color: #28a745; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo-container"> | |
| <img src="/icon.png" alt="Logo"> | |
| <div class="header-info"> | |
| <span>MASearch</span> | |
| <a href="https://discord.gg/openfreeai" class="community-link" target="_blank">Сообщество</a> | |
| </div> | |
| </div> | |
| <div class="visitor-counter"> | |
| Посетителей за месяц: <span id="visitorCount">0</span> | |
| </div> | |
| </header> | |
| <iframe src="https://eum-lovat.vercel.app" allowfullscreen></iframe> | |
| <button id="installButton">Установить это приложение</button> | |
| <button id="iosInstallPrompt">Добавить на экран Домой</button> | |
| <script> | |
| let deferredPrompt; | |
| const installButton = document.getElementById('installButton'); | |
| const iosInstallPrompt = document.getElementById('iosInstallPrompt'); | |
| const visitorCountElement = document.getElementById('visitorCount'); | |
| /* Счетчик посетителей */ | |
| function updateVisitorCount() { | |
| fetch('https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2FVIDraft-eum.hf.space') | |
| .then(response => response.text()) | |
| .then(data => { | |
| const match = data.match(/"count":"(\d+)"/); | |
| if (match) { | |
| visitorCountElement.textContent = match[1]; | |
| } | |
| }) | |
| .catch(error => console.log('Ошибка загрузки счетчика:', error)); | |
| } | |
| updateVisitorCount(); | |
| setInterval(updateVisitorCount, 60000); // Обновление раз в минуту | |
| /* Обнаружение iOS и отображение инструкции */ | |
| function isIos() { | |
| return /iphone|ipad|ipod/i.test(navigator.userAgent); | |
| } | |
| function isInStandaloneMode() { | |
| return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone; | |
| } | |
| if (isIos() && !isInStandaloneMode()) { | |
| iosInstallPrompt.style.display = 'block'; | |
| iosInstallPrompt.addEventListener('click', () => { | |
| alert("1. Нажмите кнопку 'Поделиться' (иконка внизу Safari).\n2. Выберите 'Добавить на экран Домой'.\n3. Подтвердите установку."); | |
| }); | |
| } | |
| /* Обработчик события для установки PWA */ | |
| window.addEventListener('beforeinstallprompt', (event) => { | |
| event.preventDefault(); | |
| deferredPrompt = event; | |
| installButton.style.display = 'block'; | |
| installButton.addEventListener('click', async () => { | |
| deferredPrompt.prompt(); | |
| const { outcome } = await deferredPrompt.userChoice; | |
| if (outcome === 'accepted') { | |
| console.log('User accepted the install prompt'); | |
| } else { | |
| console.log('User dismissed the install prompt'); | |
| } | |
| installButton.style.display = 'none'; | |
| }); | |
| }); | |
| /* Регистрация Service Worker */ | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/service-worker.js') | |
| .then((registration) => console.log('Service Worker зарегистрирован:', registration)) | |
| .catch((error) => console.log('Ошибка Service Worker:', error)); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |