psy_vk2

Sleeping

App Files Files Community

DmitrMakeev commited on Aug 9, 2024

Commit

c63e0f0

verified ·

1 Parent(s): dc9d768

Update builder2.html

Browse files

Files changed (1) hide show

builder2.html +63 -214

builder2.html CHANGED Viewed

@@ -1,218 +1,67 @@
 <!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>
-      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; /* Увеличение расстояния между картинками на мобильных устройствах */
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="gjs" style="height:0px; overflow:hidden;">
-      <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.
-        </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>
-    <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
-            }
-          }
-        }
-      });
-      // 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">
-            <img class="logo" src="https://via.placeholder.com/70x70.png?text=Logo" alt="Logo">
-            <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('form-block', {
-        label: 'Form',
-        content: `
-          <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>
-        `
-      });
-      editor.BlockManager.add('button-block', {
-        label: 'Add Button',
-        content: `<button class="add-button">Зарегистрироваться</button>`
-      });
-      editor.BlockManager.add('image-container-block', {
-        label: 'Image Container',
-        content: `
-          <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>
-        `
-      });
-      // Add custom style manager for image border radius
-      editor.StyleManager.addProperty('decorations', {
-        name: 'Border Radius',
-        property: 'border-radius',
-        type: 'integer',
-        units: ['px', '%'],
-        defaults: '0',
-        min: 0,
-        max: 50,
-      });
-    </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>
+  <style>
+    /* Ваш существующий CSS */
+  </style>
+</head>
+<body>
+  <div id="gjs" style="height:0px; overflow:hidden;">
+    <!-- Ваш существующий HTML контент -->
+  </div>
+  <!-- Кнопка для экспорта HTML -->
+  <button id="export-html">Export HTML</button>
+  <script type="text/javascript">
+    var editor = grapesjs.init({
+      // Ваш существующий инициализационный код
+    });
+    // Функция для экспорта HTML с дополнительными скриптами
+    function exportHtml() {
+      const htmlCode = editor.getHtml();
+      const cssCode = editor.getCss();
+      const jsCode = editor.getJs();
+      // Дополнительные скрипты
+      const additionalScripts = `
+        <script src="https://example.com/your-additional-script1.js"><\/script>
+        <script src="https://example.com/your-additional-script2.js"><\/script>
+      `;
+      // Объединение всего в один 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();
+    }
+    // Обработчик для кнопки экспорта
+    document.getElementById('export-html').addEventListener('click', exportHtml);
+  </script>
+</body>
 </html>