psy_vk / builder2.html
DmitrMakeev's picture
Update builder2.html
c92b4be verified
raw
history blame
7.25 kB
<!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>
<!-- Интерфейс для выбора скриптов -->
<div>
<label><input type="checkbox" id="script1-checkbox" value="https://example.com/your-additional-script1.js"> Script 1</label>
<label><input type="checkbox" id="script2-checkbox" value="https://example.com/your-additional-script2.js"> Script 2</label>
<label><input type="checkbox" id="script3-checkbox" value="https://example.com/your-additional-script3.js"> Script 3</label>
</div>
<!-- Кнопка для экспорта HTML -->
<button id="export-html">Export HTML</button>
<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
}
}
}
});
function exportHtml() {
const htmlCode = editor.getHtml();
const cssCode = editor.getCss();
const jsCode = editor.getJs();
// Собираем выбранные скрипты
const selectedScripts = [];
if (document.getElementById('script1-checkbox').checked) {
selectedScripts.push(document.getElementById('script1-checkbox').value);
}
if (document.getElementById('script2-checkbox').checked) {
selectedScripts.push(document.getElementById('script2-checkbox').value);
}
if (document.getElementById('script3-checkbox').checked) {
selectedScripts.push(document.getElementById('script3-checkbox').value);
}
// Собираем дополнительные скрипты
const additionalScripts = selectedScripts.map(script => `<script src="${script}"><\/script>`).join('');
// Объединение всего в один HTML-файл
const fullHtml = `
<!DOCTYPE html>
<html>
<head>
<style>${cssCode}</style>
</head>
<body>
${htmlCode}
<script>${jsCode}<\/script>
${additionalScripts}
</body>
</html>
`;
// Сохранение 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>