|
|
<!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> |
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.modal_2 { |
|
|
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_2 { |
|
|
position: relative; |
|
|
background-color: #fefefe; |
|
|
margin: auto; |
|
|
padding: 0; |
|
|
border: 1px solid #888; |
|
|
width: 80%; |
|
|
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_2; |
|
|
-webkit-animation-duration: 0.4s; |
|
|
animation-name: animatetop_2; |
|
|
animation-duration: 0.4s |
|
|
} |
|
|
|
|
|
|
|
|
@-webkit-keyframes animatetop_2 { |
|
|
from {top:-300px; opacity:0} |
|
|
to {top:0; opacity:1} |
|
|
} |
|
|
@keyframes animatetop_2 { |
|
|
from {top:-300px; opacity:0} |
|
|
to {top:0; opacity:1} |
|
|
} |
|
|
|
|
|
|
|
|
.close_2 { |
|
|
color: white; |
|
|
float: right; |
|
|
font-size: 28px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.close_2:hover, |
|
|
.close_2:focus { |
|
|
color: #000; |
|
|
text-decoration: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.modal-header_2 { |
|
|
padding: 2px 16px; |
|
|
background-color: green; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.modal-body_2 {padding: 2px 16px;} |
|
|
|
|
|
.modal-footer_2 { |
|
|
padding: 2px 16px; |
|
|
background-color: green; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
#gjs { |
|
|
position: absolute; |
|
|
left: 0; |
|
|
transition: left 0.3s ease; |
|
|
} |
|
|
|
|
|
#toggleAppBtn { |
|
|
z-index: 1000; |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.modal_3 { |
|
|
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_3 { |
|
|
position: relative; |
|
|
background-color: #fefefe; |
|
|
margin: auto; |
|
|
padding: 0; |
|
|
border: 1px solid #888; |
|
|
width: 80%; |
|
|
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_3; |
|
|
-webkit-animation-duration: 0.4s; |
|
|
animation-name: animatetop_3; |
|
|
animation-duration: 0.4s |
|
|
} |
|
|
|
|
|
@-webkit-keyframes animatetop_3 { |
|
|
from {top:-300px; opacity:0} |
|
|
to {top:0; opacity:1} |
|
|
} |
|
|
@keyframes animatetop_3 { |
|
|
from {top:-300px; opacity:0} |
|
|
to {top:0; opacity:1} |
|
|
} |
|
|
|
|
|
.close_3 { |
|
|
color: white; |
|
|
float: right; |
|
|
font-size: 28px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.close_3:hover, |
|
|
.close_3:focus { |
|
|
color: #000; |
|
|
text-decoration: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
.modal-header_3 { |
|
|
padding: 2px 16px; |
|
|
background-color: green; |
|
|
color: white; |
|
|
} |
|
|
.modal-body_3 {padding: 2px 16px;} |
|
|
.modal-footer_3 { |
|
|
padding: 2px 16px; |
|
|
background-color: green; |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.input-row { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
.input-row input, .input-row textarea { |
|
|
padding: 10px; |
|
|
font-size: 16px; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 5px; |
|
|
} |
|
|
#jsoneditor { |
|
|
width: 50%; |
|
|
height: 300px; |
|
|
margin: 20px auto; |
|
|
} |
|
|
#addVideo, #saveToClipboard { |
|
|
color: white; |
|
|
background-color: #4CAF50; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
padding: 10px 20px; |
|
|
font-size: 16px; |
|
|
border-radius: 5px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
#addVideo:hover, #saveToClipboard:hover { |
|
|
background-color: #388E3C; |
|
|
} |
|
|
.jsoneditor-menu { |
|
|
background-color: #4CAF50 !important; |
|
|
border-bottom: 1px solid #388E3C !important; |
|
|
} |
|
|
.jsoneditor{ |
|
|
border: 1px #4CAF50 !important; |
|
|
border-bottom: 2px solid #388E3C !important; |
|
|
} |
|
|
</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="myBtn_2" style="position: absolute; top: 60px; right: 10px;">Открыть модальное_2</button> |
|
|
<button id="myBtn_3" style="position: absolute; top: 90px; right: 10px;">Открыть модальное_3</button> |
|
|
|
|
|
|
|
|
<button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="gjs" style="height: 90vh;"></div> |
|
|
|
|
|
<div id="myModal_1" class="modal_1"> |
|
|
|
|
|
<div class="modal-content_1"> |
|
|
<div class="modal-header_1"> |
|
|
<span class="close_1">×</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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="myModal_2" class="modal_2"> |
|
|
|
|
|
<div class="modal-content_2"> |
|
|
<div class="modal-header_2"> |
|
|
<span class="close_2">×</span> |
|
|
<h2>HTMLешка</h2> |
|
|
</div> |
|
|
<div class="modal-body_2"> |
|
|
<style> |
|
|
|
|
|
iframe { |
|
|
width: 100%; |
|
|
height: 500px; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
|
|
|
#iframe1 { |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
<iframe id="iframe1" src="https://diamonik7777-up-fail.hf.space/up_fa" title="Iframe Example"></iframe> |
|
|
<iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/buil_json?api_sys=fasSd345D" title="Iframe Example"></iframe> |
|
|
|
|
|
|
|
|
|
|
|
<br><br><br> |
|
|
</div> |
|
|
<div class="modal-footer_2"> |
|
|
<h3>Добавление HTML файла с пользовательским маршрутом.</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="myModal_3" class="modal_3"> |
|
|
|
|
|
<div class="modal-content_3"> |
|
|
<div class="modal-header_3"> |
|
|
<span class="close_3">×</span> |
|
|
<h2>HTMLешка</h2> |
|
|
</div> |
|
|
<div class="modal-body_3"> |
|
|
|
|
|
<br><br><br> |
|
|
</div> |
|
|
<div class="modal-footer_3"> |
|
|
<h3>Добавление HTML файла с пользовательским маршрутом.</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
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-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": { |
|
|
|
|
|
} |
|
|
}, |
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
editor.Components.addType('avp-look_1-settings-block', { |
|
|
model: { |
|
|
defaults: { |
|
|
|
|
|
content: '<div id="set_avp-look_v1"></div>', |
|
|
|
|
|
script: function(props) { |
|
|
window.avp = props.avp; |
|
|
window.grup = props.grup; |
|
|
window.hook = props.hook; |
|
|
const initBlock = () => { |
|
|
console.log('Menu settings block initialized with props:', { avp, grup, hook }); |
|
|
}; |
|
|
const loadScript = (src, callback) => { |
|
|
const script = document.createElement('script'); |
|
|
script.src = src; |
|
|
script.onload = callback; |
|
|
document.body.appendChild(script); |
|
|
}; |
|
|
|
|
|
if (typeof vkBridge === 'undefined') { |
|
|
loadScript('https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js', () => { |
|
|
console.log('VK Bridge loaded!'); |
|
|
initBlock(); |
|
|
}); |
|
|
} else { |
|
|
initBlock(); |
|
|
} |
|
|
|
|
|
if (typeof VK === 'undefined') { |
|
|
loadScript('https://vk.com/js/api/openapi.js?169', () => { |
|
|
console.log('VK Open API loaded!'); |
|
|
}); |
|
|
} |
|
|
|
|
|
loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/avp_look_v1.js?', () => { |
|
|
console.log('Custom script loaded!'); |
|
|
}); |
|
|
}, |
|
|
|
|
|
'script-props': ['avp', 'grup', 'hook'], |
|
|
|
|
|
traits: [ |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'avp', |
|
|
label: 'AVP', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'grup', |
|
|
label: 'GRUP', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'checkbox', |
|
|
name: 'hook', |
|
|
label: 'HOOK', |
|
|
changeProp: true |
|
|
} |
|
|
] |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
editor.Blocks.add('avp-look_1-settings-block-block', { |
|
|
label: ` |
|
|
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><g><path style="fill:#507C5C;" d="M432.464,512.001h-37.767c-8.02,0-14.523-6.503-14.523-14.523s6.503-14.523,14.523-14.523h37.767 c27.839,0,50.49-22.65,50.49-50.49V79.537c0-27.839-22.65-50.49-50.49-50.49H214.367c-8.021,0-14.523-6.503-14.523-14.523 s6.502-14.523,14.523-14.523h218.098c43.855,0,79.536,35.679,79.536,79.536v352.93C512,476.322,476.321,512.001,432.464,512.001z" /><path style="fill:#507C5C;" d="M289.694,512.001H79.536C35.679,512.001,0,476.322,0,432.465V79.537 C0,35.68,35.679,0.001,79.536,0.001h32.684c8.021,0,14.523,6.503,14.523,14.523s-6.502,14.523-14.523,14.523H79.536 c-27.839,0-50.49,22.65-50.49,50.49v352.93c0,27.839,22.65,50.49,50.49,50.49h210.158c8.02,0,14.523,6.503,14.523,14.523 S297.714,512.001,289.694,512.001z"/></g><path style="fill:#CFF09E;" d="M409.589,356.56c-11.793,0-26.217-0.331-32.376-0.471c-1.855-0.042-3.064-0.07-3.394-0.071 c-9.868-0.044-18.366-3.427-25.256-10.057c-5.59-5.379-11.001-11.261-16.234-16.95c-2.963-3.218-6.024-6.547-9.113-9.78 c-3.114-3.258-6.046-5.92-8.968-8.14c-3.791-2.89-7.831-4.421-11.672-4.421c-6.352,0-11.584,3.994-14.352,10.959 c-3.181,8.03-5.622,27.642-5.712,28.852c-0.392,5.507-3.541,8.338-9.627,8.672c-3.991,0.216-7.908,0.328-11.64,0.328 c-24.047,0-44.348-4.613-62.063-14.103c-17.914-9.595-33.977-23.648-49.103-42.961c-19.111-24.393-36.321-52.671-55.802-91.685 c-0.935-1.872-15.887-33.75-17.322-37.346c-0.408-1.675-0.63-4.408,0.787-5.327c1.079-0.102,4.364-0.276,14.169-0.276 c16.35,0,40.411,0.495,41.742,0.542c6.736,0.365,10.407,3.016,13.019,9.456c11.412,28.178,25,51.943,41.541,72.648 c2.507,3.153,5.782,6.158,9.468,8.683c2.587,1.775,5.362,2.713,8.023,2.713h0.001c5.066,0,9.24-3.237,11.165-8.665 c2.212-6.174,3.991-17.538,4.1-23.565c0.289-14.785-0.038-24.428-0.835-39.227c-0.745-13.684-7.253-21.859-19.871-24.925 c3.838-4.151,9.068-5.214,17.056-5.641c4.472-0.241,9.363-0.359,14.957-0.359c5.199,0,10.515,0.099,15.656,0.196 c3.612,0.068,7.222,0.135,10.831,0.171c5.956,0.054,11.117,0.575,15.79,1.596c2.841,0.619,6.747,2.232,7.902,9.103 c0.59,3.487,0.851,6.869,0.776,10.06c-0.148,6.546-0.369,13.207-0.581,19.648c-0.306,9.261-0.624,18.838-0.733,28.287 c-0.087,7.333,0.537,14.092,1.853,20.09c1.74,7.877,6.464,12.576,12.641,12.576c2.595,0,6.575-0.919,10.797-5.295 c6.688-6.945,13.145-15.026,20.937-26.198c10.166-14.583,18.947-31.592,27.635-53.531c2.916-7.341,3.663-7.857,11.427-7.874 c10.189-0.026,20.376-0.041,30.564-0.041c8.94,0,17.882,0.013,26.823,0.041c3.409,0.015,6.161,0.367,8.412,1.082 c1.541,0.491,2.873,1.205,2.135,4.46c-2.722,12.076-9.701,22.623-16.028,31.559c-7.687,10.85-15.774,21.737-23.594,32.266 c-4.119,5.543-8.236,11.088-12.32,16.655c-1.497,2.043-2.935,4.321-4.521,7.166c-5.798,10.491-4.878,17.849,3.268,26.261 c4.332,4.467,8.833,8.861,13.186,13.107c6.145,5.998,12.501,12.199,18.331,18.577c7.372,8.079,13.862,16.519,19.285,25.081 c2.511,3.965,3.23,7.805,1.969,10.531c-1.216,2.633-4.335,4.431-8.786,5.063C424.651,356.256,420.817,356.56,409.589,356.56z"/><path style="fill:#507C5C;" d="M409.589,371.083c-11.894,0-26.41-0.331-32.607-0.472c-1.767-0.041-2.88-0.067-3.246-0.07 c-13.517-0.061-25.709-4.941-35.242-14.116c-5.933-5.711-11.485-11.745-16.853-17.582l-0.186-0.203 c-2.857-3.102-5.809-6.31-8.74-9.378c-2.575-2.694-4.949-4.858-7.256-6.611c-1.335-1.018-2.314-1.362-2.726-1.439 c-0.202,0.219-0.6,0.741-1.012,1.781c-1.971,4.976-4.271,20.18-4.735,24.692c-0.967,12.806-9.889,21.234-23.307,21.969 c-4.265,0.231-8.445,0.349-12.435,0.349c-26.502,0-49.046-5.176-68.922-15.824c-19.727-10.566-37.285-25.877-53.678-46.807 c-19.733-25.187-37.425-54.225-57.362-94.151c-0.847-1.696-16.122-34.201-17.818-38.456c-0.253-0.633-0.46-1.282-0.622-1.945 c-2.128-8.74,0.55-16.766,6.991-20.945c1.965-1.274,4.207-2.055,6.538-2.274c0.892-0.086,3.605-0.341,15.537-0.341 c16.745,0,40.825,0.501,42.252,0.55c0.091,0.004,0.183,0.007,0.274,0.013c12.34,0.668,20.984,6.891,25.691,18.498 c10.881,26.868,23.779,49.45,39.429,69.043c1.185,1.492,2.706,2.986,4.408,4.344c1.316-5.025,2.412-12.545,2.482-16.376 c0.282-14.356-0.039-23.75-0.816-38.183c-0.444-8.146-3.191-10.23-8.798-11.592c-5.002-1.216-8.987-4.989-10.474-9.916 c-1.487-4.928-0.254-10.275,3.24-14.055c7.561-8.177,17.418-9.773,26.945-10.282c4.735-0.256,9.883-0.381,15.733-0.381 c5.365,0,10.736,0.1,15.928,0.199c3.571,0.067,7.141,0.134,10.709,0.17c6.944,0.062,13.08,0.694,18.738,1.929 c10.297,2.241,17.272,9.852,19.127,20.881c0.742,4.386,1.069,8.699,0.973,12.811c-0.147,6.496-0.363,13.085-0.575,19.457 l-0.012,0.33c-0.306,9.266-0.619,18.723-0.726,27.974c-0.07,5.907,0.386,11.293,1.354,16.031 c5.773-6.133,11.514-13.402,18.44-23.334c9.504-13.633,17.779-29.703,26.044-50.57c5.116-12.881,11.165-17.021,24.9-17.05 c19.15-0.048,38.309-0.061,57.462,0c4.922,0.02,9.092,0.597,12.763,1.763c9.363,2.985,14.141,11.627,11.902,21.513 c-3.305,14.671-11.2,26.657-18.34,36.742c-7.761,10.955-15.874,21.876-23.718,32.44c-4.172,5.615-8.272,11.136-12.34,16.68 c-1.131,1.544-2.261,3.34-3.547,5.648c-2.826,5.114-2.462,5.49,1.017,9.083c4.197,4.326,8.619,8.643,12.897,12.817 c6.328,6.177,12.815,12.509,18.908,19.172c7.953,8.714,14.959,17.83,20.836,27.109c5.201,8.214,6.252,17.105,2.884,24.393 c-1.939,4.2-7.109,11.528-19.927,13.35C426.046,370.726,422.067,371.083,409.589,371.083z M302.576,292.145 c7.051,0,14.132,2.558,20.479,7.395c3.523,2.678,7.015,5.84,10.661,9.655c3.117,3.263,6.162,6.57,9.107,9.771l0.19,0.208 c5.08,5.523,10.326,11.226,15.621,16.323c4.165,4.008,9.154,5.97,15.249,5.998c0.354,0.001,1.66,0.029,3.661,0.076 c6.197,0.141,20.479,0.466,32.042,0.466c2.682,0,4.89-0.019,6.697-0.046c-4.024-5.706-8.564-11.334-13.552-16.797 c-5.525-6.043-11.71-12.082-17.694-17.922c-4.472-4.363-9.039-8.82-13.522-13.443c-12.657-13.068-14.471-27.261-5.552-43.397 c1.911-3.427,3.657-6.185,5.517-8.725c4.107-5.597,8.242-11.164,12.377-16.732c7.819-10.526,15.832-21.316,23.403-32 c3.098-4.376,6.37-9.168,9.02-14.204c-15.829-0.035-31.673-0.02-47.515,0.017c-8.945,22.385-18.086,39.956-28.709,55.192 c-8.251,11.831-15.155,20.456-22.389,27.967c-7.768,8.056-15.846,9.745-21.258,9.745c-13.078,0-23.606-9.408-26.823-23.966 c-1.557-7.096-2.293-14.96-2.194-23.394c0.11-9.561,0.428-19.176,0.736-28.475l0.014-0.447c0.209-6.299,0.424-12.809,0.568-19.168 c0.038-1.648-0.052-3.387-0.272-5.198c-2.937-0.444-6.171-0.677-9.81-0.709c-3.667-0.038-7.321-0.105-10.974-0.174 c-5.384-0.1-10.998-0.209-16.356-0.192c1.892,4.63,3.019,9.854,3.333,15.611c0.816,15.162,1.152,25.058,0.853,40.299 c-0.132,7.296-2.152,20.375-4.948,28.179c-3.997,11.264-13.52,18.289-24.837,18.289c-5.607,0-11.223-1.818-16.24-5.259 c-4.858-3.329-9.225-7.349-12.622-11.623c-17.406-21.791-31.685-46.737-43.632-76.233c-0.06-0.147-0.116-0.277-0.167-0.394 c-0.012-0.001-0.025-0.003-0.036-0.003c-2.212-0.061-20.973-0.437-36.019-0.514c4.425,9.524,9.559,20.46,10.291,21.943 c19.021,38.091,35.749,65.605,54.232,89.197c13.858,17.695,28.423,30.488,44.528,39.115c15.553,8.332,33.611,12.382,55.205,12.382 c2.373,0,4.833-0.048,7.35-0.145c0.951-7.145,3.064-20.804,6.127-28.532C279.734,299.667,290.146,292.145,302.576,292.145z"/></svg> |
|
|
avp_look_v1`, |
|
|
content: { type: 'avp-look_1-settings-block' }, |
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
editor.Components.addType('vk_1-avp-settings-block', { |
|
|
model: { |
|
|
defaults: { |
|
|
|
|
|
content: '<div id="set_avp_1"></div>', |
|
|
|
|
|
script: function(props) { |
|
|
window.avp = props.avp; |
|
|
window.grup = props.grup; |
|
|
window.red_url = props.red_url; |
|
|
window.hook = props.hook; |
|
|
const initBlock = () => { |
|
|
console.log('Menu settings block initialized with props:', { avp, grup, red_url, hook }); |
|
|
}; |
|
|
const loadScript = (src, callback) => { |
|
|
const script = document.createElement('script'); |
|
|
script.src = src; |
|
|
script.onload = callback; |
|
|
document.body.appendChild(script); |
|
|
}; |
|
|
|
|
|
if (typeof vkBridge === 'undefined') { |
|
|
loadScript('https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js', () => { |
|
|
console.log('VK Bridge loaded!'); |
|
|
initBlock(); |
|
|
}); |
|
|
} else { |
|
|
initBlock(); |
|
|
} |
|
|
|
|
|
if (typeof VK === 'undefined') { |
|
|
loadScript('https://vk.com/js/api/openapi.js?169', () => { |
|
|
console.log('VK Open API loaded!'); |
|
|
}); |
|
|
} |
|
|
|
|
|
loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/avp_grup_v1.js', () => { |
|
|
console.log('Custom script loaded!'); |
|
|
}); |
|
|
}, |
|
|
|
|
|
'script-props': ['avp', 'grup', 'red_url', 'hook'], |
|
|
|
|
|
traits: [ |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'avp', |
|
|
label: 'AVP', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'grup', |
|
|
label: 'GRUP', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'red_url', |
|
|
label: 'RED_URL', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'checkbox', |
|
|
name: 'hook', |
|
|
label: 'HOOK', |
|
|
changeProp: true |
|
|
} |
|
|
] |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
editor.Blocks.add('vk_1-avp-settings-block-block', { |
|
|
label: ` |
|
|
<!-- icon666.com - MILLIONS vector ICONS FREE --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><g><path style="fill:#507C5C;" d="M432.464,512.001h-37.767c-8.02,0-14.523-6.503-14.523-14.523s6.503-14.523,14.523-14.523h37.767 c27.839,0,50.49-22.65,50.49-50.49V79.537c0-27.839-22.65-50.49-50.49-50.49H214.367c-8.021,0-14.523-6.503-14.523-14.523 s6.502-14.523,14.523-14.523h218.098c43.855,0,79.536,35.679,79.536,79.536v352.93C512,476.322,476.321,512.001,432.464,512.001z" /><path style="fill:#507C5C;" d="M289.694,512.001H79.536C35.679,512.001,0,476.322,0,432.465V79.537 C0,35.68,35.679,0.001,79.536,0.001h32.684c8.021,0,14.523,6.503,14.523,14.523s-6.502,14.523-14.523,14.523H79.536 c-27.839,0-50.49,22.65-50.49,50.49v352.93c0,27.839,22.65,50.49,50.49,50.49h210.158c8.02,0,14.523,6.503,14.523,14.523 S297.714,512.001,289.694,512.001z"/></g><path style="fill:#CFF09E;" d="M409.589,356.56c-11.793,0-26.217-0.331-32.376-0.471c-1.855-0.042-3.064-0.07-3.394-0.071 c-9.868-0.044-18.366-3.427-25.256-10.057c-5.59-5.379-11.001-11.261-16.234-16.95c-2.963-3.218-6.024-6.547-9.113-9.78 c-3.114-3.258-6.046-5.92-8.968-8.14c-3.791-2.89-7.831-4.421-11.672-4.421c-6.352,0-11.584,3.994-14.352,10.959 c-3.181,8.03-5.622,27.642-5.712,28.852c-0.392,5.507-3.541,8.338-9.627,8.672c-3.991,0.216-7.908,0.328-11.64,0.328 c-24.047,0-44.348-4.613-62.063-14.103c-17.914-9.595-33.977-23.648-49.103-42.961c-19.111-24.393-36.321-52.671-55.802-91.685 c-0.935-1.872-15.887-33.75-17.322-37.346c-0.408-1.675-0.63-4.408,0.787-5.327c1.079-0.102,4.364-0.276,14.169-0.276 c16.35,0,40.411,0.495,41.742,0.542c6.736,0.365,10.407,3.016,13.019,9.456c11.412,28.178,25,51.943,41.541,72.648 c2.507,3.153,5.782,6.158,9.468,8.683c2.587,1.775,5.362,2.713,8.023,2.713h0.001c5.066,0,9.24-3.237,11.165-8.665 c2.212-6.174,3.991-17.538,4.1-23.565c0.289-14.785-0.038-24.428-0.835-39.227c-0.745-13.684-7.253-21.859-19.871-24.925 c3.838-4.151,9.068-5.214,17.056-5.641c4.472-0.241,9.363-0.359,14.957-0.359c5.199,0,10.515,0.099,15.656,0.196 c3.612,0.068,7.222,0.135,10.831,0.171c5.956,0.054,11.117,0.575,15.79,1.596c2.841,0.619,6.747,2.232,7.902,9.103 c0.59,3.487,0.851,6.869,0.776,10.06c-0.148,6.546-0.369,13.207-0.581,19.648c-0.306,9.261-0.624,18.838-0.733,28.287 c-0.087,7.333,0.537,14.092,1.853,20.09c1.74,7.877,6.464,12.576,12.641,12.576c2.595,0,6.575-0.919,10.797-5.295 c6.688-6.945,13.145-15.026,20.937-26.198c10.166-14.583,18.947-31.592,27.635-53.531c2.916-7.341,3.663-7.857,11.427-7.874 c10.189-0.026,20.376-0.041,30.564-0.041c8.94,0,17.882,0.013,26.823,0.041c3.409,0.015,6.161,0.367,8.412,1.082 c1.541,0.491,2.873,1.205,2.135,4.46c-2.722,12.076-9.701,22.623-16.028,31.559c-7.687,10.85-15.774,21.737-23.594,32.266 c-4.119,5.543-8.236,11.088-12.32,16.655c-1.497,2.043-2.935,4.321-4.521,7.166c-5.798,10.491-4.878,17.849,3.268,26.261 c4.332,4.467,8.833,8.861,13.186,13.107c6.145,5.998,12.501,12.199,18.331,18.577c7.372,8.079,13.862,16.519,19.285,25.081 c2.511,3.965,3.23,7.805,1.969,10.531c-1.216,2.633-4.335,4.431-8.786,5.063C424.651,356.256,420.817,356.56,409.589,356.56z"/><path style="fill:#507C5C;" d="M409.589,371.083c-11.894,0-26.41-0.331-32.607-0.472c-1.767-0.041-2.88-0.067-3.246-0.07 c-13.517-0.061-25.709-4.941-35.242-14.116c-5.933-5.711-11.485-11.745-16.853-17.582l-0.186-0.203 c-2.857-3.102-5.809-6.31-8.74-9.378c-2.575-2.694-4.949-4.858-7.256-6.611c-1.335-1.018-2.314-1.362-2.726-1.439 c-0.202,0.219-0.6,0.741-1.012,1.781c-1.971,4.976-4.271,20.18-4.735,24.692c-0.967,12.806-9.889,21.234-23.307,21.969 c-4.265,0.231-8.445,0.349-12.435,0.349c-26.502,0-49.046-5.176-68.922-15.824c-19.727-10.566-37.285-25.877-53.678-46.807 c-19.733-25.187-37.425-54.225-57.362-94.151c-0.847-1.696-16.122-34.201-17.818-38.456c-0.253-0.633-0.46-1.282-0.622-1.945 c-2.128-8.74,0.55-16.766,6.991-20.945c1.965-1.274,4.207-2.055,6.538-2.274c0.892-0.086,3.605-0.341,15.537-0.341 c16.745,0,40.825,0.501,42.252,0.55c0.091,0.004,0.183,0.007,0.274,0.013c12.34,0.668,20.984,6.891,25.691,18.498 c10.881,26.868,23.779,49.45,39.429,69.043c1.185,1.492,2.706,2.986,4.408,4.344c1.316-5.025,2.412-12.545,2.482-16.376 c0.282-14.356-0.039-23.75-0.816-38.183c-0.444-8.146-3.191-10.23-8.798-11.592c-5.002-1.216-8.987-4.989-10.474-9.916 c-1.487-4.928-0.254-10.275,3.24-14.055c7.561-8.177,17.418-9.773,26.945-10.282c4.735-0.256,9.883-0.381,15.733-0.381 c5.365,0,10.736,0.1,15.928,0.199c3.571,0.067,7.141,0.134,10.709,0.17c6.944,0.062,13.08,0.694,18.738,1.929 c10.297,2.241,17.272,9.852,19.127,20.881c0.742,4.386,1.069,8.699,0.973,12.811c-0.147,6.496-0.363,13.085-0.575,19.457 l-0.012,0.33c-0.306,9.266-0.619,18.723-0.726,27.974c-0.07,5.907,0.386,11.293,1.354,16.031 c5.773-6.133,11.514-13.402,18.44-23.334c9.504-13.633,17.779-29.703,26.044-50.57c5.116-12.881,11.165-17.021,24.9-17.05 c19.15-0.048,38.309-0.061,57.462,0c4.922,0.02,9.092,0.597,12.763,1.763c9.363,2.985,14.141,11.627,11.902,21.513 c-3.305,14.671-11.2,26.657-18.34,36.742c-7.761,10.955-15.874,21.876-23.718,32.44c-4.172,5.615-8.272,11.136-12.34,16.68 c-1.131,1.544-2.261,3.34-3.547,5.648c-2.826,5.114-2.462,5.49,1.017,9.083c4.197,4.326,8.619,8.643,12.897,12.817 c6.328,6.177,12.815,12.509,18.908,19.172c7.953,8.714,14.959,17.83,20.836,27.109c5.201,8.214,6.252,17.105,2.884,24.393 c-1.939,4.2-7.109,11.528-19.927,13.35C426.046,370.726,422.067,371.083,409.589,371.083z M302.576,292.145 c7.051,0,14.132,2.558,20.479,7.395c3.523,2.678,7.015,5.84,10.661,9.655c3.117,3.263,6.162,6.57,9.107,9.771l0.19,0.208 c5.08,5.523,10.326,11.226,15.621,16.323c4.165,4.008,9.154,5.97,15.249,5.998c0.354,0.001,1.66,0.029,3.661,0.076 c6.197,0.141,20.479,0.466,32.042,0.466c2.682,0,4.89-0.019,6.697-0.046c-4.024-5.706-8.564-11.334-13.552-16.797 c-5.525-6.043-11.71-12.082-17.694-17.922c-4.472-4.363-9.039-8.82-13.522-13.443c-12.657-13.068-14.471-27.261-5.552-43.397 c1.911-3.427,3.657-6.185,5.517-8.725c4.107-5.597,8.242-11.164,12.377-16.732c7.819-10.526,15.832-21.316,23.403-32 c3.098-4.376,6.37-9.168,9.02-14.204c-15.829-0.035-31.673-0.02-47.515,0.017c-8.945,22.385-18.086,39.956-28.709,55.192 c-8.251,11.831-15.155,20.456-22.389,27.967c-7.768,8.056-15.846,9.745-21.258,9.745c-13.078,0-23.606-9.408-26.823-23.966 c-1.557-7.096-2.293-14.96-2.194-23.394c0.11-9.561,0.428-19.176,0.736-28.475l0.014-0.447c0.209-6.299,0.424-12.809,0.568-19.168 c0.038-1.648-0.052-3.387-0.272-5.198c-2.937-0.444-6.171-0.677-9.81-0.709c-3.667-0.038-7.321-0.105-10.974-0.174 c-5.384-0.1-10.998-0.209-16.356-0.192c1.892,4.63,3.019,9.854,3.333,15.611c0.816,15.162,1.152,25.058,0.853,40.299 c-0.132,7.296-2.152,20.375-4.948,28.179c-3.997,11.264-13.52,18.289-24.837,18.289c-5.607,0-11.223-1.818-16.24-5.259 c-4.858-3.329-9.225-7.349-12.622-11.623c-17.406-21.791-31.685-46.737-43.632-76.233c-0.06-0.147-0.116-0.277-0.167-0.394 c-0.012-0.001-0.025-0.003-0.036-0.003c-2.212-0.061-20.973-0.437-36.019-0.514c4.425,9.524,9.559,20.46,10.291,21.943 c19.021,38.091,35.749,65.605,54.232,89.197c13.858,17.695,28.423,30.488,44.528,39.115c15.553,8.332,33.611,12.382,55.205,12.382 c2.373,0,4.833-0.048,7.35-0.145c0.951-7.145,3.064-20.804,6.127-28.532C279.734,299.667,290.146,292.145,302.576,292.145z"/></svg> |
|
|
avp_grup_v1`, |
|
|
content: { type: 'vk_1-avp-settings-block' }, |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
editor.Components.addType('menu-settings-block', { |
|
|
model: { |
|
|
defaults: { |
|
|
|
|
|
content: '<div id="set_avp_2"></div>', |
|
|
|
|
|
script: function(props) { |
|
|
|
|
|
const initBlock = () => { |
|
|
console.log('Menu settings block initialized with props:'); |
|
|
}; |
|
|
const loadScript = (src, callback) => { |
|
|
const script = document.createElement('script'); |
|
|
script.src = src; |
|
|
script.onload = callback; |
|
|
document.body.appendChild(script); |
|
|
}; |
|
|
|
|
|
loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/menu.js', () => { |
|
|
console.log('Custom script loaded!'); |
|
|
initBlock(); |
|
|
}); |
|
|
}, |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
editor.Blocks.add('menu-settings-block-block', { |
|
|
label: 'Menu Settings Block', |
|
|
content: { type: 'menu-settings-block' }, |
|
|
}); |
|
|
</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: relative; top: 0;"></div>`, |
|
|
attributes: { |
|
|
class: 'fa fa-play' |
|
|
} |
|
|
}); |
|
|
editor.CssComposer.addRules(` |
|
|
#player { |
|
|
width: 480px; |
|
|
height: 270px; |
|
|
border: 3px solid black; |
|
|
margin: 0 auto; |
|
|
position: relative; |
|
|
top: 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", |
|
|
}, |
|
|
]); |
|
|
|
|
|
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> |
|
|
|
|
|
var modal_1 = document.getElementById("myModal_1"); |
|
|
|
|
|
|
|
|
var btn_1 = document.getElementById("myBtn"); |
|
|
|
|
|
|
|
|
var span_1 = document.getElementsByClassName("close_1")[0]; |
|
|
|
|
|
|
|
|
btn_1.onclick = function() { |
|
|
modal_1.style.display = "block"; |
|
|
} |
|
|
|
|
|
|
|
|
span_1.onclick = function() { |
|
|
modal_1.style.display = "none"; |
|
|
} |
|
|
|
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target == modal_1) { |
|
|
modal_1.style.display = "none"; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
var modal_2 = document.getElementById("myModal_2"); |
|
|
|
|
|
|
|
|
var btn_2 = document.getElementById("myBtn_2"); |
|
|
|
|
|
|
|
|
var span_2 = document.getElementsByClassName("close_2")[0]; |
|
|
|
|
|
|
|
|
btn_2.onclick = function() { |
|
|
modal_2.style.display = "block"; |
|
|
} |
|
|
|
|
|
|
|
|
span_2.onclick = function() { |
|
|
modal_2.style.display = "none"; |
|
|
} |
|
|
|
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target == modal_2) { |
|
|
modal_2.style.display = "none"; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
var modal_3 = document.getElementById("myModal_3"); |
|
|
|
|
|
var btn_3 = document.getElementById("myBtn_3"); |
|
|
|
|
|
var span_3 = document.getElementsByClassName("close_3")[0]; |
|
|
|
|
|
btn_3.onclick = function() { |
|
|
modal_3.style.display = "block"; |
|
|
} |
|
|
|
|
|
span_3.onclick = function() { |
|
|
modal_3.style.display = "none"; |
|
|
} |
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target == modal_3) { |
|
|
modal_3.style.display = "none"; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
console.log('DOMContentLoaded выполнен'); |
|
|
|
|
|
|
|
|
document.getElementById('testBtn').addEventListener('click', function() { |
|
|
console.log('Тестовая кнопка работает!'); |
|
|
|
|
|
|
|
|
const editor = grapesjs.editors[0]; |
|
|
const htmlContent = editor.getHtml(); |
|
|
const cssContent = editor.getCss(); |
|
|
|
|
|
|
|
|
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 = '-25%'; |
|
|
} 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> |
