Update index.html

index.html

@@ -498,7 +498,7 @@
         // Инициализация при загрузке страницы
         window.addEventListener('load', init)
     </script>	
-    <script>
+<script>
 function installGame(gameId) {
     const game = games.find(g => g.id === gameId);
     if (!game) return;
@@ -523,72 +523,91 @@ function installGame(gameId) {
                 installButton.textContent = 'Установлено';
                 message.textContent = 'Игра успешно установлена!';
 
-                // Шутка после установки
                 setTimeout(() => {
                     alert('Игра установлена! Теперь можно наслаждаться... чем-то интересным 😉');
-                    
-                    // Открываем видео прямо на сайте
-                    showVideo('https://www.youtube.com/embed/dQw4w9WgXcQ'); // Rickroll
+                    showVideo('https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1'); // Автовоспроизведение
                 }, 1000);
             }
         }, 300);
     }
 }
 
-// Функция для показа видео
 function showVideo(videoUrl) {
-    // Создаём модальное окно
+    // Проверка на существующее модальное окно
+    if(document.getElementById('video-modal')) return;
+
     const modal = document.createElement('div');
-    modal.style.position = 'fixed';
-    modal.style.top = '0';
-    modal.style.left = '0';
-    modal.style.width = '100%';
-    modal.style.height = '100%';
-    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-    modal.style.display = 'flex';
-    modal.style.justifyContent = 'center';
-    modal.style.alignItems = 'center';
-    modal.style.zIndex = '1000';
-
-    // Создаём контейнер для видео
+    modal.id = 'video-modal';
+    modal.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.9);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        opacity: 0;
+        transition: opacity 0.3s;
+    `;
+
     const videoContainer = document.createElement('div');
-    videoContainer.style.width = '80%';
-    videoContainer.style.maxWidth = '800px';
-    videoContainer.style.position = 'relative';
+    videoContainer.style.cssText = `
+        width: 90%;
+        max-width: 800px;
+        position: relative;
+        background: #000;
+        border-radius: 10px;
+        overflow: hidden;
+    `;
 
-    // Создаём iframe с видео
     const iframe = document.createElement('iframe');
+    iframe.style.cssText = 'width: 100%; height: 450px; border: none;';
     iframe.src = videoUrl;
-    iframe.width = '100%';
-    iframe.height = '450';
-    iframe.frameBorder = '0';
-    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
-    iframe.allowFullscreen = true;
+    iframe.allow = 'autoplay; encrypted-media; fullscreen';
 
-    // Кнопка закрытия
     const closeButton = document.createElement('button');
     closeButton.textContent = '×';
-    closeButton.style.position = 'absolute';
-    closeButton.style.top = '-30px';
-    closeButton.style.right = '-30px';
-    closeButton.style.backgroundColor = '#ff4444';
-    closeButton.style.color = '#fff';
-    closeButton.style.border = 'none';
-    closeButton.style.borderRadius = '50%';
-    closeButton.style.width = '40px';
-    closeButton.style.height = '40px';
-    closeButton.style.fontSize = '24px';
-    closeButton.style.cursor = 'pointer';
-    closeButton.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.3)';
-    closeButton.onclick = () => document.body.removeChild(modal);
-
-    // Добавляем элементы в DOM
+    closeButton.style.cssText = `
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        background: #ff4444;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        font-size: 24px;
+        cursor: pointer;
+        z-index: 1001;
+    `;
+    
+    closeButton.onclick = () => {
+        modal.style.opacity = '0';
+        setTimeout(() => modal.remove(), 300);
+    };
+
+    // Закрытие по клику на фон
+    modal.onclick = (e) => {
+        if(e.target === modal) closeButton.click();
+    };
+
+    // Закрытие по Esc
+    document.addEventListener('keydown', (e) => {
+        if(e.key === 'Escape') closeButton.click();
+    });
+
     videoContainer.appendChild(iframe);
     videoContainer.appendChild(closeButton);
     modal.appendChild(videoContainer);
     document.body.appendChild(modal);
-            }
-        }
-    </script>
+    
+    // Анимация появления
+    setTimeout(() => modal.style.opacity = '1', 10);
+}
+</script>
 </body>
 </html>