| <!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> |
