builder2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GrapesJS with Forms Plugin</title>
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
  <script src="https://unpkg.com/grapesjs"></script>
  <script src="https://unpkg.com/grapesjs-plugin-forms"></script>
  <script src="https://unpkg.com/grapesjs-custom-code"></script>
  <style>
    /* Ваш существующий CSS */
    body, html {
      height: 100%;
      margin: 0;
    }
    .image-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px; /* Поднятие картинок выше формы */
    }
    .image-container img {
      width: 30%;
      height: auto;
      margin: 0 10px; /* Увеличение расстояния между картинками */
    }
    @media (max-width: 768px) {
      .image-container {
        flex-direction: column;
      }
      .image-container img {
        width: 100%;
        margin: 10px 0; /* Увеличение расстояния между картинками на мобильных устройствах */
      }
    }
    /* Стили для контейнера управления */
    .controls-container {
      background-color: #302f2f; /* Черный фон контейнера */
      padding: 15px 0; /* Отступы сверху и снизу */
      text-align: center; /* Выравнивание по центру */
    }
    .controls-container label,
    .controls-container button {
      margin-left: 15px; /* Отступ слева */
    }
    /* Стили для кнопки "Скачать HTML" */
    #export-html {
      background-color: #ccc; /* Серый фон кнопки */
      color: #000; /* Черный цвет текста кнопки */
      border: none;
      padding: 10px 15px; /* Размер кнопки */
      font-size: 16px; /* Размер текста кнопки */
      cursor: pointer;
      border-radius: 5px; /* Скругление углов */
      transition: background-color 0.3s ease; /* Плавный переход при наведении */
    }
    #export-html:hover {
      background-color: #bbb; /* Фон кнопки при наведении */
    }
    /* Стили для надписей возле галочек */
    .controls-container label {
      color: #fff; /* Белый цвет текста */
    }
  </style>
</head>
<body>
  <div id="gjs" style="height:0px; overflow:hidden;">
    <!-- Ваш существующий HTML контент -->
    <div class="panel">
      <h1 class="welcome">Добро пожаловать!</h1>
      <div class="big-title">
        <img class="logo" src="https://via.placeholder.com/70x70.png?text=Logo" alt="Logo">
        <span>Конструктор лендингов и подписных ВК</span>
      </div>
      <div class="description">
        В связке с WhatsMasterCRM, VK Mini Apps, Автопилот. Ботхелп. Тильда, Геткурс.
      </div>
      <form class="centered-form">
        <input type="text" name="name" placeholder="Имя">
        <input type="email" name="email" placeholder="Email">
        <input type="tel" name="phone" placeholder="Телефон">
        <label class="checkbox-label"><input type="checkbox" name="subscribe" autocomplete="off"> I agree to the newsletter</label>
      </form>
      <button class="add-button">Зарегистрироваться</button>
      <div class="image-container">
        <img src="https://via.placeholder.com/150" alt="Placeholder Image 1">
        <img src="https://via.placeholder.com/150" alt="Placeholder Image 2">
        <img src="https://via.placeholder.com/150" alt="Placeholder Image 3">
      </div>
    </div>
    <style>
      .panel {
        width: 90%;
        max-width: 700px;
        border-radius: 3px;
        padding: 30px 20px;
        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'],
      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
          }
        }
      }
    });

    // Обработчик для кнопки экспорта
    document.getElementById('export-html').addEventListener('click', function() {
      var html = editor.getHtml();
      var css = editor.getCss();
      var js = editor.getJs();
      var fullHtml = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Exported Page</title>
          <style>${css}</style>
        </head>
        <body>
          ${html}
          <script>${js}</script>
        </body>
        </html>
      `;
      var blob = new Blob([fullHtml], { type: 'text/html' });
      saveAs(blob, 'exported-page.html');
    });
  </script>

  <!-- Функцию экспорта вынес в sav_html.js-->

</body>
</html>