<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morshen Alpha</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">
<style>
/* Общие стили */
body {
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
margin: 0;
overflow: hidden; /* Предотвращает полосы прокрутки */
}
h1 {
font-size: 1.2rem;
margin-top: 0;
}
p {
color: rgb(107, 114, 128);
font-size: 0.9rem;
margin-bottom: 0.5rem;
margin-top: 0.25rem;
}
.card {
max-width: 100%;
margin: 0 auto;
padding: 0.5rem;
border: 1px solid lightgray;
border-radius: 0.5rem;
}
.card p:last-child {
margin-bottom: 0;
}
/* Адаптивные стили */
@media (min-width: 640px) {
body {
padding: 0;
}
h1 {
font-size: 1.6rem;
}
p {
font-size: 1rem;
}
.card {
max-width: 620px;
padding: 1rem;
border-radius: 1rem;
}
}
/* Стили для iframe */
iframe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
}
/* Стили для кнопок установки */
#installButton, #iosInstallPrompt {
display: none;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 0 10px #007bff;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
/* Hover эффект с усилением свечения и небольшим подъемом */
#installButton:hover, #iosInstallPrompt:hover {
box-shadow: 0 0 20px #007bff, 0 0 30px #007bff;
transform: translateX(-50%) scale(1.05); /* Небольшое увеличение */
}
/* Дополнительный эффект пульсации с использованием keyframes */
@keyframes pulse {
0% {
box-shadow: 0 0 10px #007bff;
}
50% {
box-shadow: 0 0 20px #007bff, 0 0 30px #007bff;
}
100% {
box-shadow: 0 0 10px #007bff;
}
}
/* Применение анимации к кнопке */
#installButton.pulse-animation, #iosInstallPrompt.pulse-animation {
animation: pulse 2s infinite;
}
#iosInstallPrompt {
background-color: #28a745;
box-shadow: 0 0 10px #28a745;
}
#iosInstallPrompt:hover {
box-shadow: 0 0 20px #28a745, 0 0 30px #28a745;
}
</style>
</head>
<body>
<iframe
src="https://v0-morshen-alpha-landing-xffod9.vercel.app/"
frameborder="0"
allowfullscreen></iframe>
<button id="installButton">Установить приложение</button>
<button id="iosInstallPrompt">Установить приложение </button>
<script>
let deferredPrompt;
const installButton = document.getElementById('installButton');
const iosInstallPrompt = document.getElementById('iosInstallPrompt');
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';
installButton.style.display = 'none';
iosInstallPrompt.classList.add('pulse-animation');
iosInstallPrompt.addEventListener('click', () => {
alert("1. Нажмите кнопку 'Поделиться' (иконка внизу Safari).\n2. на экран Домой'.\n3. Подтвердите установку.");
});
} else {
installButton.style.display = deferredPrompt ? 'block' : 'none';
iosInstallPrompt.style.display = 'none';
if (deferredPrompt) {
installButton.classList.add('pulse-animation');
}
}
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');
}
deferredPrompt = null;
installButton.style.display = 'none';
installButton.classList.remove('pulse-animation'); // Удаляем класс после установки
});
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker registered:', registration);
})
.catch((error) => {
console.log('Service Worker registration failed:', error);
});
});
}
</script>
</body>
</html>