Update builder2.html

builder2.html

@@ -100,4 +100,147 @@
         max-width: 700px;
         border-radius: 3px;
         padding: 30px 20px;
-        margin: 150px auto 0
+        margin: 150px auto 0px;
+        background-color: #d983a6;
+        box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
+        color: rgba(255,255,255,0.75);
+        font: caption;
+        font-weight: 100;
+        text-align: center;
+      }
+      .welcome {
+        text-align: center;
+        font-weight: 100;
+        margin: 0px;
+      }
+      .logo {
+        width: 70px;
+        height: 70px;
+        vertical-align: middle;
+        border-radius: 50%; /* Скругление углов для логотипа */
+      }
+      .big-title {
+        text-align: center;
+        font-size: 3.5rem;
+        margin: 15px 0;
+      }
+      .description {
+        text-align: justify;
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+      .centered-form {
+        display: inline-block;
+        text-align: left;
+      }
+      .centered-form input {
+        display: block;
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .checkbox-label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        padding: 0;
+      }
+      .checkbox-label input[type="checkbox"] {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        flex-basis: 0;
+        autocomplete: off;
+      }
+      .checkbox-label span {
+        margin-left: 15px; /* Добавление отступа справа */
+      }
+      .add-button {
+        display: block;
+        margin: 20px auto 0;
+        padding: 10px 20px;
+        font-size: 1rem;
+        color: #fff;
+        background-color: #007bff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    </style>
+  </div>
+
+  <!-- Интерфейс для выбора скриптов -->
+  <div class="controls-container">
+    <label><input type="checkbox" id="script1-checkbox" value="https://example.com/your-additional-script1.js" checked> Соб. хост</label>
+    <label><input type="checkbox" id="script2-checkbox" value="https://example.com/your-additional-script2.js"> ВК + АП</label>
+    <label><input type="checkbox" id="script3-checkbox" value="https://example.com/your-additional-script3.js"> Виджет Тильда</label>
+    <label><input type="checkbox" id="script4-checkbox" value="https://example.com/your-additional-script4.js"> Виджет Геткурс</label>
+    <button id="export-html">Скачать HTML</button>
+  </div>
+
+  <script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/sav_html.js"></script>
+
+  <script type="text/javascript">
+    var editor = grapesjs.init({
+      showOffsets: 1,
+      noticeOnUnload: 0,
+      container: '#gjs',
+      height: '100%',
+      fromElement: true,
+      storageManager: { autoload: 0 },
+      plugins: ['grapesjs-plugin-forms', 'grapesjs-custom-code', 'grapesjs-component-code-editor'],
+      pluginsOpts: {
+        'grapesjs-plugin-forms': {
+          // options
+        },
+        'grapesjs-custom-code': {
+          blockCustomCode: {
+            label: 'Custom Code',
+            category: 'Extra',
+            attributes: { class: 'fa fa-code' }
+          },
+          modalTitle: 'Insert your code',
+          buttonLabel: 'Save',
+          placeholderScript: '// Your JavaScript code here', // Плейсхолдер для скрипта
+          codeViewOptions: {
+            theme: 'hopscotch',
+            readOnly: 0
+          }
+        },
+        'grapesjs-component-code-editor': {
+          // options
+        }
+      }
+    });
+
+    // Добавляем команду для открытия редактора кода
+    editor.Commands.add('open-code', {
+      run: function(editor) {
+        editor.runCommand('open-code-editor');
+      }
+    });
+
+    // Добавляем кнопку для открытия редактора кода
+    const pn = editor.Panels;
+    const panelViews = pn.addPanel({
+      id: "views",
+    });
+    panelViews.get("buttons").add([
+      {
+        attributes: {
+          title: "Open Code",
+        },
+        className: "fa fa-file-code-o",
+        command: "open-code",
+        togglable: false, // Не закрывать при повторном нажатии
+        id: "open-code",
+      },
+    ]);
+
+    // Обработчик для кнопки экспорта
+    document.getElementById('export-html').addEventListener('click', exportHtml);
+  </script>
+
+  <!-- Функцию экспорта вынес в sav_html.js-->
+
+</body>
+</html>