App / index.html
Kgshop's picture
Update index.html
f635718 verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire Collection - Юбки и Брюки оптом </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">
<!-- Добавленный мета тег для проверки Google -->
<meta name="google-site-verification" content="V6EqDTA9Oj9V1OfNbnBHj5RKrdcXlABD8tqfEFVUHJY" />
<!-- Мета описание для SEO -->
<meta name="description" content=" Брюки и юбки оптом , лучшие модели , по самым выгодным ценам .">
<style>
/* Общие стили (можно оставить пустым, если используете style.css) */
</style>
</head>
<body>
<iframe
src="https://firecollection-optom.hf.space"
frameborder="0"
allowfullscreen></iframe>
<button id="installButton">Установить приложение</button>
<button id="iosInstallPrompt">Установить приложение</button>
<!-- Модальное окно для iOS -->
<div id="iosInstallModal">
<div class="modal-content">
<h2>Установите приложение ZZIRIX</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'; // Устанавливаем src
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); // 5 секунд
}
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Сервисный рабочий процесс зарегистрирован:', registration);
})
.catch((error) => {
console.log('Ошибка регистрации сервисного рабочего процесса:', error);
});
});
}
</script>
</body>
</html>