Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
psy_vk / pages.html
DmitrMakeev's picture
DmitrMakeev
Update pages.html
c226db6 verified
raw
history blame
19.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GrapesJS Project</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<script src="https://unpkg.com/grapesjs-component-countdown"></script>
<script src="https://unpkg.com/grapesjs-parser-postcss"></script>
<script src="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"></script>
<script src="https://unpkg.com/grapesjs-component-code-editor"></script>
<script src="https://unpkg.com/grapesjs-templates"></script>
<link href="https://unpkg.com/grapesjs-rte-extensions/dist/grapesjs-rte-extensions.min.css" rel="stylesheet" />
<script src="https://unpkg.com/grapesjs-rte-extensions"></script>
<script src="https://unpkg.com/grapesjs-user-blocks"></script>
<style>
h1 {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 0;
border-bottom: 2px solid #388E3C;
}
button[type="submit"] {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-top: 20px;
}
button[type="submit"]:hover {
background-color: #388E3C;
}
#imageUrl {
margin-top: 20px;
font-size: 16px;
color: #333;
cursor: pointer;
text-decoration: underline;
}
#progressBarContainer {
width: 80%;
margin: 20px auto;
background-color: #ddd;
border-radius: 13px;
padding: 3px;
}
#progressBar {
width: 0%;
height: 20px;
background-color: #4CAF50;
border-radius: 10px;
text-align: center;
line-height: 20px;
color: white;
}
</style>
<style>
body {
background-color: green;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
height: 100vh;
}
#floating-element nav ul li a {
color: #fff; /* Белый цвет текста */
}
.responsive-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
.responsive-image {
max-width: 100%;
height: auto;
object-fit: cover;
}
.centered-text {
text-align: center;
}
.gjs-one-bg {
background-color: green !important;
}
.countdown-timer {
text-align: center;
font-size: 24px;
color: #333;
}
@media (max-width: 768px) {
.responsive-image-container {
flex-direction: column;
}
.responsive-image {
width: 100%;
margin-bottom: 20px;
}
}
/* Модальный (фон) */
.modal_1 {
display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 10; /* Сидеть на вершине */
padding-top: 100px; /* Расположение коробки */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
}
/* Модальное содержание */
.modal-content_1 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop_1;
-webkit-animation-duration: 0.4s;
animation-name: animatetop_1;
animation-duration: 0.4s
}
/* Добавить анимацию */
@-webkit-keyframes animatetop_1 {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop_1 {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* Кнопка закрытия */
.close_1 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_1:hover,
.close_1:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header_1 {
padding: 2px 16px;
background-color: green;
color: white;
}
.modal-body_1 {padding: 2px 16px;}
.modal-footer_1 {
padding: 2px 16px;
background-color: green;
color: white;
}
#gjs {
position: absolute;
left: 0;
transition: left 0.3s ease;
}
#toggleAppBtn {
z-index: 1000; /* Убедитесь, что кнопка находится поверх других элементов */
}
</style>
</head>
<body>
<script>
vkBridge.send('VKWebAppInit');
</script>
<!-- Кнопка для показа/скрытия приложения -->
<button id="toggleAppBtn" style="position: absolute; top: 10px; left: 10px;">Показать/Скрыть приложение</button>
<!-- Кнопка для открытия модального окна -->
<button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
<!-- Кнопка для проверки работы -->
<button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
<div id="gjs" style="height: 90vh;"></div>
<!-- The Modal -->
<div id="myModal_1" class="modal_1">
<!-- Модальное содержание -->
<div class="modal-content_1">
<div class="modal-header_1">
<span class="close_1">&times;</span>
<h2>HTMLешка</h2>
</div>
<div class="modal-body_1">
<p>Некоторый текст в модальном теле</p>
<div id="progressBarContainer">
<div id="progressBar">0%</div>
</div>
<div id="imageUrl" onclick="copyToClipboard(this)">Кликните после загрузки, для получения ссылки на страницу.</div>
<form id="uploadForm" enctype="multipart/form-data" method="post" action="/up_page">
<input type="file" name="file" accept=".html">
<input type="text" name="filename" placeholder="имя файла(маршрут)">
<button type="submit">Загрузить</button>
</form>
<br><br><br>
</div>
<div class="modal-footer_1">
<h3>Добавление HTML файла с пользовательским маршрутом.</h3>
</div>
</div>
</div>
<script>
// Инициализация GrapesJS редактора
const editor = grapesjs.init({
container: "#gjs",
fromElement: true,
height: "100vh",
storageManager: {
type: 'local',
autosave: true,
autoload: true,
stepsBeforeSave: 1,
},
plugins: [
"gjs-blocks-basic",
"grapesjs-component-countdown",
"grapesjs-component-code-editor",
"grapesjs-templates",
"grapesjs-rte-extensions",
"grapesjs-user-blocks"
],
pluginsOpts: {
"gjs-blocks-basic": {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social'],
blocksBasicOpts: {
flexGrid: true,
stylePrefix: 'gjs-',
columns: 12,
rowHeight: 75,
addBasicStyle: true
}
},
"grapesjs-component-code-editor": {
panelId: 'views-container',
appendTo: '.gjs-pn-views-container',
openState: { pn: '35%', cv: '65%' },
closedState: { pn: '15%', cv: '85%' },
codeViewOptions: {},
preserveWidth: false,
clearData: false,
editJs: true,
cleanCssBtn: true,
htmlBtnText: 'Применить',
cssBtnText: 'Применить',
cleanCssBtnText: 'Удалить'
},
"grapesjs-templates": {
// Настройки для grapesjs-templates
},
"grapesjs-rte-extensions": {
base: {
bold: true,
italic: true,
underline: true,
strikethrough: true,
link: true,
},
fonts: {
fontColor: true,
hilite: true,
},
format: {
heading1: true,
heading2: true,
heading3: true,
paragraph: true,
clearFormatting: true,
},
align: true,
darkColorPicker: true,
maxWidth: '600px'
},
"grapesjs-user-blocks": {
// Настройки для grapesjs-user-blocks
}
},
});
</script>
<script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script>
<script>
editor.BlockManager.add('custom-player', {
label: 'Custom Player',
content: `<div id="player" style="width: 480px; height: 270px; border: 3px solid black; margin: auto; position: fixed; top: 0; left: 0; right: 0;"></div>`,
attributes: {
class: 'fa fa-play'
}
});
editor.CssComposer.addRules(`
#player {
width: 480px;
height: 270px;
border: 3px solid black;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
right: 0;
display: block;
}
`);
</script>
<script>
editor.BlockManager.add('custom-iframe', {
label: 'Custom Iframe',
content: `<iframe id="custom-iframe" frameborder="0" width="480" height="405" src="https://rutube.ru/play/embed/538dc9cc0b952dd52f47e28df7df5e81/" allow="clipboard-write; autoplay" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: relative; top: 0; margin: 0 auto; display: block;"></iframe>`,
attributes: {
class: 'fa fa-video-camera'
}
});
editor.CssComposer.addRules(`
#custom-iframe {
width: 480px;
height: 405px;
border: none;
margin: 0 auto;
position: relative;
top: 0;
display: block;
}
`);
</script>
<script>
// Добавление кнопки для открытия редактора кода
const pn = editor.Panels;
const panelViews = pn.addPanel({
id: "views",
});
panelViews.get("buttons").add([
{
attributes: {
title: editor.I18n.t('panels.buttons.open-code'),
},
className: "fa fa-file-code-o",
command: "open-code",
editJs: true,
togglable: false,
id: "open-code",
},
]);
// Добавление команды для импорта HTML и CSS
editor.Commands.add('gjs-open-import-webpage', {
run(editor, sender) {
sender && sender.set('active', 0);
const modal = editor.Modal;
const container = document.createElement('div');
const importLabel = document.createElement('div');
importLabel.innerHTML = editor.I18n.t('commands.gjs-open-import-webpage.label');
const importInput = document.createElement('textarea');
importInput.style.width = '100%';
importInput.style.height = '200px';
importInput.placeholder = 'HTML/CSS code...';
const importButton = document.createElement('button');
importButton.innerHTML = editor.I18n.t('panels.buttons.gjs-open-import-webpage');
importButton.onclick = () => {
const code = importInput.value;
try {
const parser = new DOMParser();
const doc = parser.parseFromString(code, 'text/html');
const html = doc.body.innerHTML;
const css = Array.from(doc.querySelectorAll('style')).map(style => style.innerHTML).join('\n');
if (html) {
editor.setComponents(html);
editor.setStyle(css);
modal.close();
}
} catch (error) {
console.error('Error parsing HTML/CSS:', error);
}
};
container.appendChild(importLabel);
container.appendChild(importInput);
container.appendChild(importButton);
modal.setTitle(editor.I18n.t('commands.gjs-open-import-webpage.title'));
modal.setContent(container);
modal.open();
}
});
// Добавление кнопки для импорта в панель
pn.addButton('options', {
id: 'gjs-open-import-webpage',
className: 'fa fa-download',
command: 'gjs-open-import-webpage',
attributes: {
title: editor.I18n.t('panels.buttons.gjs-open-import-webpage'),
'data-tooltip-pos': 'bottom',
},
});
// Добавление кнопок для отмены и повтора действий
pn.addButton('options', {
id: 'undo',
className: 'fa fa-undo',
command: function() { editor.runCommand('core:undo') },
attributes: {
title: 'Undo',
'data-tooltip-pos': 'bottom',
},
});
pn.addButton('options', {
id: 'redo',
className: 'fa fa-repeat',
command: function() { editor.runCommand('core:redo') },
attributes: {
title: 'Redo',
'data-tooltip-pos': 'bottom',
},
});
// Добавление кнопки для очистки всего содержимого редактора
pn.addButton('options', {
id: 'clear-canvas',
className: 'fa fa-trash',
command: 'core:canvas-clear',
attributes: {
title: 'Очистить холст',
'data-tooltip-pos': 'bottom',
},
});
</script>
<script>
// Get the modal
var modal_1 = document.getElementById("myModal_1");
// Get the button that opens the modal
var btn_1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span_1 = document.getElementsByClassName("close_1")[0];
// When the user clicks the button, open the modal
btn_1.onclick = function() {
modal_1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span_1.onclick = function() {
modal_1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal_1) {
modal_1.style.display = "none";
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded выполнен');
// Функция для тестовой кнопки
document.getElementById('testBtn').addEventListener('click', function() {
console.log('Тестовая кнопка работает!');
// Получаем HTML-код из GrapesJS
const editor = grapesjs.editors[0]; // Предполагается, что у вас есть только один редактор
const htmlContent = editor.getHtml();
const cssContent = editor.getCss();
// Генерация HTML-контента
const fullHtmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скачанная HTML-страница</title>
<style>${cssContent}</style>
</head>
<body>
${htmlContent}
</body>
</html>
`;
// Скачивание файла
const blob = new Blob([fullHtmlContent], { type: 'text/html' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'downloaded_page.html';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Функция для показа/скрытия приложения
document.getElementById('toggleAppBtn').addEventListener('click', function() {
const app = document.getElementById('gjs');
if (app.style.left === '0px' || app.style.left === '') {
app.style.left = '-15%'; // Скрыть приложение
} else {
app.style.left = '0'; // Показать приложение
}
});
});
</script>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(this);
var request = new XMLHttpRequest();
request.open('POST', '/up_page');
request.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').style.width = percentComplete + '%';
document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
}
}, false);
request.addEventListener('load', function(event) {
var response = event.target.responseText;
if (event.target.status === 200) {
var fullUrl = response.split('saved to ')[1];
document.getElementById('imageUrl').innerText = 'Click to copy URL';
document.getElementById('imageUrl').setAttribute('data-url', fullUrl);
Toastify({
text: "File uploaded successfully",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#4CAF50",
}).showToast();
} else if (event.target.status === 409) {
Toastify({
text: "File with this name already exists",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#FF5733",
}).showToast();
}
document.getElementById('progressBar').style.width = '0%';
document.getElementById('progressBar').innerText = '0%';
}, false);
request.send(formData);
});
function copyToClipboard(element) {
var tempInput = document.createElement("input");
tempInput.value = element.getAttribute('data-url');
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
Toastify({
text: "URL copied to clipboard",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#4CAF50",
}).showToast();
}
</script>
</body>
</html>