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