| | <!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; |
| | } |
| | } |
| | |
| | .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" 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, 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': { |
| | |
| | }, |
| | '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> |
| |
|
| | |
| |
|
| | </body> |
| | </html> |
