psy_vk

Paused

App Files Files Community

DmitrMakeev commited on Aug 9, 2024

Commit

4a4339a

verified ·

1 Parent(s): 60a5e51

Update builder.html

Browse files

Files changed (1) hide show

builder.html +262 -216

builder.html CHANGED Viewed

@@ -1,236 +1,282 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>GrapesJS</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-custom-code/dist/grapesjs-custom-code.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <style>
-      body,
-      html {
-        height: 100%;
         margin: 0;
       }
     </style>
-  </head>
-  <body>
-    <div id="gjs" style="height:0px; overflow:hidden;">
-      <div class="panel">
-        <h1 class="welcome">Welcome to</h1>
-        <div class="big-title">
-          <svg class="logo" viewBox="0 0 100 100">
-            <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
-          </svg>
-          <span>GrapesJS</span>
-        </div>
-        <div class="description">
-          This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
-          copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
-        </div>
-        <button class="add-button" onclick="addCustomScript()">Добавить свой скрипт</button>
-        <button class="add-button" onclick="exportHtml()">Скачать HTML</button>
-      </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;
-        }
-        .welcome {
-          text-align: center;
-          font-weight: 100;
-          margin: 0px;
-        }
-        .logo {
-          width: 70px;
-          height: 70px;
-          vertical-align: middle;
-        }
-        .logo path {
-          pointer-events: none;
-          fill: none;
-          stroke-linecap: round;
-          stroke-width: 7;
-          stroke: #fff
-        }
-        .big-title {
-          text-align: center;
-          font-size: 3.5rem;
-          margin: 15px 0;
-        }
-        .description {
-          text-align: justify;
-          font-size: 1rem;
-          line-height: 1.5rem;
-        }
-        .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>
-    <script type="text/javascript">
-      var editor = grapesjs.init({
-        showOffsets: 1,
-        noticeOnUnload: 0,
-        container: '#gjs',
-        height: '100%',
-        fromElement: true,
-        storageManager: { autoload: 0 },
-        styleManager : {
-          sectors: [{
-              name: 'General',
-              open: false,
-              buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
-            },{
-              name: 'Flex',
-              open: false,
-              buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
-            },{
-              name: 'Dimension',
-              open: false,
-              buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-            },{
-              name: 'Typography',
-              open: false,
-              buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
-            },{
-              name: 'Decorations',
-              open: false,
-              buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
-            },{
-              name: 'Extra',
-              open: false,
-              buildProps: ['transition', 'perspective', 'transform'],
-            }
-          ],
         },
-      });
-      // Add blocks for each element
-      editor.BlockManager.add('welcome-block', {
-        label: 'Welcome Title',
-        content: `<h1 class="welcome">Welcome to</h1>`
-      });
-      editor.BlockManager.add('big-title-block', {
-        label: 'Big Title',
-        content: `
-          <div class="big-title">
-            <svg class="logo" viewBox="0 0 100 100">
-              <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
-            </svg>
-            <span>GrapesJS</span>
-          </div>
-        `
-      });
-      editor.BlockManager.add('description-block', {
-        label: 'Description',
-        content: `<div class="description">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div>`
-      });
-      editor.BlockManager.add('button-block', {
-        label: 'Add Button',
-        content: `<button class="add-button">Ещё добавь</button>`
-      });
-    </script>
-    <script type="text/javascript">
-      var editor = grapesjs.init({
-          container : '#gjs',
-          ...
-          plugins: ['grapesjs-custom-code'],
-          pluginsOpts: {
-            'grapesjs-custom-code': {
-              // options
-            }
           }
       });
-    </script>
-    <script>
-      function addCustomScript() {
-        Swal.fire({
-          title: 'Добавить свой скрипт',
-          input: 'textarea',
-          inputPlaceholder: 'Введите ваш скрипт здесь...',
-          showCancelButton: true,
-          confirmButtonText: 'Добавить',
-          cancelButtonText: 'Отмена',
-          inputValidator: (value) => {
-            if (!value) {
-              return 'Вы должны ввести скрипт!'
-            }
-          }
-        }).then((result) => {
-          if (result.isConfirmed) {
-            const script = `<script>${result.value}<\/script>`;
-            const htmlCode = editor.getHtml();
-            const newHtml = htmlCode + script;
-            editor.setComponents(newHtml);
-          }
-        });
       }
-      function exportHtml() {
-        const htmlCode = editor.getHtml();
-        const cssCode = editor.getCss();
-        const jsCode = editor.getJs();
-        // Собираем выбранные скрипты
-        const selectedScripts = [];
-        if (document.getElementById('script1-checkbox').checked) {
-          selectedScripts.push(document.getElementById('script1-checkbox').value);
-        }
-        if (document.getElementById('script2-checkbox').checked) {
-          selectedScripts.push(document.getElementById('script2-checkbox').value);
-        }
-        if (document.getElementById('script3-checkbox').checked) {
-          selectedScripts.push(document.getElementById('script3-checkbox').value);
-        }
-        // Собираем дополнительные скрипты
-        const additionalScripts = selectedScripts.map(script => `<script src="${script}"><\/script>`).join('');
-        // Объединение всего в один HTML-файл
-        const fullHtml = `
-          <!DOCTYPE html>
-          <html>
-          <head>
-            <style>${cssCode}</style>
-          </head>
-          <body>
-            ${htmlCode}
-            <script>${jsCode}<\/script>
-            ${additionalScripts}
-          </body>
-          </html>
-        `;
-        // Сохранение HTML-файла
-        const blob = new Blob([fullHtml], { type: 'text/html' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'page.html';
-        a.click();
-      }
-    </script>
-  </body>
 </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>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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="add-custom-script">Добавить свой скрипт</button>
+    <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('add-custom-script').addEventListener('click', function() {
+      Swal.fire({
+        title: 'Добавить свой скрипт',
+        input: 'textarea',
+        inputPlaceholder: 'Введите ваш скрипт здесь...',
+        showCancelButton: true,
+        confirmButtonText: 'Добавить',
+        cancelButtonText: 'Отмена',
+        inputValidator: (value) => {
+          if (!value) {
+            return 'Вы должны ввести скрипт!'
           }
+        }
+      }).then((result) => {
+        if (result.isConfirmed) {
+          const script = `<script>${result.value}<\/script>`;
+          const htmlCode = editor.getHtml();
+          const newHtml = htmlCode + script;
+          editor.setComponents(newHtml);
+        }
       });
+    });
+    document.getElementById('export-html').addEventListener('click', function() {
+      const htmlCode = editor.getHtml();
+      const cssCode = editor.getCss();
+      const jsCode = editor.getJs();
+      // Собираем выбранные скрипты
+      const selectedScripts = [];
+      if (document.getElementById('script1-checkbox').checked) {
+        selectedScripts.push(document.getElementById('script1-checkbox').value);
+      }
+      if (document.getElementById('script2-checkbox').checked) {
+        selectedScripts.push(document.getElementById('script2-checkbox').value);
+      }
+      if (document.getElementById('script3-checkbox').checked) {
+        selectedScripts.push(document.getElementById('script3-checkbox').value);
+      }
+      if (document.getElementById('script4-checkbox').checked) {
+        selectedScripts.push(document.getElementById('script4-checkbox').value);
       }
+      // Собираем дополнительные скрипты
+      const additionalScripts = selectedScripts.map(script => `<script src="${script}"><\/script>`).join('');
+      // Объединение всего в один HTML-файл
+      const fullHtml = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <style>${cssCode}</style>
+        </head>
+        <body>
+          ${htmlCode}
+          <script>${jsCode}<\/script>
+          ${additionalScripts}
+        </body>
+        </html>
+      `;
+      // Сохранение HTML-файла
+      const blob = new Blob([fullHtml], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'page.html';
+      a.click();
+    });
+  </script>
+  <!-- Функцию экспорта вынес в sav_html.js-->
+</body>
 </html>