psy_vk

Running

File size: 46,400 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
    <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>




 



  

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GrapesJS Project</title>
  <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
  <link href="index.css" rel="stylesheet" />


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

<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>
<script src="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"></script>





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



  
/* Модальный (фон) */
.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;
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>
/* Модальный (фон) */
.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;
  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;
  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>

    .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; /* относительно длины родительского блока */     
  }

  

  #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; /* Тёмно-зелёный цвет при наведении */
  }   
</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>


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



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




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

<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://diamonik7777-up-fail.hf.space/up_page" title="Iframe Example"></iframe>   
      <br><br><br>
      </div>
      <div class="modal-footer_1">
        <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
      </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">
          <style>
        /* Общие стили для всех iframe */
        iframe {
            width: 100%; /* Ширина на 100% от родительского элемента */
            height: 500px; /* Фиксированная высота */
            border: none; /* Убираем границы */
        }

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

       
       </style>

           <iframe id="iframe2" src="https://diamonik7777-up-fail.hf.space/up_fa" 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">
      <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
    </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">
      <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
    </div>
  </div>
</div>



 <script type="text/javascript" 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>
    // Создаем новый тип компонента для настройки меню
    editor.Components.addType('menu-settings-block', {
      model: {
        defaults: {
          // HTML-код пустого блока с постоянным идентификатором
          content: '<div id="set_avp_2"></div>',
          // Скрипт для обработки блока (если нужно)
          script: function(props) {

            const initBlock = () => {
              console.log('Menu settings block initialized with props:');
            };
            const loadScript = (src, callback) => {
              const script = document.createElement('script');
              script.src = src;
              script.onload = callback;
              document.body.appendChild(script);
            };
            // Загружаем необходимые скрипты динамически
            loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/menu.js', () => {
              console.log('Custom script loaded!');
              initBlock();
            });
          },

        }
      }
    });
    // Создаем блок для компонента настройки меню
editor.Blocks.add('menu-settings-block-block', {
  label: `
    <div style="display: flex; flex-direction: column; align-items: center;">
      <!-- icon666.com - MILLIONS vector ICONS FREE --><svg enable-background="new 0 0 152 152" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g id="Layer_2" data-name="Layer 2"><path d="m28 3h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 3a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m28 13h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 13a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m28 23h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 23a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></g></svg>
      <span style="margin-top: 8px;">menu-set</span>
    </div>`,
  content: { type: 'menu-settings-block' },
});
  </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', () => {
  console.log('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', () => {
  console.log('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', () => {
  console.log('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>





  








  
  <script>
    document.getElementById('uploadForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var formData = new FormData(this);
      var request = new XMLHttpRequest();
      request.open('POST', '/up_page');
      request.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
          var percentComplete = (event.loaded / event.total) * 100;
          document.getElementById('progressBar').style.width = percentComplete + '%';
          document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
        }
      }, false);
      request.addEventListener('load', function(event) {
        var response = event.target.responseText;
        if (event.target.status === 200) {
          var fullUrl = response.split('saved to ')[1];
          document.getElementById('imageUrl').innerText = 'Click to copy URL';
          document.getElementById('imageUrl').setAttribute('data-url', fullUrl);
          Toastify({
            text: "File uploaded successfully",
            duration: 3000,
            gravity: "top",
            position: "center",
            backgroundColor: "#4CAF50",
          }).showToast();
        } else if (event.target.status === 409) {
          Toastify({
            text: "File with this name already exists",
            duration: 3000,
            gravity: "top",
            position: "center",
            backgroundColor: "#FF5733",
          }).showToast();
        }
        document.getElementById('progressBar').style.width = '0%';
        document.getElementById('progressBar').innerText = '0%';
      }, false);
      request.send(formData);
    });

    function copyToClipboard(element) {
      var tempInput = document.createElement("input");
      tempInput.value = element.getAttribute('data-url');
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);
      Toastify({
        text: "URL copied to clipboard",
        duration: 3000,
        gravity: "top",
        position: "center",
        backgroundColor: "#4CAF50",
      }).showToast();
    }
  </script>
</body>
</html>