Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
dad96b2
·
verified ·
1 Parent(s): d0b109e

Update builder2.html

Browse files
Files changed (1) hide show
  1. builder2.html +191 -121
builder2.html CHANGED
@@ -1,141 +1,211 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Document</title>
8
- <link
9
- href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
10
- rel="stylesheet"
11
- />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  <style>
13
- html,
14
- body {
15
- margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  padding: 0;
17
- box-sizing: border-box;
18
  }
19
- #save-button {
20
- position: fixed;
21
- bottom: 20px;
22
- right: 20px;
 
 
 
 
 
 
 
 
 
23
  padding: 10px 20px;
 
 
24
  background-color: #007bff;
25
- color: white;
26
  border: none;
27
  border-radius: 5px;
28
  cursor: pointer;
29
- z-index: 999; /* Устанавливаем z-index на 999 */
30
  }
31
  </style>
32
- </head>
33
- <body>
34
- <button id="save-button">Сохранить страницу</button>
35
- <div id="gjs"></div>
36
 
37
- <script type="text/javascript" src="https://unpkg.com/grapesjs"></script>
38
- <script
39
- type="text/javascript"
40
- src="https://unpkg.com/grapesjs-blocks-basic"
41
- ></script>
42
- <script
43
- type="text/javascript"
44
- src="https://unpkg.com/[email protected]"
45
- ></script>
46
- <script
47
- type="text/javascript"
48
- src="https://unpkg.com/[email protected]"
49
- ></script>
50
- <script
51
- type="text/javascript"
52
- src="https://unpkg.com/[email protected]"
53
- ></script>
54
- <script
55
- type="text/javascript"
56
- src="https://unpkg.com/[email protected]"
57
- ></script>
58
- <script
59
- type="text/javascript"
60
- src="https://unpkg.com/[email protected]"
61
- ></script>
62
- <script
63
- type="text/javascript"
64
- src="https://unpkg.com/[email protected]"
65
- ></script>
66
- <script
67
- type="text/javascript"
68
- src="https://unpkg.com/[email protected]"
69
- ></script>
70
 
71
- <!-- Change code view -->
72
- <script src="https://unpkg.com/grapesjs-parser-postcss"></script>
73
- <link
74
- href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"
75
- rel="stylesheet"
76
- />
77
- <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
78
 
79
- <link rel="stylesheet" href="https://unpkg.com/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css">
80
- <script src="https://unpkg.com/grapesjs-preset-newsletter@0.2.21/dist/grapesjs-preset-newsletter.min.js"></script>
81
-
82
- <script type="text/javascript">
83
- var editor = grapesjs.init({
84
- container: "#gjs",
85
- components: '<div class="text-red">Welcome</div>',
86
- style: ".text-red{color: red}",
87
- storageManager: false,
88
- plugins: [
89
- "gjs-blocks-basic",
90
- "grapesjs-plugin-export",
91
- "grapesjs-tabs",
92
- "grapesjs-custom-code",
93
- "grapesjs-tui-image-editor",
94
- "grapesjs-typed",
95
- "grapesjs-style-bg",
96
- "grapesjs-preset-webpage",
97
- "grapesjs-component-code-editor",
98
- "grapesjs-parser-postcss",
99
- 'gjs-preset-newsletter'
100
- ],
101
- pluginsOpts: {
102
- "gjs-blocks-basic": {},
103
- "grapesjs-component-code-editor": {
104
- /* Test here your options */
105
- },
106
- 'gjs-preset-newsletter': {
107
- modalTitleImport: 'Import template',
108
- // ... other options
109
- }
110
  },
111
- });
112
-
113
- const pn = editor.Panels;
114
- const panelViews = pn.addPanel({
115
- id: "views",
116
- });
117
- panelViews.get("buttons").add([
118
- {
119
- attributes: {
120
- title: "Open Code",
121
  },
122
- className: "fa fa-file-code-o",
123
- command: "open-code",
124
- togglable: false, //do not close when button is clicked again
125
- id: "open-code",
126
- },
127
- ]);
 
 
 
 
 
 
 
128
 
129
- document.querySelector("#save-button").onclick = () => {
130
- var reg = /\<body[^>]*\>([^]*)\<\/body/m;
131
- var htmlWithCss = editor.runCommand('gjs-get-inlined-html');
132
- let withoutBodyTag = htmlWithCss.match(reg)[1];
133
- console.log('СОХРАНЕНО ->', withoutBodyTag)
134
- };
135
 
136
- window.onload = () => {
137
- editor.setComponents("<p>asdasd</p>");
138
- };
139
- </script>
140
- </body>
141
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>GrapesJS with Forms Plugin</title>
6
+ <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
7
+ <script src="https://unpkg.com/grapesjs"></script>
8
+ <script src="https://unpkg.com/grapesjs-plugin-forms"></script>
9
+ <script src="https://unpkg.com/grapesjs-custom-code"></script>
10
+ <style>
11
+ /* Ваш существующий CSS */
12
+ body, html {
13
+ height: 100%;
14
+ margin: 0;
15
+ }
16
+ .image-container {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ margin-top: 20px; /* Поднятие картинок выше формы */
20
+ }
21
+ .image-container img {
22
+ width: 30%;
23
+ height: auto;
24
+ margin: 0 10px; /* Увеличение расстояния между картинками */
25
+ }
26
+ @media (max-width: 768px) {
27
+ .image-container {
28
+ flex-direction: column;
29
+ }
30
+ .image-container img {
31
+ width: 100%;
32
+ margin: 10px 0; /* Увеличение расстояния между картинками на мобильных устройствах */
33
+ }
34
+ }
35
+ /* Стили для контейнера управления */
36
+ .controls-container {
37
+ background-color: #302f2f; /* Черный фон контейнера */
38
+ padding: 15px 0; /* Отступы сверху и снизу */
39
+ text-align: center; /* Выравнивание по центру */
40
+ }
41
+ .controls-container label,
42
+ .controls-container button {
43
+ margin-left: 15px; /* Отступ слева */
44
+ }
45
+ /* Стили для кнопки "Скачать HTML" */
46
+ #export-html {
47
+ background-color: #ccc; /* Серый фон кнопки */
48
+ color: #000; /* Черный цвет текста кнопки */
49
+ border: none;
50
+ padding: 10px 15px; /* Размер кнопки */
51
+ font-size: 16px; /* Размер текста кнопки */
52
+ cursor: pointer;
53
+ border-radius: 5px; /* Скругление углов */
54
+ transition: background-color 0.3s ease; /* Плавный переход при наведении */
55
+ }
56
+ #export-html:hover {
57
+ background-color: #bbb; /* Фон кнопки при наведении */
58
+ }
59
+ /* Стили для надписей возле галочек */
60
+ .controls-container label {
61
+ color: #fff; /* Белый цвет текста */
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div id="gjs" style="height:0px; overflow:hidden;">
67
+ <!-- Ваш существующий HTML контент -->
68
+ <div class="panel">
69
+ <h1 class="welcome">Добро пожаловать!</h1>
70
+ <div class="big-title">
71
+ <img class="logo" src="https://via.placeholder.com/70x70.png?text=Logo" alt="Logo">
72
+ <span>Конструктор лендингов и подписных ВК</span>
73
+ </div>
74
+ <div class="description">
75
+ В связке с WhatsMasterCRM, VK Mini Apps, Автопилот. Ботхелп. Тильда, Геткурс.
76
+ </div>
77
+ <form class="centered-form">
78
+ <input type="text" name="name" placeholder="Имя">
79
+ <input type="email" name="email" placeholder="Email">
80
+ <input type="tel" name="phone" placeholder="Телефон">
81
+ <label class="checkbox-label"><input type="checkbox" name="subscribe" autocomplete="off"> I agree to the newsletter</label>
82
+ </form>
83
+ <button class="add-button">Зарегистрироваться</button>
84
+ <div class="image-container">
85
+ <img src="https://via.placeholder.com/150" alt="Placeholder Image 1">
86
+ <img src="https://via.placeholder.com/150" alt="Placeholder Image 2">
87
+ <img src="https://via.placeholder.com/150" alt="Placeholder Image 3">
88
+ </div>
89
+ </div>
90
  <style>
91
+ .panel {
92
+ width: 90%;
93
+ max-width: 700px;
94
+ border-radius: 3px;
95
+ padding: 30px 20px;
96
+ margin: 150px auto 0px;
97
+ background-color: #d983a6;
98
+ box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
99
+ color: rgba(255,255,255,0.75);
100
+ font: caption;
101
+ font-weight: 100;
102
+ text-align: center;
103
+ }
104
+ .welcome {
105
+ text-align: center;
106
+ font-weight: 100;
107
+ margin: 0px;
108
+ }
109
+ .logo {
110
+ width: 70px;
111
+ height: 70px;
112
+ vertical-align: middle;
113
+ border-radius: 50%; /* Скругление углов для логотипа */
114
+ }
115
+ .big-title {
116
+ text-align: center;
117
+ font-size: 3.5rem;
118
+ margin: 15px 0;
119
+ }
120
+ .description {
121
+ text-align: justify;
122
+ font-size: 1rem;
123
+ line-height: 1.5rem;
124
+ }
125
+ .centered-form {
126
+ display: inline-block;
127
+ text-align: left;
128
+ }
129
+ .centered-form input {
130
+ display: block;
131
+ width: 100%;
132
+ margin-bottom: 10px;
133
+ }
134
+ .checkbox-label {
135
+ display: flex;
136
+ align-items: center;
137
+ margin-bottom: 10px;
138
  padding: 0;
 
139
  }
140
+ .checkbox-label input[type="checkbox"] {
141
+ margin: 0;
142
+ width: 100%;
143
+ height: 100%;
144
+ flex-basis: 0;
145
+ autocomplete: off;
146
+ }
147
+ .checkbox-label span {
148
+ margin-left: 15px; /* Добавление отступа справа */
149
+ }
150
+ .add-button {
151
+ display: block;
152
+ margin: 20px auto 0;
153
  padding: 10px 20px;
154
+ font-size: 1rem;
155
+ color: #fff;
156
  background-color: #007bff;
 
157
  border: none;
158
  border-radius: 5px;
159
  cursor: pointer;
 
160
  }
161
  </style>
162
+ </div>
 
 
 
163
 
164
+ <!-- Интерфейс для выбора скриптов -->
165
+ <div class="controls-container">
166
+ <label><input type="checkbox" id="script1-checkbox" value="https://example.com/your-additional-script1.js" checked> Соб. хост</label>
167
+ <label><input type="checkbox" id="script2-checkbox" value="https://example.com/your-additional-script2.js"> ВК + АП</label>
168
+ <label><input type="checkbox" id="script3-checkbox" value="https://example.com/your-additional-script3.js"> Виджет Тильда</label>
169
+ <label><input type="checkbox" id="script4-checkbox" value="https://example.com/your-additional-script4.js"> Виджет Геткурс</label>
170
+ <button id="export-html">Скачать HTML</button>
171
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
 
173
+ <script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/sav_html.js"></script>
 
 
 
 
 
 
174
 
175
+ <script type="text/javascript">
176
+ var editor = grapesjs.init({
177
+ showOffsets: 1,
178
+ noticeOnUnload: 0,
179
+ container: '#gjs',
180
+ height: '100%',
181
+ fromElement: true,
182
+ storageManager: { autoload: 0 },
183
+ plugins: ['grapesjs-plugin-forms', 'grapesjs-custom-code'],
184
+ pluginsOpts: {
185
+ 'grapesjs-plugin-forms': {
186
+ // options
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
187
  },
188
+ 'grapesjs-custom-code': {
189
+ blockCustomCode: {
190
+ label: 'Custom Code',
191
+ category: 'Extra',
192
+ attributes: { class: 'fa fa-code' }
 
 
 
 
 
193
  },
194
+ modalTitle: 'Insert your code',
195
+ buttonLabel: 'Save',
196
+ placeholderScript: '// Your JavaScript code here', // Плейсхолдер для скрипта
197
+ codeViewOptions: {
198
+ theme: 'hopscotch',
199
+ readOnly: 0
200
+ }
201
+ }
202
+ }
203
+ });
204
+ // Обработчик для кнопки экспорта
205
+ document.getElementById('export-html').addEventListener('click', exportHtml);
206
+ </script>
207
 
208
+ <!-- Функцию экспорта вынес в sav_html.js-->
 
 
 
 
 
209
 
210
+ </body>
 
 
 
 
211
  </html>