psy_vk

Running

App Files Files Community

DmitrMakeev commited on Aug 11, 2024

Commit

fcdf023

verified ·

1 Parent(s): 9f78b5a

Update builder2.html

Browse files

Files changed (1) hide show

builder2.html +96 -236

builder2.html CHANGED Viewed

@@ -1,246 +1,106 @@
 <!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>
-  <!-- Change code view -->
-  <script src="https://unpkg.com/grapesjs-parser-postcss"></script>
-  <link
-    href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"
-    rel="stylesheet"
-  />
-  <script src="https://unpkg.com/grapesjs-component-code-editor"></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', '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>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GrapesJS with Code Editor</title>
+    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/grapesjs"></script>
+    <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
+    <style>
+        body, html {
+            margin: 0;
+            height: 100%;
+        }
+        #gjs {
+            height: 100vh;
+        }
+        .controls-container {
+            background-color: #302f2f;
+            padding: 15px 0;
+            text-align: center;
+        }
+        .controls-container label,
+        .controls-container button {
+            margin-left: 15px;
+        }
+        #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"></div>
+    <div class="controls-container">
+        <button id="export-html">Скачать HTML</button>
     </div>
+    <script>
+        var editor = grapesjs.init({
+            container: '#gjs',
+            height: '100%',
+            fromElement: true,
+            storageManager: false,
+            plugins: ['grapesjs-component-code-editor'],
+            pluginsOpts: {
+                'grapesjs-component-code-editor': {
+                    panelId: 'views-container', // ID панель, куда добавляется редактор кода
+                    codeViewOptions: {
+                        theme: 'hopscotch', // Тема редактора кода
+                    }
+                }
+            },
+            panels: {
+                defaults: [
+                    {
+                        id: 'views',
+                        buttons: [
+                            {
+                                attributes: { title: 'Open Code' },
+                                className: 'fa fa-code',
+                                command: 'open-code',
+                                id: 'open-code'
+                            }
+                        ],
+                        appendTo: '.gjs-pn-views-container'
+                    }
+                ]
+            }
+        });
+        // Добавление команды 'open-code', если это необходимо
+        editor.Commands.add('open-code', {
+            run: function(editor) {
+                editor.runCommand('open-code-editor');
+            }
+        });
+        // Обработчик для кнопки экспорта
+        document.getElementById('export-html').addEventListener('click', function() {
+            var html = editor.getHtml();
+            var css = editor.getCss();
+            var blob = new Blob(['<html><head><style>' + css + '</style></head><body>' + html + '</body></html>'], { type: 'text/html' });
+            var link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = 'page.html';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+    </script>
 </body>
+</html>