index.html

<!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>