psy_vk2

Sleeping

App Files Files Community

DmitrMakeev commited on Aug 9, 2024

Commit

f6b8a28

verified ·

1 Parent(s): c63e0f0

Update builder2.html

Browse files

Files changed (1) hide show

builder2.html +203 -3

builder2.html CHANGED Viewed

@@ -8,13 +8,213 @@
   <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 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>
   <!-- Кнопка для экспорта HTML -->
   <button id="export-html">Export HTML</button>