|
<!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; |
|
} |
|
} |
|
</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> |
|
|
|
|
|
|
|
<button id="export-html">Export HTML</button> |
|
|
|
<script type="text/javascript"> |
|
var editor = grapesjs.init({ |
|
|
|
}); |
|
|
|
|
|
function exportHtml() { |
|
const htmlCode = editor.getHtml(); |
|
const cssCode = editor.getCss(); |
|
const jsCode = editor.getJs(); |
|
|
|
|
|
const additionalScripts = ` |
|
<script src="https://example.com/your-additional-script1.js"><\/script> |
|
<script src="https://example.com/your-additional-script2.js"><\/script> |
|
`; |
|
|
|
|
|
const fullHtml = ` |
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style>${cssCode}</style> |
|
</head> |
|
<body> |
|
${htmlCode} |
|
<script>${jsCode}<\/script> |
|
${additionalScripts} |
|
</body> |
|
</html> |
|
`; |
|
|
|
|
|
const blob = new Blob([fullHtml], { type: 'text/html' }); |
|
const url = URL.createObjectURL(blob); |
|
const a = document.createElement('a'); |
|
a.href = url; |
|
a.download = 'page.html'; |
|
a.click(); |
|
} |
|
|
|
|
|
document.getElementById('export-html').addEventListener('click', exportHtml); |
|
</script> |
|
</body> |
|
</html> |
