app / index.html
Shveiauto's picture
Update index.html
c7b0f88 verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OstenHost</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="Первый хостинг контента родом из Средней Азии! контент без потери качества !">
</head>
<body>
<iframe
src="https://osten-host-tube.hf.space"
frameborder="0"
allowfullscreen
allow="cross-origin-isolated; cookies"></iframe>
<button id="installButton">Установить приложение</button>
<button id="iosInstallPrompt">Установить приложение</button>
<div id="iosInstallModal">
<div class="modal-content">
<h2>Установите приложение OstenHost</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>
<script>
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);
});
});
}
// Отладка сообщений от iframe -- УДАЛЕНО, так как не решает проблему авторизации и не несет полезной нагрузки в данном контексте. Для отладки лучше использовать инструменты разработчика в браузере.
// Перехват ошибок
window.addEventListener('error', (event) => {
console.error('Произошла ошибка:', event.message, event.filename, event.lineno);
});
</script>
</body>
</html>