Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
98d62da
·
verified ·
1 Parent(s): 6d9795e

Update pages.html

Browse files
Files changed (1) hide show
  1. pages.html +98 -3
pages.html CHANGED
@@ -363,6 +363,39 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
363
  background-color: green;
364
  color: white;
365
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
366
  </style>
367
 
368
 
@@ -669,7 +702,7 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
669
 
670
 
671
 
672
- <!-- Модальное окно для добавления ссылок на Превью и скачивания документа-->
673
  <div id="myModal_3" class="modal_3">
674
  <!-- Модальное содержание -->
675
  <div class="modal-content_3">
@@ -678,9 +711,19 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
678
  <h2>HTMLешка</h2>
679
  </div>
680
  <div class="modal-body_3">
681
-
682
- <button id="globBtn">Скачать готовую страницу</button>
 
 
 
 
 
 
683
 
 
 
 
 
684
  <br><br><br>
685
  </div>
686
  <div class="modal-footer_3">
@@ -1121,6 +1164,58 @@ ${cssContent}
1121
  </script>
1122
 
1123
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1124
 
1125
 
1126
 
 
363
  background-color: green;
364
  color: white;
365
  }
366
+ /* Стили для полей ввода */
367
+ .modal-body_3 input[type="text"],
368
+ .modal-body_3 textarea {
369
+ width: 100%; /* Полной ширины */
370
+ padding: 10px; /* Внутренний отступ */
371
+ margin: 5px 0 22px 0; /* Внешний отступ */
372
+ display: inline-block; /* Отображение */
373
+ border: 1px solid #ccc; /* Граница */
374
+ background: #f1f1f1; /* Фон */
375
+ box-sizing: border-box; /* Устанавливает, как вычисляется ширина и высота элемента */
376
+ }
377
+
378
+ .modal-body_3 input[type="text"]:focus,
379
+ .modal-body_3 textarea:focus {
380
+ background-color: #ddd; /* Фон при фокусе */
381
+ outline: none; /* Убирает стандартный outline */
382
+ }
383
+
384
+ /* Стили для кнопки */
385
+ .modal-body_3 button {
386
+ background-color: green; /* Зеленый цвет фона */
387
+ color: white; /* Белый цвет текста */
388
+ padding: 14px 20px; /* Внутренний отступ */
389
+ margin: 8px 0; /* Внешний отступ */
390
+ border: none; /* Без границы */
391
+ cursor: pointer; /* Курсор в виде указателя */
392
+ width: 100%; /* Полная ширина */
393
+ opacity: 0.9; /* Немного прозрачная */
394
+ }
395
+
396
+ .modal-body_3 button:hover {
397
+ opacity:1; /* Полная непрозрачность при наведении */
398
+ }
399
  </style>
400
 
401
 
 
702
 
703
 
704
 
705
+ <!-- Модальное окно для добавления ссылок на Превью и скачивания документа -->
706
  <div id="myModal_3" class="modal_3">
707
  <!-- Модальное содержание -->
708
  <div class="modal-content_3">
 
711
  <h2>HTMLешка</h2>
712
  </div>
713
  <div class="modal-body_3">
714
+ <label for="faviconUrl">URL иконки:</label>
715
+ <input type="text" id="faviconUrl" name="faviconUrl"><br><br>
716
+
717
+ <label for="previewImageUrl">URL превью изображения:</label>
718
+ <input type="text" id="previewImageUrl" name="previewImageUrl"><br><br>
719
+
720
+ <label for="pageTitle">Заголовок страницы:</label>
721
+ <input type="text" id="pageTitle" name="pageTitle"><br><br>
722
 
723
+ <label for="pageDescription">Описание страницы:</label>
724
+ <textarea id="pageDescription" name="pageDescription"></textarea><br><br>
725
+
726
+ <button id="globBtn">Скачать готовую страницу</button>
727
  <br><br><br>
728
  </div>
729
  <div class="modal-footer_3">
 
1164
  </script>
1165
 
1166
 
1167
+ <script>
1168
+ document.addEventListener('DOMContentLoaded', () => {
1169
+ console.log('DOMContentLoaded выполнен');
1170
+
1171
+ // Функция для тестовой кнопки
1172
+ document.getElementById('globBtn').addEventListener('click', function() {
1173
+ console.log('Тестовая кнопка работает!');
1174
+
1175
+ // Получаем значения из полей ввода
1176
+ const faviconUrl = document.getElementById('faviconUrl').value;
1177
+ const previewImageUrl = document.getElementById('previewImageUrl').value;
1178
+ const pageTitle = document.getElementById('pageTitle').value;
1179
+ const pageDescription = document.getElementById('pageDescription').value;
1180
+
1181
+ // Получаем HTML-код из GrapesJS
1182
+ const editor = grapesjs.editors[0]; // Предполагается, что у вас есть только один редактор
1183
+ const htmlContent = editor.getHtml();
1184
+ const cssContent = editor.getCss();
1185
+
1186
+ // Генерация HTML-контента
1187
+ const fullHtmlContent = `
1188
+ <!DOCTYPE html>
1189
+ <html lang="en">
1190
+ <head>
1191
+ <meta charset="UTF-8">
1192
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1193
+ <meta name="description" content="${pageDescription}">
1194
+ <meta property="og:title" content="${pageTitle}">
1195
+ <meta property="og:description" content="${pageDescription}">
1196
+ <meta property="og:image" content="${previewImageUrl}">
1197
+ <meta property="og:url" content="https://example.com">
1198
+ <title>${pageTitle}</title>
1199
+ <link rel="icon" href="${faviconUrl}" type="image/x-icon">
1200
+ <style>${cssContent}</style>
1201
+ </head>
1202
+ <body>
1203
+ ${htmlContent}
1204
+ </body>
1205
+ </html>
1206
+ `;
1207
+
1208
+ // Скачивание файла
1209
+ const blob = new Blob([fullHtmlContent], { type: 'text/html' });
1210
+ const link = document.createElement('a');
1211
+ link.href = URL.createObjectURL(blob);
1212
+ link.download = 'downloaded_page.html';
1213
+ document.body.appendChild(link);
1214
+ link.click();
1215
+ document.body.removeChild(link);
1216
+ });
1217
+ });
1218
+ </script>
1219
 
1220
 
1221