psy_vk

Running

File size: 60,275 Bytes

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green builder - Конструктор лендингов и VK приложений</title>


    <!-- Иконка сайта -->
    <link rel="icon" href="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/icon/prevu.svg" type="image/svg+xml">
    <link rel="shortcut icon" href="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/icon/prevu.svg" type="image/svg+xml">


    <!-- Описание страницы -->
    <meta name="description" content="Green builder - Конструктор лендингов и VK приложений">

    <!-- Превью изображение для публикации в мессенджерах -->
    <meta property="og:image" content="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/prevu.jpg">
    <meta property="og:description" content="Green builder - Конструктор лендингов и VK приложений">

  
  
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <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>




 

<script src="https://unpkg.com/grapesjs"></script>

 
  <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
 




<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<script src="https://unpkg.com/grapesjs-component-countdown"></script>
<script src="https://unpkg.com/grapesjs-parser-postcss"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css">





<link href="https://unpkg.com/grapesjs-rulers/dist/grapesjs-rulers.min.css" rel="stylesheet">

<script src="https://unpkg.com/grapesjs-rulers"></script>



<link href="https://unpkg.com/grapesjs-plugin-toolbox/dist/grapesjs-plugin-toolbox.min.css" rel="stylesheet">

<script src="https://unpkg.com/grapesjs-plugin-toolbox"></script> 


  <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
  <script src="https://unpkg.com/grapesjs-templates"></script>
  <link href="https://unpkg.com/grapesjs-rte-extensions/dist/grapesjs-rte-extensions.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/grapesjs-rte-extensions"></script>
  <script src="https://unpkg.com/grapesjs-user-blocks"></script>
  <script src="https://unpkg.com/grapesjs-tabs"></script>
  <script src="https://unpkg.com/grapesjs-tooltip"></script>
  <script src="https://unpkg.com/grapesjs-script-editor"></script>
  <script src="https://unpkg.com/grapesjs-tui-image-editor"></script>
  <script>
  var grup = 52295022;
  var sky = '227410796/29293567/VjhNQm53UnFMbjMrNmRNZllxSWNSZz0';
  </script>
    <style>
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
        }
        button[type="submit"] {
            color: white;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }
        button[type="submit"]:hover {
            background-color: #388E3C;
        }
        #imageUrl {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            text-decoration: underline;
        }
        #progressBarContainer {
            width: 80%;
            margin: 20px auto;
            background-color: #ddd;
            border-radius: 13px;
            padding: 3px;
        }
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>



<style>
  body {
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    height: 100vh;
  }
  #floating-element nav ul li a {
    color: #fff; /* Белый цвет текста */
  }
  .responsive-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
  }
  .responsive-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .centered-text {
    text-align: center;
  }
  .gjs-one-bg {
    background-color: green !important;
  }
  .countdown-timer {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
  @media (max-width: 768px) {
    .responsive-image-container {
      flex-direction: column;
    }
    .responsive-image {
      width: 100%;
      margin-bottom: 20px;
    }
  }



.gjs-select option,
.gjs-field-select option,
.gjs-clm-select option,
.gjs-sm-select option,
.gjs-fields option,
.gjs-sm-unit option {
  background-color: green !important;
}


</style>

<style>
  
/* Модальный (фон) */
.modal_1 {
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_1 {
position: relative;
background-color: #fefefe;
margin: auto;
max-height: 80vh; /* Ограничиваем максимальную высоту контента */
overflow-y: 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_1;
-webkit-animation-duration: 0.4s;
animation-name: animatetop_1;
animation-duration: 0.4s
}
/* Добавить анимацию */
@-webkit-keyframes animatetop_1 {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}
@keyframes animatetop_1 {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* Кнопка закрытия */
.close_1 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_1:hover,
.close_1:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header_1 {
padding: 2px 16px;
background-color: green;
color: white;
}
.modal-body_1 {padding: 2px 16px;}
.modal-footer_1 {
padding: 2px 16px;
background-color: green;
color: white;
}
#gjs {
position: absolute;
left: 0;
transition: left 0.3s ease;
}
  #toggleAppBtn {
z-index: 1000; /* Убедитесь, что кнопка находится поверх других элементов */
}
</style>

<style>
        /* Общие стили для всех iframe */
        iframe {
            width: 100%; /* Ширина на 100% от родительского элемента */
            height: 500px; /* Фиксированная высота */
            border: none; /* Убираем границы */
        }

        /* Индивидуальные стили для каждого iframe, если необходимо */
        #iframe1 {
            /* Дополнительные стили для первого iframe */
        }

       
</style>

<style>
/* Модальный (фон) */
.modal_2 {
  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); /*Черный с непрозрачностью */
  margin-left: 10px; /* Добавленный стиль для сдвига вправо */  
}

/* Модальное содержание */
.modal-content_2 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  max-height: 80vh; /* Ограничиваем максимальную высоту контента */
  overflow-y: auto; /* Включаем вертикальную прокрутку, если содержимое больше */  
  padding: 0;
  border: 1px solid #888;
  width: 81%;
  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_2;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop_2;
  animation-duration: 0.4s
}

/* Добавить анимацию */
@-webkit-keyframes animatetop_2 {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop_2 {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* Кнопка закрытия */
.close_2 {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close_2:hover,
.close_2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header_2 {
  padding: 2px 16px;
  background-color: green;
  color: white;
}

.modal-body_2 {padding: 2px 16px;}

.modal-footer_2 {
  padding: 2px 16px;
  background-color: green;
  color: white;
}

#gjs {
  position: absolute;
  left: 0;
  transition: left 0.3s ease;
}

#toggleAppBtn {
  z-index: 1000; /* Убедитесь, что кнопка находится поверх других элементов */
}
</style>


<style>
/* Модальный (фон) */
.modal_3 {
  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_3 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  max-height: 80vh; /* Ограничиваем максимальную высоту контента */
  overflow-y: 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_3 {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop_3 {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
/* Кнопка закрытия */
.close_3 {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close_3:hover,
.close_3:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header_3 {
  padding: 2px 16px;
  background-color: green;
  color: white;
}
.modal-body_3 {padding: 2px 16px;}
.modal-footer_3 {
  padding: 2px 16px;
  background-color: green;
  color: white;
}
/* Стили для полей ввода */
.modal-body_3 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_3 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_3 input[type="text"]:focus,
.modal-body_3 textarea:focus {
  background-color: #ddd; /* Фон при фокусе */
  outline: none; /* Убирает стандартный outline */
}

/* Стили для кнопки */
.modal-body_3 button {
  background-color: green; /* Зеленый цвет фона */
  color: white; /* Белый цвет текста */
  padding: 14px 20px; /* Внутренний отступ */
  margin: 8px 0; /* Внешний отступ */
  border: none; /* Без границы */
  cursor: pointer; /* Курсор в виде указателя */
  width: 100%; /* Полная ширина */
  opacity: 0.9; /* Немного прозрачная */
}

.modal-body_3 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_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;
  max-height: 80vh; /* Ограничиваем максимальную высоту контента */
  overflow-y: 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;
  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_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>

    .input-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }
    .input-row input, .input-row textarea {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    #jsoneditor {
      width: 50%;
      height: 300px;
      margin: 20px auto;
    }
    #addVideo, #saveToClipboard {
      color: white;
      background-color: #4CAF50;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      margin-top: 20px;
    }
    #addVideo:hover, #saveToClipboard:hover {
      background-color: #388E3C;
    }
    .jsoneditor-menu {
      background-color: #4CAF50 !important;
      border-bottom: 1px solid #388E3C !important;
    }
    .jsoneditor{
      border: 1px #4CAF50 !important;
      border-bottom: 2px solid #388E3C !important;      
    }
  </style>


<style>
  /* Стили для контейнера кнопки */

  /* Стили для кнопки "Показать/Скрыть" */
  #myBtn_3 {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }


  /* Стили для кнопки "Показать/Скрыть" */
  #vkontBtn {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }

  /* Стили для кнопки "Показать/Скрыть" */
  #getBtn {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }
  /* Стили для кнопки "Показать/Скрыть" */
  #myBtn {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }
  /* Стили для кнопки "Показать/Скрыть" */
  #myBtn_2 {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }

  /* Стили для кнопки "Показать/Скрыть" */
  #myBtn_4 {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  }
  
   /* Стили для кнопки "Показать/Скрыть" */
  #myBtn_5 {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  } 


     /* Стили для кнопки "Показать/Скрыть" */
  #vk_auth_button {
    background-color: #4CAF50; /* Зелёный цвет */
    color: white;
    border: none;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* относительно длины родительского блока */     
  } 

  #vkontBtn:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  }

  #myBtn_3:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  }

  #getBtn:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  }
  #myBtn:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  }  
  #myBtn_2:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  }  
    #myBtn_4:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  } 
    #myBtn_5:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  } 

      #vk_auth_button:hover {
    background-color: #388E3C; /* Тёмно-зелёный цвет при наведении */
  } 
</style>






  
  <style>
    /* Стили для контейнера кнопки */
    .button-container {
      position: absolute;
      top: 770px;
      left: 20px;
      z-index: 100; /* Убедитесь, что кнопка находится поверх других элементов */
      background-color: transparent; /* Прозрачный фон контейнера */
      display: flex; /* Используем flexbox для горизонтального расположения */
      gap: 10px; /* Пространство между иконками */
    }

    .button-cont1, .button-cont2, .button-cont3, .button-cont4, .button-cont5   {
      padding: 10px; /* Внутренние отступы вокруг иконки */
      background-color: transparent; /* Прозрачный фон контейнера */
    }
  </style>


<style>
  /* Стили для блока, который появится справа */
  .overlay-block {

    position: fixed;
    top: 0;
    right: 0;
    width: 30%; /* Ширина 15% от дисплея */
    height: 590px;
    border: 1px solid #388E3C; /* Тёмно-зелёная рамка */
    background-color: rgba(0, 0, 0, 0.1); /* Полупрозрачный фон */
    z-index: 0; /* Убедитесь, что блок находится поверх других элементов */
  }
</style>




<style>

.mod_vk {

  z-index: 2000; /* Сидеть на вершине */

}


</style>







  
</head>
<body>








  
  <script>
  vkBridge.send('VKWebAppInit');
  </script>



<!-- Кнопка для показа/скрытия приложения -->
<div class="button-container">







  
<div class="button-con8">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg version="1.1" id="vk_auth_button" xmlns="http://www.w3.org/2000/svg" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 347.971 347.971" style="enable-background:new 0 0 347.971 347.971;" xml:space="preserve"><g><path d="M317.308,54.367C257.945,54.367,212.46,37.403,173.997,0C135.522,37.403,90.034,54.367,30.663,54.367 c0,97.406-20.158,236.937,143.334,293.604C337.465,291.304,317.308,151.773,317.308,54.367z M62.886,85.378 c35.75-3.721,66.89-13.996,94.797-31.282v109.059H64.467C61.94,137.053,62.403,110.301,62.886,85.378z M236.384,274.832 c-12.451,12.023-27.895,22.469-46.086,31.234V195.779h88.215c-1.878,8.498-4.223,16.811-7.193,24.828 C263.426,242.02,251.99,259.762,236.384,274.832z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg>



</div>

<div class="button-con1">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="myBtn_3" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m22.0773926 7.6046143c-1.7001953-3.8825684-5.5747681-6.6046143-10.0773926-6.6046143s-8.3771973 2.7220459-10.0773926 6.6046143c-.0015869.0036011-.003479.0067139-.0050049.010376-.5872192 1.3447875-.9176025 2.8262939-.9176025 4.3850097s.3303833 3.0402222.9176025 4.3850098c.0015259.0036621.003418.0067749.0050049.010376 1.7001953 3.8825683 5.5747681 6.6046142 10.0773926 6.6046142s8.3771973-2.7220459 10.0773926-6.6046143c.0015869-.0036011.003479-.0067139.0050049-.010376.5872192-1.3447875.9176025-2.8262939.9176025-4.3850097s-.3303833-3.0402222-.9176025-4.3850098c-.0015259-.0036621-.003418-.0067749-.0050049-.0103759zm-10.0773926 13.3953857c-.7915039 0-1.8123169-1.4749146-2.4360352-4h4.8720703c-.6237182 2.5250854-1.6445312 4-2.4360351 4zm-2.809082-6c-.1200562-.9163208-.190918-1.9178467-.190918-3s.0708618-2.0836792.190918-3h5.6181641c.1200561.9163208.1909179 1.9178467.1909179 3s-.0708618 2.0836792-.190918 3zm-6.190918-3c0-1.0530396.1912842-2.0599976.5251465-3h3.6586304c-.1218873.9853516-.1837769 1.9985352-.1837769 3s.0618896 2.0146484.1837769 3h-3.6586304c-.3338623-.9400024-.5251465-1.9469604-.5251465-3zm9-9c.7915039 0 1.8123169 1.4749146 2.4360352 4h-4.8720704c.6237183-2.5250854 1.6445313-4 2.4360352-4zm4.8162231 6h3.6586304c.3338623.9400024.5251465 1.9469604.5251465 3s-.1912842 2.0599976-.5251465 3h-3.6586304c.1218873-.9853516.1837769-1.9985352.1837769-3s-.0618896-2.0146484-.1837769-3zm2.6618653-2h-3.0043945c-.2769165-1.2545166-.6625977-2.4039917-1.151001-3.3565063 1.7001342.6785278 3.1484375 1.8555297 4.1553955 3.3565063zm-10.8007813-3.3565063c-.4884033.9525146-.8740844 2.1019897-1.1510009 3.3565063h-3.0043946c1.006958-1.5009766 2.4552613-2.6779785 4.1553955-3.3565063zm-4.1553955 13.3565063h3.0043945c.2769165 1.2545166.6625977 2.4039917 1.151001 3.3565063-1.7001342-.6785278-3.1484375-1.8555297-4.1553955-3.3565063zm10.8007813 3.3565063c.4884033-.9525146.8740844-2.1019897 1.1510009-3.3565063h3.0043945c-1.0069579 1.5009766-2.4552612 2.6779785-4.1553954 3.3565063z" fill="#000000" style="fill: rgb(245, 245, 245);"></path></svg>



</div>
  
<div class="button-con2">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="vkontBtn" viewBox="0 0 176 176" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g id="Layer_2" data-name="Layer 2"><g id="_11.vk" data-name="11.vk"><path id="icon" d="m88 0a88 88 0 1 0 88 88 88 88 0 0 0 -88-88zm50.72 122.44c-2.56.36-15.08 0-15.73 0a12.29 12.29 0 0 1 -8.69-3.44c-2.64-2.55-5-5.35-7.58-8a20.22 20.22 0 0 0 -2.47-2.24c-2.06-1.58-4.1-1.23-5.07 1.21a47.37 47.37 0 0 0 -1.58 8.03c-.17 2.46-1.73 4-4.49 4.17-1.71.09-3.42.13-5.11.08a38.85 38.85 0 0 1 -17.69-4.37 48.15 48.15 0 0 1 -15.13-13.22c-6.67-8.52-12-17.88-16.76-27.53-.25-.49-5.13-10.87-5.25-11.36-.44-1.63 0-3.2 1.35-3.75.86-.33 16.94 0 17.21 0a5.64 5.64 0 0 1 5.4 3.89 84 84 0 0 0 12.08 21.18 11.56 11.56 0 0 0 2.45 2.23c1.31.9 2.55.59 3.09-.93a26.28 26.28 0 0 0 1.12-6.45c.09-4.34 0-7.19-.24-11.53-.16-2.78-1.14-5.21-5.24-6-1.26-.23-1.37-1.27-.56-2.31 1.69-2.15 4-2.5 6.59-2.63 3.86-.22 7.72-.07 11.58 0h.84a23.91 23.91 0 0 1 5 .51 4.61 4.61 0 0 1 3.67 4.11 16 16 0 0 1 .25 3.32c-.1 4.73-.33 9.47-.38 14.2a24.3 24.3 0 0 0 .51 5.59c.55 2.52 2.28 3.15 4 1.33a62.34 62.34 0 0 0 6.11-7.53 75.78 75.78 0 0 0 8-15.55c1.12-2.81 2-3.43 5-3.43h17.06a10.12 10.12 0 0 1 3 .4 2.59 2.59 0 0 1 1.79 3.35c-.84 3.74-2.86 6.93-5 10-3.47 4.91-7.13 9.7-10.68 14.55a19.78 19.78 0 0 0 -1.17 1.95c-1.34 2.42-1.24 3.77.7 5.77 3.1 3.19 6.41 6.17 9.4 9.45a55.77 55.77 0 0 1 5.92 7.69c2.13 3.44.78 6.68-3.3 7.26z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></svg>

</div>

<div class="button-con3">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="getBtn" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g><path d="m179.197 251.983h-97.715c-12.991.066-12.221 21.082 0 20.827h33.958v102c-.053 9.699 29.942 9.718 30.03 0v-102h33.727c12.235.121 12.97-20.745 0-20.827z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m275.984 316.956 38.577-50.021c7.357-9.217-6.705-15.712-17.094-15.843-4.852 0-7.855 1.958-10.164 4.985l-31.417 43.612-31.416-43.612c-2.079-3.026-5.313-4.984-9.934-4.984-10.389.131-24.45 6.625-17.094 15.843l38.577 50.021-39.963 50.199c-7.007 8.877 8.466 15.725 17.787 15.843 3.696 0 6.699-1.602 8.317-3.738l33.726-45.749 33.958 45.749c6.281 9.671 34.734-1.495 26.104-12.104z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m430.751 251.983h-97.714c-12.992.066-12.222 21.082 0 20.827h33.957v102c-.053 9.698 29.941 9.719 30.03 0v-102h33.727c12.235.121 12.97-20.745 0-20.827z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m467 185.805h-14.7v-45.999c0-4.017-1.61-7.865-4.472-10.684l-126.651-124.806c-2.807-2.766-6.588-4.316-10.529-4.316h-235.648c-8.284 0-15 6.716-15 15v170.805h-15c-24.813 0-45 20.187-45 45v175.195c0 24.813 20.187 45 45 45h15v46c0 8.284 6.716 15 15 15h362.3c8.284 0 15-6.716 15-15v-46h14.7c24.813 0 45-20.187 45-45v-175.195c0-24.813-20.187-45-45-45zm-141.352-134.965 75.059 73.966h-60.059c-8.271 0-15-6.729-15-15zm-235.648-20.84h205.648v79.806c0 24.813 20.187 45 45 45h81.652v30.999h-332.3zm332.3 452h-332.3v-31h332.3zm59.7-76c0 8.271-6.729 15-15 15h-422c-8.271 0-15-6.729-15-15v-175.195c0-8.271 6.729-15 15-15h422c8.271 0 15 6.729 15 15z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg>

  
</div>  

<div class="button-con4">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="myBtn" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m30 23v5c0 1.105-.895 2-2 2h-24c-1.105 0-2-.895-2-2v-5h3v4h22v-4z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m22.788 17.212-6.788 6.788-6.788-6.788c-.447-.447-.13-1.212.502-1.212h4.286v-12c0-1.105.895-2 2-2 1.105 0 2 .895 2 2v12h4.286c.632 0 .949.765.502 1.212z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></svg>
  
</div>  

<div class="button-con5">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="myBtn_2" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m12 16c-.205 0-.401-.084-.543-.232l-5.25-5.5c-.455-.477-.114-1.268.543-1.268h2.75v-1.25c0-4.273 3.477-7.75 7.75-7.75.414 0 .75.336.75.75s-.336.75-.75.75c-1.517 0-2.75 1.233-2.75 2.75v4.75h2.75c.657 0 .998.791.543 1.268l-5.25 5.5c-.142.148-.338.232-.543.232z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m21 18h-18c-1.654 0-3 1.346-3 3s1.346 3 3 3h18c1.654 0 3-1.346 3-3s-1.346-3-3-3zm0 4.5h-10v-3h10c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></svg>  
</div>  


<div class="button-con6">
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="myBtn_4" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g><path d="m456.834 0h-401.667c-30.419 0-55.167 24.748-55.167 55.167v401.666c0 30.419 24.748 55.167 55.167 55.167h401.667c30.418 0 55.166-24.748 55.166-55.167v-401.666c0-30.419-24.748-55.167-55.166-55.167zm25.166 456.833c0 13.877-11.29 25.167-25.166 25.167h-401.667c-13.877 0-25.167-11.29-25.167-25.167v-401.666c0-13.877 11.29-25.167 25.167-25.167h401.667c13.876 0 25.166 11.29 25.166 25.167z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 208.867c-25.99 0-47.134 21.144-47.134 47.133 0 25.99 21.144 47.134 47.134 47.134 25.989 0 47.133-21.144 47.133-47.134 0-25.989-21.143-47.133-47.133-47.133zm0 64.267c-9.448 0-17.134-7.686-17.134-17.134 0-9.447 7.686-17.133 17.134-17.133 9.447 0 17.133 7.686 17.133 17.133 0 9.448-7.685 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 80.333c-25.99 0-47.134 21.144-47.134 47.134 0 25.989 21.144 47.133 47.134 47.133 25.989 0 47.133-21.144 47.133-47.133 0-25.99-21.143-47.134-47.133-47.134zm0 64.267c-9.448 0-17.134-7.686-17.134-17.133 0-9.448 7.686-17.134 17.134-17.134 9.447 0 17.133 7.686 17.133 17.134 0 9.447-7.685 17.133-17.133 17.133z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 337.4c-25.99 0-47.134 21.144-47.134 47.133 0 25.99 21.144 47.134 47.134 47.134 25.989 0 47.133-21.144 47.133-47.134 0-25.989-21.143-47.133-47.133-47.133zm0 64.267c-9.448 0-17.134-7.686-17.134-17.134 0-9.447 7.686-17.133 17.134-17.133 9.447 0 17.133 7.686 17.133 17.133 0 9.448-7.685 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 80.333h-160.667c-25.989 0-47.133 21.144-47.133 47.134 0 25.989 21.144 47.133 47.133 47.133h160.667c25.989 0 47.133-21.144 47.133-47.133-.001-25.99-21.144-47.134-47.133-47.134zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.133 0-9.448 7.686-17.134 17.133-17.134h160.667c9.447 0 17.133 7.686 17.133 17.134-.001 9.447-7.686 17.133-17.133 17.133z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 208.867h-160.667c-25.989 0-47.133 21.144-47.133 47.133 0 25.99 21.144 47.134 47.133 47.134h160.667c25.989 0 47.133-21.144 47.133-47.134-.001-25.989-21.144-47.133-47.133-47.133zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.134 0-9.447 7.686-17.133 17.133-17.133h160.667c9.447 0 17.133 7.686 17.133 17.133-.001 9.448-7.686 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 337.4h-160.667c-25.989 0-47.133 21.144-47.133 47.133 0 25.99 21.144 47.134 47.133 47.134h160.667c25.989 0 47.133-21.144 47.133-47.134-.001-25.989-21.144-47.133-47.133-47.133zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.134 0-9.447 7.686-17.133 17.133-17.133h160.667c9.447 0 17.133 7.686 17.133 17.133-.001 9.448-7.686 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path></g></svg>  
</div>  

<div class="button-con7">
 <!-- icon666.com - MILLIONS vector ICONS FREE --><svg id="myBtn_5" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="256" x2="256" y1="512" y2="0"><stop offset="0" stop-color="#5558ff"></stop><stop offset="1" stop-color="#00c0ff"></stop></linearGradient><g><g><g><path d="m306.768 67.76 22.692-46.14c2.286-4.649 2.012-10.149-.727-14.547-2.737-4.399-7.552-7.073-12.733-7.073h-120c-5.181 0-9.996 2.674-12.734 7.072s-3.013 9.898-.727 14.547l22.692 46.141c-100.818 23.301-174.231 113.448-174.231 219.24 0 124.351 100.632 225 225 225 124.351 0 225-100.632 225-225 0-105.975-73.588-195.98-174.232-219.24zm-14.861-37.76-35.907 73.011-35.907-73.011zm-78.327 272c1.863 5.254 4.677 10.058 8.233 14.213l-45.857 79.427c-29.515-21.804-49.863-55.328-54.119-93.64zm-91.742-30c4.255-38.313 24.603-71.836 54.119-93.64l45.857 79.427c-3.556 4.155-6.37 8.959-8.233 14.213zm125.944 59.234c2.667.495 5.411.766 8.218.766s5.552-.271 8.218-.766l45.867 79.444c-16.568 7.274-34.861 11.322-54.085 11.322s-37.517-4.048-54.086-11.321zm-6.782-44.234c0-8.271 6.729-15 15-15s15 6.729 15 15-6.729 15-15 15-15-6.729-15-15zm49.187 29.213c3.556-4.155 6.37-8.959 8.233-14.213h91.742c-4.255 38.313-24.603 71.836-54.119 93.64zm8.233-44.213c-1.863-5.254-4.677-10.058-8.233-14.213l45.857-79.427c29.515 21.804 49.864 55.328 54.119 93.64zm-34.201-29.234c-2.667-.495-5.411-.766-8.219-.766s-5.552.271-8.218.766l-45.867-79.444c16.568-7.274 34.861-11.322 54.085-11.322s37.517 4.048 54.086 11.321zm-8.219 239.234c-107.523 0-195-87.477-195-195 0-93.424 67.186-173.966 157.892-191.464l13.827 28.114c-80.982 11.487-141.719 81.278-141.719 163.35 0 91.148 74.19 165 165 165 90.581 0 165-73.621 165-165 0-82.185-60.848-151.878-141.719-163.35l13.827-28.114c90.706 17.498 157.892 98.04 157.892 191.464 0 107.523-87.477 195-195 195z" fill="url(#SVGID_1_)" style="fill: rgb(250, 250, 250);"></path></g></g></g></svg> 
</div>  

 
</div>



  
<div id="overlayBlock" class="overlay-block">


  <!-- Кнопка для проверки работы -->
  




</div>

  
  <div id="gjs" style="height: 90vh;"></div>

  
  <!-- The Modal -->
  <div id="myModal_1" class="modal_1">
    <!-- Модальное содержание -->
    <div class="modal-content_1">
      <div class="modal-header_1">
        <span class="close_1">&times;</span>
        <h2>Загрузка HTML на сервер</h2>
      </div>
      <div class="modal-body_1">


         <iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/user" title="Iframe Example"></iframe>   
      <br><br><br>
      </div>
      <div class="modal-footer_1">
       <br><br><br>
      </div>
    </div>
  </div>




<!-- The Modal_2 -->
<div id="myModal_2" class="modal_2">
  <!-- Модальное содержание -->
  <div class="modal-content_2">
    <div class="modal-header_2">
      <span class="close_2">&times;</span>
      <h2>Менеджер медиафайлов</h2>
    </div>
    <div class="modal-body_2">


           <iframe id="iframe2" src="https://dmtuit-psy-vk.hf.space/user" title="Iframe Example"></iframe>
            <iframe id="iframe3" src="https://dmtuit-psy-vk.hf.space/buil_json?api_sys=fasSd345D" title="Iframe Example"></iframe>    



      <br><br><br>
    </div>
    <div class="modal-footer_2">
      <br><br><br>
    </div>
  </div>
</div>






<!-- Модальное окно для добавления ссылок на Превью и скачивания документа -->
<div id="myModal_3" class="modal_3">
  <!-- Модальное содержание -->
  <div class="modal-content_3">
    <div class="modal-header_3">
      <span class="close_3">&times;</span>
      <h2>Страница для глобального размещения</h2>
    </div>
    <div class="modal-body_3">
      <div class="input-group">
        <label for="faviconUrl"><strong>URL иконки:</strong></label>
        <input type="text" id="faviconUrl" name="faviconUrl">
      </div>
      
      <div class="input-group">
        <label for="previewImageUrl"><strong>URL превью изображения:</strong></label>
        <input type="text" id="previewImageUrl" name="previewImageUrl">
      </div>
      
      <div class="input-group">
        <label for="pageTitle"><strong>Заголовок страницы:</strong></label>
        <input type="text" id="pageTitle" name="pageTitle">
      </div>
      
      <div class="input-group">
        <label for="pageDescription"><strong>Описание страницы:</strong></label>
        <textarea id="pageDescription" name="pageDescription"></textarea>
      </div>
      
      <button id="globBtn">Скачать готовую страницу</button>
      <br><br><br>
    </div>
    <div class="modal-footer_3">
      <br><br><br>
    </div>
  </div>
</div>



<!-- The Modal_4 -->
<div id="myModal_4" class="modal_4">
  <!-- Модальное содержание -->
  <div class="modal-content_4">
    <div class="modal-header_4">
      <span class="close_4">&times;</span>
      <h2>Менеджер медиафайлов</h2>
    </div>
    <div class="modal-body_4">


            <iframe src="https://dmtuit-psy-vk.hf.space/menu_json?api_sys=fasSd345D" title="Iframe Example"></iframe>   



      <br><br><br>
    </div>
    <div class="modal-footer_4">
      <br><br><br>
    </div>
  </div>
</div>


<!-- The Modal_5 -->
<div id="myModal_5" class="modal_5">
  <!-- Модальное содержание -->
  <div class="modal-content_5">
    <div class="modal-header_5">
      <span class="close_5">&times;</span>
      <h2>Менеджер медиафайлов</h2>
    </div>
    <div class="modal-body_5">


           <iframe src="https://dmtuit-psy-vk.hf.space/koleso?api_sys=fasSd345D" title="koleso"></iframe>




      <br><br><br>
    </div>
    <div class="modal-footer_5">
      <br><br><br>
    </div>
  </div>
</div>


  
<script src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/iflame_in.js"></script>









<script type="text/javascript">
  var editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: "100vh",
    storageManager: {
      type: 'local',
      autosave: true,
      autoload: true,
      stepsBeforeSave: 1,
    },
    plugins: [
      "gjs-blocks-basic",
      "grapesjs-component-countdown",
      "grapesjs-component-code-editor",
      "grapesjs-templates",
      "grapesjs-rte-extensions",
      "grapesjs-user-blocks",
      "grapesjs-tabs", // Плагин вкладок
      "grapesjs-tooltip", // Плагин подсказок
      "grapesjs-script-editor", // Плагин редактора скриптов
      "grapesjs-rulers", // Добавляем плагин линеек
      "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
    ],
    pluginsOpts: {
      "gjs-blocks-basic": {
        blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'],
        blocksBasicOpts: {
          flexGrid: true,
          stylePrefix: 'gjs-',
          columns: 12,
          rowHeight: 75,
          addBasicStyle: true
        }
      },
      "grapesjs-component-code-editor": {
        panelId: 'views-container',
        appendTo: '.gjs-pn-views-container',
        openState: { pn: '35%', cv: '65%' },
        closedState: { pn: '15%', cv: '85%' },
        codeViewOptions: {},
        preserveWidth: false,
        clearData: false,
        editJs: true,
        cleanCssBtn: true,
        htmlBtnText: 'Применить',
        cssBtnText: 'Применить',
        cleanCssBtnText: 'Удалить'
      },
      "grapesjs-templates": {
        // Настройки для grapesjs-templates
      },
      "grapesjs-rte-extensions": {
        base: {
          bold: true,
          italic: true,
          underline: true,
          strikethrough: true,
          link: true,
        },
        fonts: {
          fontColor: true,
          hilite: true,
        },
        format: {
          heading1: true,
          heading2: true,
          heading3: true,
          paragraph: true,
          clearFormatting: true,
        },
        align: true,
        darkColorPicker: true,
        maxWidth: '600px'
      },
      "grapesjs-user-blocks": {
        // Настройки для grapesjs-user-blocks
      },
      "grapesjs-tabs": {
        // Настройки для grapesjs-tabs
      },
      "grapesjs-tooltip": {
        // Настройки для grapesjs-tooltip
      },
      "grapesjs-script-editor": {
        // Настройки для grapesjs-script-editor
        starter: 'let el = this',
        toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
        scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
        toolbarBtnCustomScript: {},
        onRun: () => console.log('valid syntax'),
        onError: err => console.log('error:', err),
        modalTitle: 'Script',
        codeViewOptions: {},
        buttonLabel: 'save',
        commandAttachScript: {}
      },
      "grapesjs-rulers": {
        // Настройки для grapesjs-rulers
        dragMode: 'translate',
        rulerHeight: 15,
        canvasZoom: 94,
        rulerOpts: {}
      },
      "grapesjs-tui-image-editor": {
        config: {
          includeUI: {
            initMenu: 'filter',
          },
        },
        labelImageEditor: 'Image Editor',
        labelApply: 'Apply',
        height: '650px',
        width: '100%',
        hideHeader: true,
        addToAssets: true,
        upload: false
      }
    }
  });
</script>
<script>

  // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки
  editor.Panels.addButton('options', {
    id: 'toggle-rulers',
    label: `<svg width="16" height="16" viewBox="0 0 16 16">
              <path d="M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z"/>
              <path d="M4 3h8a1 1 0 0 1 1 1v2.5h1V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2.5h1V4a1 1 0 0 1 1-1zM3 9.5H2V12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9.5h-1V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"/>
            </svg>`,
    command: 'ruler-visibility', // Команда для переключения видимости линеек
    attributes: { title: 'Toggle Rulers' }
  });
</script>

<script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script>


  










  







  



  
<script>


    // Добавление кнопки для открытия редактора кода
    const pn = editor.Panels;
    const panelViews = pn.addPanel({
      id: "views",
    });
    panelViews.get("buttons").add([
      {
        attributes: {
          title: editor.I18n.t('panels.buttons.open-code'),
        },
        className: "fa fa-file-code-o",
        command: "open-code",
        editJs: true,
        togglable: false,
        id: "open-code",
      },
    ]);
    // Добавление команды для импорта HTML и CSS
    editor.Commands.add('gjs-open-import-webpage', {
      run(editor, sender) {
        sender && sender.set('active', 0);
        const modal = editor.Modal;
        const container = document.createElement('div');
        const importLabel = document.createElement('div');
        importLabel.innerHTML = editor.I18n.t('commands.gjs-open-import-webpage.label');
        const importInput = document.createElement('textarea');
        importInput.style.width = '100%';
        importInput.style.height = '200px';
        importInput.placeholder = 'HTML/CSS code...';
        const importButton = document.createElement('button');
        importButton.innerHTML = editor.I18n.t('panels.buttons.gjs-open-import-webpage');
        importButton.onclick = () => {
          const code = importInput.value;
          try {
            const parser = new DOMParser();
            const doc = parser.parseFromString(code, 'text/html');
            const html = doc.body.innerHTML;
            const css = Array.from(doc.querySelectorAll('style')).map(style => style.innerHTML).join('\n');
            if (html) {
              editor.setComponents(html);
              editor.setStyle(css);
              modal.close();
            }
          } catch (error) {
            console.error('Error parsing HTML/CSS:', error);
          }
        };
        container.appendChild(importLabel);
        container.appendChild(importInput);
        container.appendChild(importButton);
        modal.setTitle(editor.I18n.t('commands.gjs-open-import-webpage.title'));
        modal.setContent(container);
        modal.open();
      }
    });
    // Добавление кнопки для импорта в панель
    pn.addButton('options', {
      id: 'gjs-open-import-webpage',
      className: 'fa fa-download',
      command: 'gjs-open-import-webpage',
      attributes: {
        title: editor.I18n.t('panels.buttons.gjs-open-import-webpage'),
        'data-tooltip-pos': 'bottom',
      },
    });
    // Добавление кнопок для отмены и повтора действий
    pn.addButton('options', {
      id: 'undo',
      className: 'fa fa-undo',
      command: function() { editor.runCommand('core:undo') },
      attributes: {
        title: 'Undo',
        'data-tooltip-pos': 'bottom',
      },
    });
    pn.addButton('options', {
      id: 'redo',
      className: 'fa fa-repeat',
      command: function() { editor.runCommand('core:redo') },
      attributes: {
        title: 'Redo',
        'data-tooltip-pos': 'bottom',
      },
    });
    // Добавление кнопки для очистки всего содержимого редактора
    pn.addButton('options', {
      id: 'clear-canvas',
      className: 'fa fa-trash',
      command: 'core:canvas-clear',
      attributes: {
        title: 'Очистить холст',
        'data-tooltip-pos': 'bottom',
      },
    });
</script>




<script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/okna_prog.js"></script>




  

<script>
document.addEventListener('DOMContentLoaded', () => {

  
  // Функция для тестовой кнопки
  document.getElementById('vkontBtn').addEventListener('click', function() {
    console.log('Тестовая кнопка работает!');
    
    // Получаем HTML-код из GrapesJS
    const editor = grapesjs.editors[0]; // Предполагается, что у вас есть только один редактор
    const htmlContent = editor.getHtml();
    const cssContent = editor.getCss();
    
    // Генерация HTML-контента
    const fullHtmlContent = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Скачанная HTML-страница</title>
        <style>${cssContent}</style>
      </head>
      <body>
        ${htmlContent}
      </body>
      </html>
    `;
    
    // Скачивание файла
    const blob = new Blob([fullHtmlContent], { type: 'text/html' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'downloaded_page.html';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
});
</script>
  
<script>
document.addEventListener('DOMContentLoaded', () => {

  
  // Функция для тестовой кнопки
  document.getElementById('getBtn').addEventListener('click', function() {
    console.log('Тестовая кнопка работает!');
    
    // Получаем HTML-код и CSS из GrapesJS
    const editor = grapesjs.editors[0]; // Предполагается, что у вас есть только один редактор
    const htmlContent = editor.getHtml();
    const cssContent = editor.getCss();
    
    // Создаем строку с HTML и CSS кодом, разделенную специальным символом или строкой
    const codeContent = `
===== HTML =====
${htmlContent}

===== CSS =====
${cssContent}
`;
    
    // Скачивание файла
    const blob = new Blob([codeContent], { type: 'text/plain' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'code_content.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
});
</script>


<script>
document.addEventListener('DOMContentLoaded', () => {

  
  // Функция для тестовой кнопки
  document.getElementById('globBtn').addEventListener('click', function() {
    console.log('Тестовая кнопка работает!');
    
    // Получаем значения из полей ввода
    const faviconUrl = document.getElementById('faviconUrl').value;
    const previewImageUrl = document.getElementById('previewImageUrl').value;
    const pageTitle = document.getElementById('pageTitle').value;
    const pageDescription = document.getElementById('pageDescription').value;
    
    // Получаем HTML-код из GrapesJS
    const editor = grapesjs.editors[0]; // Предполагается, что у вас есть только один редактор
    const htmlContent = editor.getHtml();
    const cssContent = editor.getCss();
    
    // Генерация HTML-контента
    const fullHtmlContent = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="${pageDescription}">
        <meta property="og:title" content="${pageTitle}">
        <meta property="og:description" content="${pageDescription}">
        <meta property="og:image" content="${previewImageUrl}">
        <meta property="og:url" content="https://example.com">
        <title>${pageTitle}</title>
        <link rel="icon" href="${faviconUrl}" type="image/x-icon">
        <style>${cssContent}</style>
      </head>
      <body>
        ${htmlContent}
      </body>
      </html>
    `;
    
    // Скачивание файла
    const blob = new Blob([fullHtmlContent], { type: 'text/html' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'downloaded_page.html';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
});
</script>





  








  
 
</body>
</html>