Update settings.html

settings.html

@@ -7,7 +7,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
     <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
-    <style>
+        <style>
         body {
             display: flex;
             flex-direction: column;
@@ -94,6 +94,56 @@
         }
     </style>
 
+    <style>
+        .modal {
+            display: none; /* По умолчанию скрыто */
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5); /* Полупрозрачный фон */
+        }
+
+        .modal-content {
+            background-color: #fff; /* Белый фон */
+            color: black; /* Черный текст */
+            border-radius: 10px;
+            padding: 20px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%; /* Ширина 100% */
+            max-width: 80%;
+            max-height: 80%;
+            overflow-y: auto;
+            box-shadow: 0 0 20px rgba(0,0,0,0.2);
+        }
+
+        .close {
+            color: orange;
+            float: right;
+            font-size: 30px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: darkorange;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .modal-content iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+
     <style>
 /* Добавленные стили для центрирования ссылки */
 .form-group {