|
<!DOCTYPE html> |
|
<html lang="ru"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Green builder - Конструктор лендингов и VK приложений</title> |
|
|
|
|
|
|
|
<link rel="icon" href="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/icon/prevu.svg" type="image/svg+xml"> |
|
<link rel="shortcut icon" href="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/icon/prevu.svg" type="image/svg+xml"> |
|
|
|
|
|
|
|
<meta name="description" content="Green builder - Конструктор лендингов и VK приложений"> |
|
|
|
|
|
<meta property="og:image" content="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/images/prevu.jpg"> |
|
<meta property="og:description" content="Green builder - Конструктор лендингов и VK приложений"> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/grapesjs"></script> |
|
|
|
|
|
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" /> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
<link rel="stylesheet" href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"> |
|
|
|
|
|
|
|
|
|
|
|
<link href="https://unpkg.com/grapesjs-rulers/dist/grapesjs-rulers.min.css" rel="stylesheet"> |
|
|
|
<script src="https://unpkg.com/grapesjs-rulers"></script> |
|
|
|
|
|
|
|
<link href="https://unpkg.com/grapesjs-plugin-toolbox/dist/grapesjs-plugin-toolbox.min.css" rel="stylesheet"> |
|
|
|
<script src="https://unpkg.com/grapesjs-plugin-toolbox"></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> |
|
<script src="https://unpkg.com/grapesjs-tabs"></script> |
|
<script src="https://unpkg.com/grapesjs-tooltip"></script> |
|
<script src="https://unpkg.com/grapesjs-script-editor"></script> |
|
<script src="https://unpkg.com/grapesjs-tui-image-editor"></script> |
|
|
|
<script> |
|
var grup = 52295022; |
|
var sky = '227410796/29293567/VjhNQm53UnFMbjMrNmRNZllxSWNSZz0'; |
|
</script> |
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
(function(c,l,a,r,i,t,y){ |
|
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; |
|
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; |
|
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); |
|
})(window, document, "clarity", "script", "outw2rt6lk"); |
|
</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; |
|
padding-bottom: 60px; |
|
} |
|
#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; |
|
} |
|
} |
|
|
|
|
|
|
|
.gjs-select option, |
|
.gjs-field-select option, |
|
.gjs-clm-select option, |
|
.gjs-sm-select option, |
|
.gjs-fields option, |
|
.gjs-sm-unit option { |
|
background-color: green !important; |
|
} |
|
|
|
|
|
</style> |
|
|
|
<style> |
|
|
|
|
|
.modal_1 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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; |
|
max-height: 80vh; |
|
overflow-y: 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_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> |
|
|
|
iframe { |
|
width: 100%; |
|
height: 500px; |
|
border: none; |
|
} |
|
|
|
|
|
#iframe1 { |
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.modal_2 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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); |
|
margin-left: 10px; |
|
} |
|
|
|
|
|
.modal-content_2 { |
|
position: relative; |
|
background-color: #fefefe; |
|
margin: auto; |
|
max-height: 80vh; |
|
overflow-y: auto; |
|
padding: 0; |
|
border: 1px solid #888; |
|
width: 81%; |
|
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; |
|
top: 0; |
|
width: 100%; |
|
height: calc(100% - 60px); |
|
transition: left 0.3s ease; |
|
} |
|
#toggleAppBtn { |
|
z-index: 1000; |
|
} |
|
</style> |
|
|
|
|
|
<style> |
|
|
|
.modal_3 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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; |
|
max-height: 80vh; |
|
overflow-y: 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; |
|
} |
|
|
|
.modal-body_3 input[type="text"] { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
} |
|
|
|
.modal-body_3 textarea { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
height: 100px; |
|
resize: vertical; |
|
} |
|
|
|
.modal-body_3 input[type="text"]:focus, |
|
.modal-body_3 textarea:focus { |
|
background-color: #ddd; |
|
outline: none; |
|
} |
|
|
|
|
|
.modal-body_3 button { |
|
background-color: green; |
|
color: white; |
|
padding: 14px 20px; |
|
margin: 8px 0; |
|
border: none; |
|
cursor: pointer; |
|
width: 100%; |
|
opacity: 0.9; |
|
} |
|
|
|
.modal-body_3 button:hover { |
|
opacity:1; |
|
} |
|
|
|
.input-group { |
|
margin-bottom: 15px; |
|
} |
|
|
|
.input-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
color: #333; |
|
} |
|
</style> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
.modal_4 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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_4 { |
|
position: relative; |
|
background-color: #fefefe; |
|
margin: auto; |
|
max-height: 80vh; |
|
overflow-y: 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_4 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
@keyframes animatetop_4 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
|
|
.close_4 { |
|
color: white; |
|
float: right; |
|
font-size: 28px; |
|
font-weight: bold; |
|
} |
|
.close_4:hover, |
|
.close_4:focus { |
|
color: #000; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
.modal-header_4 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
.modal-body_4 {padding: 2px 16px;} |
|
.modal-footer_4 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
|
|
.modal-body_4 input[type="text"] { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
} |
|
|
|
.modal-body_4 textarea { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
height: 100px; |
|
resize: vertical; |
|
} |
|
|
|
.modal-body_4 input[type="text"]:focus, |
|
.modal-body_4 textarea:focus { |
|
background-color: #ddd; |
|
outline: none; |
|
} |
|
|
|
|
|
.modal-body_4 button { |
|
background-color: green; |
|
color: white; |
|
padding: 14px 20px; |
|
margin: 8px 0; |
|
border: none; |
|
cursor: pointer; |
|
width: 100%; |
|
opacity: 0.9; |
|
} |
|
|
|
.modal-body_4 button:hover { |
|
opacity:1; |
|
} |
|
|
|
.input-group { |
|
margin-bottom: 15px; |
|
} |
|
|
|
.input-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
color: #333; |
|
} |
|
</style> |
|
|
|
<style> |
|
|
|
.modal_5 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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_5 { |
|
position: relative; |
|
background-color: #fefefe; |
|
margin: auto; |
|
padding: 0; |
|
max-height: 80vh; |
|
overflow-y: auto; |
|
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_5 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
@keyframes animatetop_5 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
|
|
.close_5 { |
|
color: white; |
|
float: right; |
|
font-size: 28px; |
|
font-weight: bold; |
|
} |
|
.close_5:hover, |
|
.close_5:focus { |
|
color: #000; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
.modal-header_5 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
.modal-body_5 {padding: 2px 16px;} |
|
.modal-footer_5 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
|
|
.modal-body_5 input[type="text"] { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
} |
|
|
|
.modal-body_5 textarea { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
height: 100px; |
|
resize: vertical; |
|
} |
|
|
|
.modal-body_5 input[type="text"]:focus, |
|
.modal-body_5 textarea:focus { |
|
background-color: #ddd; |
|
outline: none; |
|
} |
|
|
|
|
|
.modal-body_5 button { |
|
background-color: green; |
|
color: white; |
|
padding: 14px 20px; |
|
margin: 8px 0; |
|
border: none; |
|
cursor: pointer; |
|
width: 100%; |
|
opacity: 0.9; |
|
} |
|
|
|
.modal-body_5 button:hover { |
|
opacity:1; |
|
} |
|
|
|
.input-group { |
|
margin-bottom: 15px; |
|
} |
|
|
|
.input-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
color: #333; |
|
} |
|
</style> |
|
|
|
|
|
|
|
<style> |
|
|
|
.modal_8 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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_8 { |
|
position: relative; |
|
background-color: #fefefe; |
|
margin: auto; |
|
padding: 0; |
|
max-height: 80vh; |
|
overflow-y: auto; |
|
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_8 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
@keyframes animatetop_8 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
|
|
.close_8 { |
|
color: white; |
|
float: right; |
|
font-size: 28px; |
|
font-weight: bold; |
|
} |
|
.close_8:hover, |
|
.close_8:focus { |
|
color: #000; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
.modal-header_8 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
.modal-body_8 {padding: 2px 16px;} |
|
.modal-footer_8 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
|
|
.modal-body_8 input[type="text"] { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
} |
|
|
|
.modal-body_8 textarea { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
height: 100px; |
|
resize: vertical; |
|
} |
|
|
|
.modal-body_8 input[type="text"]:focus, |
|
.modal-body_8 textarea:focus { |
|
background-color: #ddd; |
|
outline: none; |
|
} |
|
|
|
|
|
.modal-body_8 button { |
|
background-color: green; |
|
color: white; |
|
padding: 14px 20px; |
|
margin: 8px 0; |
|
border: none; |
|
cursor: pointer; |
|
width: 100%; |
|
opacity: 0.9; |
|
} |
|
|
|
.modal-body_8 button:hover { |
|
opacity:1; |
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.modal_9 { |
|
display: none; |
|
position: fixed; |
|
z-index: 20; |
|
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_9 { |
|
position: relative; |
|
background-color: #fefefe; |
|
margin: auto; |
|
padding: 0; |
|
max-height: 80vh; |
|
overflow-y: auto; |
|
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_9 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
@keyframes animatetop_9 { |
|
from {top:-300px; opacity:0} |
|
to {top:0; opacity:1} |
|
} |
|
|
|
.close_9 { |
|
color: white; |
|
float: right; |
|
font-size: 28px; |
|
font-weight: bold; |
|
} |
|
.close_9:hover, |
|
.close_9:focus { |
|
color: #000; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
.modal-header_9 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
.modal-body_9 {padding: 2px 16px;} |
|
.modal-footer_9 { |
|
padding: 2px 16px; |
|
background-color: green; |
|
color: white; |
|
} |
|
|
|
.modal-body_9 input[type="text"] { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
} |
|
|
|
.modal-body_9 textarea { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0 22px 0; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
background: #f1f1f1; |
|
box-sizing: border-box; |
|
height: 100px; |
|
resize: vertical; |
|
} |
|
|
|
.modal-body_9 input[type="text"]:focus, |
|
.modal-body_9 textarea:focus { |
|
background-color: #ddd; |
|
outline: none; |
|
} |
|
|
|
|
|
.modal-body_9 button { |
|
background-color: green; |
|
color: white; |
|
padding: 14px 20px; |
|
margin: 8px 0; |
|
border: none; |
|
cursor: pointer; |
|
width: 100%; |
|
opacity: 0.9; |
|
} |
|
|
|
.modal-body_9 button:hover { |
|
opacity:1; |
|
} |
|
|
|
</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> |
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
#myBtn_3 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
|
|
#vkontBtn { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#getBtn { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
#myBtn { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
#myBtn_2 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#myBtn_4 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#myBtn_5 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#myBtn_8 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#myBtn_9 { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
|
|
#vk_auth_button { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 10px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
margin-bottom: 20px; |
|
} |
|
|
|
#vkontBtn:hover { |
|
background-color: #388E3C; |
|
} |
|
|
|
#myBtn_3:hover { |
|
background-color: #388E3C; |
|
} |
|
|
|
#getBtn:hover { |
|
background-color: #388E3C; |
|
} |
|
#myBtn:hover { |
|
background-color: #388E3C; |
|
} |
|
#myBtn_2:hover { |
|
background-color: #388E3C; |
|
} |
|
#myBtn_4:hover { |
|
background-color: #388E3C; |
|
} |
|
#myBtn_5:hover { |
|
background-color: #388E3C; |
|
} |
|
|
|
|
|
#myBtn_8:hover { |
|
background-color: #388E3C; |
|
} |
|
#myBtn_9:hover { |
|
background-color: #388E3C; |
|
} |
|
#vk_auth_button:hover { |
|
background-color: #388E3C; |
|
} |
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
.button-container { |
|
position: fixed; |
|
top: 770px; |
|
left: 20px; |
|
z-index: 100; |
|
background-color: transparent; |
|
display: flex; |
|
gap: 10px; |
|
padding-bottom: 20px; |
|
} |
|
|
|
.button-cont1, .button-cont2, .button-cont3, .button-cont4, .button-cont5 { |
|
padding: 10px; |
|
background-color: transparent; |
|
} |
|
</style> |
|
|
|
|
|
<style> |
|
|
|
.overlay-block { |
|
|
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
width: 30%; |
|
height: 590px; |
|
border: 1px solid #388E3C; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
z-index: 0; |
|
} |
|
</style> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
.mod_vk { |
|
|
|
z-index: 2000; |
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
vkBridge.send('VKWebAppInit'); |
|
</script> |
|
|
|
|
|
|
|
|
|
<div class="button-container"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="button-con8"> |
|
<svg version="1.1" id="vk_auth_button" xmlns="http://www.w3.org/2000/svg" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 347.971 347.971" style="enable-background:new 0 0 347.971 347.971;" xml:space="preserve"><g><path d="M317.308,54.367C257.945,54.367,212.46,37.403,173.997,0C135.522,37.403,90.034,54.367,30.663,54.367 c0,97.406-20.158,236.937,143.334,293.604C337.465,291.304,317.308,151.773,317.308,54.367z M62.886,85.378 c35.75-3.721,66.89-13.996,94.797-31.282v109.059H64.467C61.94,137.053,62.403,110.301,62.886,85.378z M236.384,274.832 c-12.451,12.023-27.895,22.469-46.086,31.234V195.779h88.215c-1.878,8.498-4.223,16.811-7.193,24.828 C263.426,242.02,251.99,259.762,236.384,274.832z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="button-con1"> |
|
<svg id="myBtn_3" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m22.0773926 7.6046143c-1.7001953-3.8825684-5.5747681-6.6046143-10.0773926-6.6046143s-8.3771973 2.7220459-10.0773926 6.6046143c-.0015869.0036011-.003479.0067139-.0050049.010376-.5872192 1.3447875-.9176025 2.8262939-.9176025 4.3850097s.3303833 3.0402222.9176025 4.3850098c.0015259.0036621.003418.0067749.0050049.010376 1.7001953 3.8825683 5.5747681 6.6046142 10.0773926 6.6046142s8.3771973-2.7220459 10.0773926-6.6046143c.0015869-.0036011.003479-.0067139.0050049-.010376.5872192-1.3447875.9176025-2.8262939.9176025-4.3850097s-.3303833-3.0402222-.9176025-4.3850098c-.0015259-.0036621-.003418-.0067749-.0050049-.0103759zm-10.0773926 13.3953857c-.7915039 0-1.8123169-1.4749146-2.4360352-4h4.8720703c-.6237182 2.5250854-1.6445312 4-2.4360351 4zm-2.809082-6c-.1200562-.9163208-.190918-1.9178467-.190918-3s.0708618-2.0836792.190918-3h5.6181641c.1200561.9163208.1909179 1.9178467.1909179 3s-.0708618 2.0836792-.190918 3zm-6.190918-3c0-1.0530396.1912842-2.0599976.5251465-3h3.6586304c-.1218873.9853516-.1837769 1.9985352-.1837769 3s.0618896 2.0146484.1837769 3h-3.6586304c-.3338623-.9400024-.5251465-1.9469604-.5251465-3zm9-9c.7915039 0 1.8123169 1.4749146 2.4360352 4h-4.8720704c.6237183-2.5250854 1.6445313-4 2.4360352-4zm4.8162231 6h3.6586304c.3338623.9400024.5251465 1.9469604.5251465 3s-.1912842 2.0599976-.5251465 3h-3.6586304c.1218873-.9853516.1837769-1.9985352.1837769-3s-.0618896-2.0146484-.1837769-3zm2.6618653-2h-3.0043945c-.2769165-1.2545166-.6625977-2.4039917-1.151001-3.3565063 1.7001342.6785278 3.1484375 1.8555297 4.1553955 3.3565063zm-10.8007813-3.3565063c-.4884033.9525146-.8740844 2.1019897-1.1510009 3.3565063h-3.0043946c1.006958-1.5009766 2.4552613-2.6779785 4.1553955-3.3565063zm-4.1553955 13.3565063h3.0043945c.2769165 1.2545166.6625977 2.4039917 1.151001 3.3565063-1.7001342-.6785278-3.1484375-1.8555297-4.1553955-3.3565063zm10.8007813 3.3565063c.4884033-.9525146.8740844-2.1019897 1.1510009-3.3565063h3.0043945c-1.0069579 1.5009766-2.4552612 2.6779785-4.1553954 3.3565063z" fill="#000000" style="fill: rgb(245, 245, 245);"></path></svg> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="button-con2"> |
|
<svg id="vkontBtn" viewBox="0 0 176 176" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g id="Layer_2" data-name="Layer 2"><g id="_11.vk" data-name="11.vk"><path id="icon" d="m88 0a88 88 0 1 0 88 88 88 88 0 0 0 -88-88zm50.72 122.44c-2.56.36-15.08 0-15.73 0a12.29 12.29 0 0 1 -8.69-3.44c-2.64-2.55-5-5.35-7.58-8a20.22 20.22 0 0 0 -2.47-2.24c-2.06-1.58-4.1-1.23-5.07 1.21a47.37 47.37 0 0 0 -1.58 8.03c-.17 2.46-1.73 4-4.49 4.17-1.71.09-3.42.13-5.11.08a38.85 38.85 0 0 1 -17.69-4.37 48.15 48.15 0 0 1 -15.13-13.22c-6.67-8.52-12-17.88-16.76-27.53-.25-.49-5.13-10.87-5.25-11.36-.44-1.63 0-3.2 1.35-3.75.86-.33 16.94 0 17.21 0a5.64 5.64 0 0 1 5.4 3.89 84 84 0 0 0 12.08 21.18 11.56 11.56 0 0 0 2.45 2.23c1.31.9 2.55.59 3.09-.93a26.28 26.28 0 0 0 1.12-6.45c.09-4.34 0-7.19-.24-11.53-.16-2.78-1.14-5.21-5.24-6-1.26-.23-1.37-1.27-.56-2.31 1.69-2.15 4-2.5 6.59-2.63 3.86-.22 7.72-.07 11.58 0h.84a23.91 23.91 0 0 1 5 .51 4.61 4.61 0 0 1 3.67 4.11 16 16 0 0 1 .25 3.32c-.1 4.73-.33 9.47-.38 14.2a24.3 24.3 0 0 0 .51 5.59c.55 2.52 2.28 3.15 4 1.33a62.34 62.34 0 0 0 6.11-7.53 75.78 75.78 0 0 0 8-15.55c1.12-2.81 2-3.43 5-3.43h17.06a10.12 10.12 0 0 1 3 .4 2.59 2.59 0 0 1 1.79 3.35c-.84 3.74-2.86 6.93-5 10-3.47 4.91-7.13 9.7-10.68 14.55a19.78 19.78 0 0 0 -1.17 1.95c-1.34 2.42-1.24 3.77.7 5.77 3.1 3.19 6.41 6.17 9.4 9.45a55.77 55.77 0 0 1 5.92 7.69c2.13 3.44.78 6.68-3.3 7.26z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></svg> |
|
|
|
</div> |
|
|
|
<div class="button-con3"> |
|
<svg id="getBtn" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g><path d="m179.197 251.983h-97.715c-12.991.066-12.221 21.082 0 20.827h33.958v102c-.053 9.699 29.942 9.718 30.03 0v-102h33.727c12.235.121 12.97-20.745 0-20.827z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m275.984 316.956 38.577-50.021c7.357-9.217-6.705-15.712-17.094-15.843-4.852 0-7.855 1.958-10.164 4.985l-31.417 43.612-31.416-43.612c-2.079-3.026-5.313-4.984-9.934-4.984-10.389.131-24.45 6.625-17.094 15.843l38.577 50.021-39.963 50.199c-7.007 8.877 8.466 15.725 17.787 15.843 3.696 0 6.699-1.602 8.317-3.738l33.726-45.749 33.958 45.749c6.281 9.671 34.734-1.495 26.104-12.104z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m430.751 251.983h-97.714c-12.992.066-12.222 21.082 0 20.827h33.957v102c-.053 9.698 29.941 9.719 30.03 0v-102h33.727c12.235.121 12.97-20.745 0-20.827z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m467 185.805h-14.7v-45.999c0-4.017-1.61-7.865-4.472-10.684l-126.651-124.806c-2.807-2.766-6.588-4.316-10.529-4.316h-235.648c-8.284 0-15 6.716-15 15v170.805h-15c-24.813 0-45 20.187-45 45v175.195c0 24.813 20.187 45 45 45h15v46c0 8.284 6.716 15 15 15h362.3c8.284 0 15-6.716 15-15v-46h14.7c24.813 0 45-20.187 45-45v-175.195c0-24.813-20.187-45-45-45zm-141.352-134.965 75.059 73.966h-60.059c-8.271 0-15-6.729-15-15zm-235.648-20.84h205.648v79.806c0 24.813 20.187 45 45 45h81.652v30.999h-332.3zm332.3 452h-332.3v-31h332.3zm59.7-76c0 8.271-6.729 15-15 15h-422c-8.271 0-15-6.729-15-15v-175.195c0-8.271 6.729-15 15-15h422c8.271 0 15 6.729 15 15z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg> |
|
|
|
|
|
</div> |
|
|
|
<div class="button-con4"> |
|
<svg id="myBtn" enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m30 23v5c0 1.105-.895 2-2 2h-24c-1.105 0-2-.895-2-2v-5h3v4h22v-4z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m22.788 17.212-6.788 6.788-6.788-6.788c-.447-.447-.13-1.212.502-1.212h4.286v-12c0-1.105.895-2 2-2 1.105 0 2 .895 2 2v12h4.286c.632 0 .949.765.502 1.212z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></svg> |
|
|
|
</div> |
|
|
|
<div class="button-con5"> |
|
<svg id="myBtn_2" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m12 16c-.205 0-.401-.084-.543-.232l-5.25-5.5c-.455-.477-.114-1.268.543-1.268h2.75v-1.25c0-4.273 3.477-7.75 7.75-7.75.414 0 .75.336.75.75s-.336.75-.75.75c-1.517 0-2.75 1.233-2.75 2.75v4.75h2.75c.657 0 .998.791.543 1.268l-5.25 5.5c-.142.148-.338.232-.543.232z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m21 18h-18c-1.654 0-3 1.346-3 3s1.346 3 3 3h18c1.654 0 3-1.346 3-3s-1.346-3-3-3zm0 4.5h-10v-3h10c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></svg> |
|
</div> |
|
|
|
|
|
<div class="button-con6"> |
|
<svg id="myBtn_4" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g><path d="m456.834 0h-401.667c-30.419 0-55.167 24.748-55.167 55.167v401.666c0 30.419 24.748 55.167 55.167 55.167h401.667c30.418 0 55.166-24.748 55.166-55.167v-401.666c0-30.419-24.748-55.167-55.166-55.167zm25.166 456.833c0 13.877-11.29 25.167-25.166 25.167h-401.667c-13.877 0-25.167-11.29-25.167-25.167v-401.666c0-13.877 11.29-25.167 25.167-25.167h401.667c13.876 0 25.166 11.29 25.166 25.167z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 208.867c-25.99 0-47.134 21.144-47.134 47.133 0 25.99 21.144 47.134 47.134 47.134 25.989 0 47.133-21.144 47.133-47.134 0-25.989-21.143-47.133-47.133-47.133zm0 64.267c-9.448 0-17.134-7.686-17.134-17.134 0-9.447 7.686-17.133 17.134-17.133 9.447 0 17.133 7.686 17.133 17.133 0 9.448-7.685 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 80.333c-25.99 0-47.134 21.144-47.134 47.134 0 25.989 21.144 47.133 47.134 47.133 25.989 0 47.133-21.144 47.133-47.133 0-25.99-21.143-47.134-47.133-47.134zm0 64.267c-9.448 0-17.134-7.686-17.134-17.133 0-9.448 7.686-17.134 17.134-17.134 9.447 0 17.133 7.686 17.133 17.134 0 9.447-7.685 17.133-17.133 17.133z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m111.4 337.4c-25.99 0-47.134 21.144-47.134 47.133 0 25.99 21.144 47.134 47.134 47.134 25.989 0 47.133-21.144 47.133-47.134 0-25.989-21.143-47.133-47.133-47.133zm0 64.267c-9.448 0-17.134-7.686-17.134-17.134 0-9.447 7.686-17.133 17.134-17.133 9.447 0 17.133 7.686 17.133 17.133 0 9.448-7.685 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 80.333h-160.667c-25.989 0-47.133 21.144-47.133 47.134 0 25.989 21.144 47.133 47.133 47.133h160.667c25.989 0 47.133-21.144 47.133-47.133-.001-25.99-21.144-47.134-47.133-47.134zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.133 0-9.448 7.686-17.134 17.133-17.134h160.667c9.447 0 17.133 7.686 17.133 17.134-.001 9.447-7.686 17.133-17.133 17.133z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 208.867h-160.667c-25.989 0-47.133 21.144-47.133 47.133 0 25.99 21.144 47.134 47.133 47.134h160.667c25.989 0 47.133-21.144 47.133-47.134-.001-25.989-21.144-47.133-47.133-47.133zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.134 0-9.447 7.686-17.133 17.133-17.133h160.667c9.447 0 17.133 7.686 17.133 17.133-.001 9.448-7.686 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m400.601 337.4h-160.667c-25.989 0-47.133 21.144-47.133 47.133 0 25.99 21.144 47.134 47.133 47.134h160.667c25.989 0 47.133-21.144 47.133-47.134-.001-25.989-21.144-47.133-47.133-47.133zm0 64.267h-160.667c-9.447 0-17.133-7.686-17.133-17.134 0-9.447 7.686-17.133 17.133-17.133h160.667c9.447 0 17.133 7.686 17.133 17.133-.001 9.448-7.686 17.134-17.133 17.134z" fill="#000000" style="fill: rgb(242, 242, 242);"></path></g></svg> |
|
</div> |
|
|
|
<div class="button-con7"> |
|
<svg id="myBtn_5" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="256" x2="256" y1="512" y2="0"><stop offset="0" stop-color="#5558ff"></stop><stop offset="1" stop-color="#00c0ff"></stop></linearGradient><g><g><g><path d="m306.768 67.76 22.692-46.14c2.286-4.649 2.012-10.149-.727-14.547-2.737-4.399-7.552-7.073-12.733-7.073h-120c-5.181 0-9.996 2.674-12.734 7.072s-3.013 9.898-.727 14.547l22.692 46.141c-100.818 23.301-174.231 113.448-174.231 219.24 0 124.351 100.632 225 225 225 124.351 0 225-100.632 225-225 0-105.975-73.588-195.98-174.232-219.24zm-14.861-37.76-35.907 73.011-35.907-73.011zm-78.327 272c1.863 5.254 4.677 10.058 8.233 14.213l-45.857 79.427c-29.515-21.804-49.863-55.328-54.119-93.64zm-91.742-30c4.255-38.313 24.603-71.836 54.119-93.64l45.857 79.427c-3.556 4.155-6.37 8.959-8.233 14.213zm125.944 59.234c2.667.495 5.411.766 8.218.766s5.552-.271 8.218-.766l45.867 79.444c-16.568 7.274-34.861 11.322-54.085 11.322s-37.517-4.048-54.086-11.321zm-6.782-44.234c0-8.271 6.729-15 15-15s15 6.729 15 15-6.729 15-15 15-15-6.729-15-15zm49.187 29.213c3.556-4.155 6.37-8.959 8.233-14.213h91.742c-4.255 38.313-24.603 71.836-54.119 93.64zm8.233-44.213c-1.863-5.254-4.677-10.058-8.233-14.213l45.857-79.427c29.515 21.804 49.864 55.328 54.119 93.64zm-34.201-29.234c-2.667-.495-5.411-.766-8.219-.766s-5.552.271-8.218.766l-45.867-79.444c16.568-7.274 34.861-11.322 54.085-11.322s37.517 4.048 54.086 11.321zm-8.219 239.234c-107.523 0-195-87.477-195-195 0-93.424 67.186-173.966 157.892-191.464l13.827 28.114c-80.982 11.487-141.719 81.278-141.719 163.35 0 91.148 74.19 165 165 165 90.581 0 165-73.621 165-165 0-82.185-60.848-151.878-141.719-163.35l13.827-28.114c90.706 17.498 157.892 98.04 157.892 191.464 0 107.523-87.477 195-195 195z" fill="url(#SVGID_1_)" style="fill: rgb(250, 250, 250);"></path></g></g></g></svg> |
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="button-con8"> |
|
<svg id="myBtn_8" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="m75 172.213 30 30 30-30 30 30 30-30 23.787 23.787h68.268c21.152 36.604 60.41 60 103.946 60 66.72 0 121-53.832 121-120s-54.281-120-121.001-120c-43.508 0-82.779 23.371-103.946 60h-248.267l-38.787 38.787v42.427l45 45zm-45-45 21.213-21.213h254.372c.539-.636 22.164-60 85.415-60 50.178 0 91 40.374 91 90s-40.822 90-91 90c-64.76 0-84.164-58.523-85.415-60h-74.372l-36.213-36.213-30 30-30-30-30 30-30-30-30 30-15-15z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m60 256h30v90h-30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m240 256h30v90h-30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m300 256h30v90h-30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m180 376h30v90h-30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m210 256h-90v90h90zm-30 60h-30v-30h30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m150 376h-90v90h90zm-30 60h-30v-30h30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m240 466h90v-90h-90zm30-60h30v30h-30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m407 181c24.813 0 45-20.187 45-45s-20.187-45-45-45c-24.863 0-46 20.096-46 45 0 24.866 21.105 45 46 45zm0-60c8.271 0 15 6.729 15 15s-6.729 15-15 15c-8.523 0-16-7.009-16-15s7.477-15 16-15z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m30 256h30v-30h-60v60h30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m60 466h-30v-30h-30v60h60z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m390 496v-60h-30v30h-30v30z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg> |
|
</div> |
|
|
|
<div class="button-con9"> |
|
<svg version="1.1" id="myBtn_9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.021 512.021" style="enable-background:new 0 0 512.021 512.021;" xml:space="preserve" width="36" height="36"><g><g><g><path d="M495.616,416.479L380.331,301.194c-11.904-11.925-18.389-27.029-17.749-41.451c1.152-26.325-9.856-51.456-33.664-76.821 c-20.011-21.355-46.677-33.621-74.24-33.621h-0.021c-23.701,0.299-46.272,8.576-65.323,23.957 c-2.731,2.197-4.203,5.568-3.947,9.045s2.176,6.613,5.163,8.405l65.195,39.104c-1.941,19.584-13.525,36.8-31.253,45.973 l-58.368-35.029c-3.221-1.941-7.701-1.792-11.029,0.021c-3.243,1.771-5.333,5.056-5.547,8.747 c-1.749,29.739,8.491,58.005,28.864,79.595c20.075,21.291,48.384,33.493,77.632,33.493c7.851,0,15.723-1.024,24.363-3.221 l136.171,136.171c10.56,10.56,24.597,16.384,39.552,16.384c30.827,0,55.893-25.088,55.893-55.936 C512,441.076,506.219,427.06,495.616,416.479z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="M277.099,386.314c-2.304-2.283-5.44-3.477-8.747-3.051c-40.171,4.501-78.613-11.008-105.493-39.509 c-24.427-25.92-36.736-59.819-34.645-95.488c0.661-11.093,6.869-20.885,16.619-26.219c4.8-2.624,10.261-4.011,16.832-4.011h0.128 c0.149,0,0.299-0.021,0.469,0c5.056,0.32,10.88-4.693,10.88-10.667c0-3.285-1.493-6.229-3.84-8.192 c-3.072-4.608-4.864-9.899-5.248-15.424c-0.725-10.411,3.691-20.544,11.84-27.115c22.805-18.411,49.941-28.331,78.379-28.693 c33.771,0,65.792,14.336,90.219,40.363c27.904,29.781,40.789,59.989,39.403,92.331c-0.363,8.363,3.947,17.856,11.52,25.451 l46.379,46.379c2.389,2.389,5.803,3.456,9.088,3.008l41.472-6.123c11.179-1.429,19.627-11.285,19.627-22.933V205.535 c0.021-11.605-8.384-21.483-19.371-22.891l-59.051-8.704c-5.077-11.563-11.52-22.912-19.52-34.432l22.464-57.515 c4.139-10.88-0.128-22.848-9.92-28.352l-84.8-50.389c-9.707-5.931-22.784-3.371-29.739,5.675l-36.8,48.363 c-14.251-1.493-24.235-1.493-38.485,0L199.936,8.863c-6.72-8.725-19.179-11.563-29.611-5.675L85.675,53.492 c-9.621,5.397-14.059,17.536-10.133,28.565l22.421,57.365c-7.744,10.987-14.293,22.549-19.52,34.496l-58.837,8.683 C8.427,184.052,0,193.908,0,205.556v100.885c0,11.648,8.448,21.504,19.413,22.912l59.051,8.704 c5.077,11.563,11.52,22.912,19.52,34.432L75.52,430.004c-4.139,10.901,0.128,22.869,9.92,28.352l85.12,50.603 c9.749,5.483,22.635,2.901,29.397-5.888l36.779-48.363c11.328,1.237,27.157,1.237,38.507,0l36.821,48.427 c4.331,5.611,10.88,8.832,17.984,8.832c3.947,0,7.893-1.024,11.627-3.136l24.533-14.592c2.837-1.685,4.736-4.565,5.141-7.851 c0.405-3.264-0.704-6.549-3.051-8.875L277.099,386.314z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></g></svg> |
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div id="overlayBlock" class="overlay-block"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/user" title="Iframe Example"></iframe> |
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_1"> |
|
<br><br><br> |
|
</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>Менеджер медиафайлов</h2> |
|
</div> |
|
<div class="modal-body_2"> |
|
|
|
|
|
<iframe id="iframe2" src="https://dmtuit-psy-vk.hf.space/user" title="Iframe Example"></iframe> |
|
<iframe id="iframe3" 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"> |
|
<br><br><br> |
|
</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>Страница для глобального размещения</h2> |
|
</div> |
|
<div class="modal-body_3"> |
|
<div class="input-group"> |
|
<label for="faviconUrl"><strong>URL иконки:</strong></label> |
|
<input type="text" id="faviconUrl" name="faviconUrl"> |
|
</div> |
|
|
|
<div class="input-group"> |
|
<label for="previewImageUrl"><strong>URL превью изображения:</strong></label> |
|
<input type="text" id="previewImageUrl" name="previewImageUrl"> |
|
</div> |
|
|
|
<div class="input-group"> |
|
<label for="pageTitle"><strong>Заголовок страницы:</strong></label> |
|
<input type="text" id="pageTitle" name="pageTitle"> |
|
</div> |
|
|
|
<div class="input-group"> |
|
<label for="pageDescription"><strong>Описание страницы:</strong></label> |
|
<textarea id="pageDescription" name="pageDescription"></textarea> |
|
</div> |
|
|
|
<button id="globBtn">Скачать готовую страницу</button> |
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_3"> |
|
<br><br><br> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
<div id="myModal_4" class="modal_4"> |
|
|
|
<div class="modal-content_4"> |
|
<div class="modal-header_4"> |
|
<span class="close_4">×</span> |
|
<h2>Менеджер медиафайлов</h2> |
|
</div> |
|
<div class="modal-body_4"> |
|
|
|
|
|
<iframe src="https://dmtuit-psy-vk.hf.space/menu_json?api_sys=fasSd345D" title="Iframe Example"></iframe> |
|
|
|
|
|
|
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_4"> |
|
<br><br><br> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<div id="myModal_5" class="modal_5"> |
|
|
|
<div class="modal-content_5"> |
|
<div class="modal-header_5"> |
|
<span class="close_5">×</span> |
|
<h2>Менеджер медиафайлов</h2> |
|
</div> |
|
<div class="modal-body_5"> |
|
|
|
|
|
<iframe id="iframe5" src="https://dmtuit-psy-vk.hf.space/koleso?api_sys=fasSd345D" title="koleso"></iframe> |
|
|
|
|
|
|
|
|
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_5"> |
|
<br><br><br> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="myModal_8" class="modal_8"> |
|
|
|
<div class="modal-content_8"> |
|
<div class="modal-header_8"> |
|
<span class="close_8">×</span> |
|
<h2>Шифрование api_key_auth и ссылок для ВК приложений с доступом</h2> |
|
</div> |
|
<div class="modal-body_8"> |
|
|
|
|
|
<iframe id="iframe8" src="https://dmtuit-psy-vk.hf.space/crypto?api_sys=fasSd345D" title="koleso"></iframe> |
|
|
|
|
|
|
|
|
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_8"> |
|
<br><br><br> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<div id="myModal_9" class="modal_9"> |
|
|
|
<div class="modal-content_9"> |
|
<div class="modal-header_9"> |
|
<span class="close_9">×</span> |
|
<h2>Настройки системы</h2> |
|
</div> |
|
<div class="modal-body_9"> |
|
|
|
|
|
<iframe id="iframe9" src="https://dmtuit-psy-vk.hf.space/user" title="Iframe Example"></iframe> |
|
|
|
|
|
|
|
|
|
<br><br><br> |
|
</div> |
|
<div class="modal-footer_"> |
|
<br><br><br> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<script src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/iflame_in.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
var 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", |
|
"grapesjs-tabs", |
|
"grapesjs-tooltip", |
|
"grapesjs-script-editor", |
|
"grapesjs-rulers", |
|
"grapesjs-tui-image-editor" |
|
], |
|
pluginsOpts: { |
|
"gjs-blocks-basic": { |
|
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'], |
|
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": { |
|
|
|
}, |
|
"grapesjs-tabs": { |
|
|
|
}, |
|
"grapesjs-tooltip": { |
|
|
|
}, |
|
"grapesjs-script-editor": { |
|
|
|
starter: 'let el = this', |
|
toolbarIcon: '<i class="fa fa-puzzle-piece"></i>', |
|
scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'], |
|
toolbarBtnCustomScript: {}, |
|
onRun: () => console.log('valid syntax'), |
|
onError: err => console.log('error:', err), |
|
modalTitle: 'Script', |
|
codeViewOptions: {}, |
|
buttonLabel: 'save', |
|
commandAttachScript: {} |
|
}, |
|
"grapesjs-rulers": { |
|
|
|
dragMode: 'translate', |
|
rulerHeight: 15, |
|
canvasZoom: 94, |
|
rulerOpts: {} |
|
}, |
|
"grapesjs-tui-image-editor": { |
|
config: { |
|
includeUI: { |
|
initMenu: 'filter', |
|
}, |
|
}, |
|
labelImageEditor: 'Image Editor', |
|
labelApply: 'Apply', |
|
height: '650px', |
|
width: '100%', |
|
hideHeader: true, |
|
addToAssets: true, |
|
upload: false |
|
} |
|
}, |
|
|
|
deviceManager: { |
|
devices: [ |
|
{ |
|
id: 'desktop', |
|
name: 'Desktop', |
|
width: '', |
|
}, |
|
{ |
|
id: 'vkontakte', |
|
name: 'ВКонтакте', |
|
width: '850px', |
|
}, |
|
{ |
|
id: 'tablet', |
|
name: 'Tablet', |
|
width: '768px', |
|
}, |
|
{ |
|
id: 'mobileLandscape', |
|
name: 'Mobile Landscape', |
|
width: '640px', |
|
}, |
|
{ |
|
id: 'mobilePortrait', |
|
name: 'Mobile Portrait', |
|
width: '480px', |
|
}, |
|
], |
|
}, |
|
}); |
|
</script> |
|
<script> |
|
|
|
// Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки |
|
editor.Panels.addButton('options', { |
|
id: 'toggle-rulers', |
|
label: `<svg width="16" height="16" viewBox="0 0 16 16"> |
|
<path d="M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z"/> |
|
<path d="M4 3h8a1 1 0 0 1 1 1v2.5h1V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2.5h1V4a1 1 0 0 1 1-1zM3 9.5H2V12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9.5h-1V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"/> |
|
</svg>`, |
|
command: 'ruler-visibility', // Команда для переключения видимости линеек |
|
attributes: { title: 'Toggle Rulers' } |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></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 type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/okna_prog.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
|
|
document.getElementById('vkontBtn').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('getBtn').addEventListener('click', function() { |
|
console.log('Тестовая кнопка работает!'); |
|
|
|
|
|
const editor = grapesjs.editors[0]; |
|
const htmlContent = editor.getHtml(); |
|
const cssContent = editor.getCss(); |
|
|
|
|
|
const codeContent = ` |
|
===== HTML ===== |
|
${htmlContent} |
|
|
|
===== CSS ===== |
|
${cssContent} |
|
`; |
|
|
|
|
|
const blob = new Blob([codeContent], { type: 'text/plain' }); |
|
const link = document.createElement('a'); |
|
link.href = URL.createObjectURL(blob); |
|
link.download = 'code_content.txt'; |
|
document.body.appendChild(link); |
|
link.click(); |
|
document.body.removeChild(link); |
|
}); |
|
}); |
|
</script> |
|
|
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
// Функция для тестовой кнопки |
|
document.getElementById('globBtn').addEventListener('click', function() { |
|
console.log('Тестовая кнопка работает!'); |
|
|
|
// Получаем значения из полей ввода |
|
const faviconUrl = document.getElementById('faviconUrl').value; |
|
const previewImageUrl = document.getElementById('previewImageUrl').value; |
|
const pageTitle = document.getElementById('pageTitle').value; |
|
const pageDescription = document.getElementById('pageDescription').value; |
|
|
|
// Получаем 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"> |
|
<meta name="description" content="${pageDescription}"> |
|
<meta property="og:title" content="${pageTitle}"> |
|
<meta property="og:description" content="${pageDescription}"> |
|
<meta property="og:image" content="${previewImageUrl}"> |
|
<meta property="og:url" content="https://example.com"> |
|
<title>${pageTitle}</title> |
|
<link rel="icon" href="${faviconUrl}" type="image/x-icon"> |
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
</html> |
