Update pages.html

pages.html

@@ -518,7 +518,123 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
       <h2>HTMLешка</h2>
     </div>
     <div class="modal-body_3">
-      <iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/buil_json?api_sys=fasSd345D" title="Iframe Example"></iframe>
+        <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 0;
+      max-height: 250px; /* Устанавливаем максимальную высоту страницы */
+    }
+    h1 {
+      background-color: #4CAF50;
+      color: white;
+      padding: 20px;
+      margin: 0;
+      border-bottom: 2px solid #388E3C;
+    }
+    .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>
+
+  <h1>Редактор медиа листов</h1>
+  <div>
+    <div class="input-row">
+      <label for="title">Название:</label>
+      <input type="text" id="title" placeholder="Введите название">
+      <label for="file">Ссылка на файл:</label>
+      <input type="text" id="file" placeholder="Введите ссылку">
+    </div>
+    <button id="addVideo">Добавить медиа</button>
+    <button id="saveToClipboard">Сохранить в буфер обмена</button>
+  </div>
+  <div id="jsoneditor"></div>
+   
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
+       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+  <script>
+document.addEventListener('DOMContentLoaded', function() {
+  const container = document.getElementById('jsoneditor');
+  const options = {
+    mode: 'code',
+    modes: ['code', 'tree'],
+    onError: function(err) {
+      alert(err.toString());
+    }
+  };
+  const editor = new JSONEditor(container, options);
+  let videoList = [];
+  editor.set(videoList);
+  document.getElementById('addVideo').addEventListener('click', function() {
+    const title = document.getElementById('title').value;
+    const file = document.getElementById('file').value;
+    if (title && file) {
+      videoList.push({ title, file });
+      editor.set(videoList);
+      document.getElementById('title').value = '';
+      document.getElementById('file').value = '';
+    } else {
+      alert('Please fill in both title and file URL.');
+    }
+  });
+document.getElementById('saveToClipboard').addEventListener('click', function() {
+  const json = editor.get();
+  const jsonString = JSON.stringify(json, null, 2); // Добавляем отступы для читаемости
+  navigator.clipboard.writeText(jsonString).then(function() {
+    Toastify({
+      text: "Видеолист скопирован!",
+      duration: 3000, // Показывать 3 секунды
+      newWindow: true,
+      close: true,
+      gravity: "top", // Показывать сверху
+      position: "center", // Позиционировать по центру
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+      stopOnFocus: true // Останавливать таймер при фокусе на сообщении
+    }).showToast();
+  }, function(err) {
+    console.error('Could not copy text: ', err);
+  });
+});
+});
+    
+  </script>
       <br><br><br>
     </div>
     <div class="modal-footer_3">