Update pages.html

pages.html

@@ -724,6 +724,117 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
 
 
+<style>
+/* Модальный (фон) */
+.modal_8 {
+  display: none; /* Скрыто по умолчанию */
+  position: fixed; /* Оставаться на месте */
+  z-index: 20; /* Сидеть на вершине */
+  padding-top: 100px; /* Расположение коробки */
+  left: 0;
+  top: 0;
+  width: 100%; /* Полная ширина */
+  height: 100%; /* Полная высота */
+  overflow: auto; /* Включите прокрутку, если это необходимо */
+  background-color: rgb(0,0,0); /* Цвет запасной вариант  */
+  background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
+}
+/* Модальное содержание */
+.modal-content_8 {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  max-height: 80vh; /* Ограничиваем максимальную высоту контента */
+  overflow-y: auto; /* Включаем вертикальную прокрутку, если содержимое больше */  
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop_3;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop_3;
+  animation-duration: 0.4s
+}
+/* Добавить анимацию */
+@-webkit-keyframes animatetop_8 {
+  from {top:-300px; opacity:0} 
+  to {top:0; opacity:1}
+}
+@keyframes animatetop_8 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+/* Кнопка закрытия */
+.close_8 {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close_8:hover,
+.close_8:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.modal-header_8 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+.modal-body_8 {padding: 2px 16px;}
+.modal-footer_8 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+/* Стили для полей ввода */
+.modal-body_8 input[type="text"] {
+  width: 100%; /* Полной ширины */
+  padding: 10px; /* Внутренний отступ */
+  margin: 5px 0 22px 0; /* Внешний отступ */
+  display: inline-block; /* Отображение */
+  border: 1px solid #ccc; /* Граница */
+  background: #f1f1f1; /* Фон */
+  box-sizing: border-box; /* Устанавливает, как вычисляется ширина и высота элемента */
+}
+
+.modal-body_8 textarea {
+  width: 100%; /* Полной ширины */
+  padding: 10px; /* Внутренний отступ */
+  margin: 5px 0 22px 0; /* Внешний отступ */
+  display: inline-block; /* Отображение */
+  border: 1px solid #ccc; /* Граница */
+  background: #f1f1f1; /* Фон */
+  box-sizing: border-box; /* Устанавливает, как вычисляется ширина и высота элемента */
+  height: 100px; /* Начальная высота */
+  resize: vertical; /* Разрешает изменение размера только по вертикали */
+}
+
+.modal-body_8 input[type="text"]:focus,
+.modal-body_8 textarea:focus {
+  background-color: #ddd; /* Фон при фокусе */
+  outline: none; /* Убирает стандартный outline */
+}
+
+/* Стили для кнопки */
+.modal-body_8 button {
+  background-color: green; /* Зеленый цвет фона */
+  color: white; /* Белый цвет текста */
+  padding: 14px 20px; /* Внутренний отступ */
+  margin: 8px 0; /* Внешний отступ */
+  border: none; /* Без границы */
+  cursor: pointer; /* Курсор в виде указателя */
+  width: 100%; /* Полная ширина */
+  opacity: 0.9; /* Немного прозрачная */
+}
+
+.modal-body_8 button:hover {
+  opacity:1; /* Полная непрозрачность при наведении */
+}
+ 
+</style>
+