Update pages.html

pages.html

@@ -337,7 +337,7 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 </style>
 
 
-    <style>
+<style>
 /* Модальный (фон) */
 .modal_3 {
   display: none; /* Скрыто по умолчанию */
@@ -454,9 +454,254 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   font-weight: bold; /* Жирный шрифт для подписи */
   color: #333; /* Цвет текста */
 }   
-  </style>
+</style>
+
+
+
 
+<style>
+/* Модальный (фон) */
+.modal_4 {
+  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_4 {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  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_4 {
+  from {top:-300px; opacity:0} 
+  to {top:0; opacity:1}
+}
+@keyframes animatetop_4 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+/* Кнопка закрытия */
+.close_4 {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close_4:hover,
+.close_4:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.modal-header_4 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+.modal-body_4 {padding: 2px 16px;}
+.modal-footer_4 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+/* Стили для полей ввода */
+.modal-body_4 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_4 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_4 input[type="text"]:focus,
+.modal-body_4 textarea:focus {
+  background-color: #ddd; /* Фон при фокусе */
+  outline: none; /* Убирает стандартный outline */
+}
+
+/* Стили для кнопки */
+.modal-body_4 button {
+  background-color: green; /* Зеленый цвет фона */
+  color: white; /* Белый цвет текста */
+  padding: 14px 20px; /* Внутренний отступ */
+  margin: 8px 0; /* Внешний отступ */
+  border: none; /* Без границы */
+  cursor: pointer; /* Курсор в виде указателя */
+  width: 100%; /* Полная ширина */
+  opacity: 0.9; /* Немного прозрачная */
+}
+
+.modal-body_4 button:hover {
+  opacity:1; /* Полная непрозрачность при наведении */
+}
+
+.input-group {
+  margin-bottom: 15px; /* Отступ снизу для группы полей */
+}
+
+.input-group label {
+  display: block; /* Делает подпись блоком, чтобы она занимала всю ширину */
+  margin-bottom: 5px; /* Отступ снизу для подписи */
+  font-weight: bold; /* Жирный шрифт для подписи */
+  color: #333; /* Цвет текста */
+}   
+</style>
 
+<style>
+/* Модальный (фон) */
+.modal_5 {
+  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_5 {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  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_5 {
+  from {top:-300px; opacity:0} 
+  to {top:0; opacity:1}
+}
+@keyframes animatetop_5 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+/* Кнопка закрытия */
+.close_5 {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close_5:hover,
+.close_5:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.modal-header_5 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+.modal-body_5 {padding: 2px 16px;}
+.modal-footer_5 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+/* Стили для полей ввода */
+.modal-body_5 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_5 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_5 input[type="text"]:focus,
+.modal-body_5 textarea:focus {
+  background-color: #ddd; /* Фон при фокусе */
+  outline: none; /* Убирает стандартный outline */
+}
+
+/* Стили для кнопки */
+.modal-body_5 button {
+  background-color: green; /* Зеленый цвет фона */
+  color: white; /* Белый цвет текста */
+  padding: 14px 20px; /* Внутренний отступ */
+  margin: 8px 0; /* Внешний отступ */
+  border: none; /* Без границы */
+  cursor: pointer; /* Курсор в виде указателя */
+  width: 100%; /* Полная ширина */
+  opacity: 0.9; /* Немного прозрачная */
+}
+
+.modal-body_5 button:hover {
+  opacity:1; /* Полная непрозрачность при наведении */
+}
+
+.input-group {
+  margin-bottom: 15px; /* Отступ снизу для группы полей */
+}
+
+.input-group label {
+  display: block; /* Делает подпись блоком, чтобы она занимала всю ширину */
+  margin-bottom: 5px; /* Отступ снизу для подписи */
+  font-weight: bold; /* Жирный шрифт для подписи */
+  color: #333; /* Цвет текста */
+}   
+</style>
+
+
+
+
+
+  
   
 
     <style>