Update index.html

index.html

@@ -6,37 +6,38 @@
     <title>Morshenalpha PWA</title>
     <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="style.css">
-    <link rel="apple-touch-icon" href="/icon.png"> <!-- Для iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Для iOS -->
-    <meta name="apple-mobile-web-app-status-bar-style" content="default"> <!-- Для iOS -->
+    <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>
-        /* Общие стили из вашего CSS, но с адаптивными улучшениями */
+        /* Общие стили */
         body {
-            padding: 1rem; /* Уменьшил отступ для мобильных */
+            padding: 0;
             font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-            margin: 0; /* Убрал margin по умолчанию */
+            margin: 0;
+            overflow: hidden; /* Предотвращает полосы прокрутки */
         }
 
         h1 {
-            font-size: 1.2rem; /* Уменьшил размер шрифта для мобильных */
+            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; /* Уменьшил отступ для мобильных */
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+            margin-top: 0.25rem;
         }
 
         .card {
-            max-width: 100%; /* Занимает всю ширину на мобильных */
+            max-width: 100%;
             margin: 0 auto;
-            padding: 0.5rem; /* Уменьшил отступ для мобильных */
+            padding: 0.5rem;
             border: 1px solid lightgray;
-            border-radius: 0.5rem; /* Уменьшил радиус для мобильных */
+            border-radius: 0.5rem;
         }
 
         .card p:last-child {
@@ -44,9 +45,9 @@
         }
 
         /* Адаптивные стили */
-        @media (min-width: 640px) { /* Для экранов больше 640px */
+        @media (min-width: 640px) {
             body {
-                padding: 2rem;
+                padding: 0;
             }
             h1 {
                 font-size: 1.6rem;
@@ -63,30 +64,68 @@
 
         /* Стили для iframe */
         iframe {
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
-            height: 1000px; /* Начальная высота, можно изменить */
+            height: 100%;
             border: none;
+            margin: 0;
+            padding: 0;
         }
 
-        /* Кнопки установки */
+        /* Стили для кнопок установки */
         #installButton, #iosInstallPrompt {
             display: none;
             position: fixed;
             bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
-            padding: 10px 15px;
+            padding: 12px 20px;
             background-color: #007bff;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             z-index: 1000;
-            font-size: 14px;
+            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>
@@ -97,8 +136,6 @@
         frameborder="0"
         allowfullscreen></iframe>
 
-
-
     <button id="installButton">Установить приложение</button>
     <button id="iosInstallPrompt">Установить приложение (инструкция для iOS)</button>
 
@@ -117,9 +154,17 @@
 
         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) => {
@@ -137,6 +182,7 @@
                 }
                 deferredPrompt = null;
                 installButton.style.display = 'none';
+                installButton.classList.remove('pulse-animation'); // Удаляем класс после установки
             });
         });