Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
psy_vk
File size: 8,068 Bytes 
d444bb7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0b7b7ab
d444bb7
 
 
 
 
 
 
0b7b7ab
d444bb7
0b7b7ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d444bb7
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
 
<!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>
    /* Ваш существующий CSS */
    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; /* Отступ слева */
    }
    /* Стили для кнопки "Скачать HTML" */
    #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;">
    <!-- Ваш существующий HTML контент -->
    <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': {
          // 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
          }
        }
      }
    });

    // Обработчик для кнопки экспорта
    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>

  <!-- Функцию экспорта вынес в sav_html.js-->

</body>
</html>