|
|
<!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> |
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
#toggleAppBtn { |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#vkontBtn:hover { |
|
|
background-color: #388E3C; |
|
|
} |
|
|
|
|
|
#toggleAppBtn:hover { |
|
|
background-color: #388E3C; |
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.button-container { |
|
|
position: absolute; |
|
|
top: 770px; |
|
|
left: 20px; |
|
|
z-index: 100; |
|
|
background-color: transparent; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.button-cont1, .button-cont2 { |
|
|
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> |
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<script> |
|
|
vkBridge.send('VKWebAppInit'); |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="button-container"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="button-con1"> |
|
|
<svg id="toggleAppBtn" 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 512 512" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g id="Layer_16" data-name="Layer 16"><path d="m369.605 476.959h-227.205a107.476 107.476 0 0 1 -107.359-107.353v-227.206a107.476 107.476 0 0 1 107.359-107.359h17.556a34.556 34.556 0 0 1 34.517 34.517 26.006 26.006 0 0 1 -25.976 25.977 73.039 73.039 0 0 0 -72.957 72.956v175.018a73.039 73.039 0 0 0 72.956 72.956h175.013a73.039 73.039 0 0 0 72.956-72.956v-175.018a73.039 73.039 0 0 0 -72.956-72.956 26.006 26.006 0 0 1 -25.977-25.977 34.556 34.556 0 0 1 34.516-34.517h17.557a107.476 107.476 0 0 1 107.354 107.359v227.21a107.476 107.476 0 0 1 -107.354 107.349zm-227.205-430.918a96.463 96.463 0 0 0 -96.359 96.359v227.206a96.463 96.463 0 0 0 96.359 96.353h227.21a96.463 96.463 0 0 0 96.354-96.354v-227.205a96.463 96.463 0 0 0 -96.354-96.354h-17.562a23.543 23.543 0 0 0 -23.516 23.517 14.994 14.994 0 0 0 14.977 14.977 84.051 84.051 0 0 1 83.956 83.956v175.013a84.052 84.052 0 0 1 -83.956 83.956h-175.018a84.051 84.051 0 0 1 -83.956-83.956v-175.018a84.052 84.052 0 0 1 83.957-83.956 14.994 14.994 0 0 0 14.976-14.977 23.544 23.544 0 0 0 -23.517-23.517z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m262.375 95.535h-12.75a30.247 30.247 0 0 1 0-60.494h12.75a30.247 30.247 0 1 1 0 60.494zm-12.75-49.494a19.247 19.247 0 0 0 0 38.494h12.75a19.247 19.247 0 1 0 0-38.494z" fill="#000000" style="fill: rgb(242, 242, 242);"></path><path d="m340.5 329.836c-7.166 0-17.352-.458-23.133-2.768-4.48-1.788-10-7.333-18.56-16.253-4.335-4.516-10.7-11.146-13.57-12.936-3.14 1.886-3.839 10.551-4.269 15.893-.52 6.461-.9 11.129-4.989 13.13-8.134 3.979-31.378 1.7-31.612 1.672-.121-.012-.242-.028-.362-.048-35.482-5.971-56.469-28.673-77.064-60.924-36.018-56.406-33.687-65.635-32.81-69.109a8.018 8.018 0 0 1 3.83-5.144c6.939-3.857 20.412-3.684 41.817-3.083l3.409.095c5.9.168 10.1 6.546 23.66 35.916 2.574 5.573 5 10.837 6.065 12.541 5.829 9.336 9.091 10.789 9.765 11a9.11 9.11 0 0 0 1.873-4.1c2.135-22.639.3-32.175-1.61-36.188-1.443-3.029-2.83-3.164-5.869-3.462-.526-.051-1.035-.1-1.522-.166a5.5 5.5 0 0 1 -4.507-7.173c6.2-18.82 41.715-16.681 45.746-16.375a5.552 5.552 0 0 1 .878.139c2.119.513 12.935 3.238 17.811 6.509 4.439 2.969 6.2 9.521 5.878 21.9-.054 2.095-.127 4.275-.2 6.5-.31 9.305-.867 26.039 1.237 30.986 3.026-1.955 9.771-9.942 18.39-26.42 2.284-4.366 4.425-8.751 6.314-12.62 6.078-12.448 7.984-16.1 11.435-17.455 3.228-1.271 10.38-1.437 27.152-1.534h.634c15.205-.073 24 .058 28.195 3.593 9.628 8.127-1.044 25.085-12.8 41.758-2.394 3.4-5.427 7.095-8.361 10.67-4.468 5.447-12.785 15.586-12.441 18.814.4 2.626 8.043 10.023 13.1 14.917 12.043 11.656 25.693 24.867 23.528 38.149-1.83 11.216-15.229 11.319-26 11.4-1.861.014-3.783.029-5.611.088-1.394.052-3.275.088-5.427.088zm-55.147-43.212c5.233 0 10.919 5.664 21.39 16.575 4.822 5.025 12.11 12.618 14.7 13.654 3.085 1.232 11.744 2.3 24.138 1.9 1.96-.064 3.952-.079 5.879-.094 4.455-.034 14.888-.115 15.224-2.173 1.239-7.6-11.223-19.667-20.322-28.473-8.775-8.493-15.706-15.2-16.39-21.66-.832-7.805 6.447-16.678 14.876-26.952 2.937-3.58 5.711-6.962 7.874-10.032 13.579-19.258 14.685-25.288 14.5-27.013-3.2-1.088-13.747-1.037-20.856-1h-.584c-7.619.044-18.737.109-22.484.647-1.4 2.089-4.1 7.622-6.322 12.17-1.92 3.932-4.1 8.39-6.45 12.892-17.234 32.942-26.111 32.8-29.029 32.755a9.067 9.067 0 0 1 -6.535-2.917c-5.526-5.8-5.5-18.932-4.805-39.869.072-2.193.144-4.347.2-6.415.239-9.2-.94-12.039-1.271-12.648-2.559-1.547-9.224-3.6-13.573-4.68-7.79-.521-21.877.088-29.35 4.079 8.377 4.614 12.375 17.228 9.33 49.45-.232 2.447-2.66 11.945-10.3 13.747-9.118 2.153-16.705-8.062-21.619-15.933-1.36-2.183-3.338-6.43-6.718-13.748-3.906-8.459-11.811-25.577-15.372-29.571l-2.019-.056c-12.761-.359-28.357-.8-34.584 1.068.568 3.755 4.618 17.523 31.327 59.352 18.981 29.723 38.06 50.619 69.439 55.966 8.017.79 19.22.833 23.905-.142.179-1.286.328-3.139.447-4.617.717-8.9 1.916-23.785 13.967-26.131a7.25 7.25 0 0 1 1.388-.131z" fill="#000000" style="fill: rgb(242, 242, 242);"></path></g></svg> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="overlayBlock" class="overlay-block"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button id="getBtn" style="position: absolute; top: 60px; right: 32px;">Виджет GC</button> |
|
|
|
|
|
|
|
|
|
|
|
<button id="myBtn" style="position: absolute; top: 90px; right: 10px;">Открыть модальное</button> |
|
|
|
|
|
<button id="myBtn_2" style="position: absolute; top: 120px; right: 10px;">Открыть модальное_2</button> |
|
|
<button id="myBtn_3" style="position: absolute; top: 150px; right: 10px;">Открыть модальное_3</button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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"> |
|
|
<p>Некоторый текст в модальном теле</p> |
|
|
|
|
|
|
|
|
<iframe id="iframe1" src="https://diamonik7777-up-fail.hf.space/up_page" title="Iframe Example"></iframe> |
|
|
<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="iframe2" src="https://diamonik7777-up-fail.hf.space/up_fa" 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"> |
|
|
<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 type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/iflame_in.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
<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('menu-settings-block', { |
|
|
model: { |
|
|
defaults: { |
|
|
// HTML-код пустого блока с постоянным идентификатором |
|
|
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: ` |
|
|
<div style="display: flex; flex-direction: column; align-items: center;"> |
|
|
<svg enable-background="new 0 0 152 152" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><g id="Layer_2" data-name="Layer 2"><path d="m28 3h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 3a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m28 13h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 13a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m28 23h-16a3 3 0 0 0 0 6h16a3 3 0 0 0 0-6zm0 4h-16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" fill="#000000" style="fill: rgb(250, 250, 250);"></path><path d="m4 23a3 3 0 1 0 3 3 3 3 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" fill="#000000" style="fill: rgb(250, 250, 250);"></path></g></svg> |
|
|
<span style="margin-top: 8px;">menu-set</span> |
|
|
</div>`, |
|
|
content: { type: 'menu-settings-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('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', () => { |
|
|
console.log('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.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> |
