|
|
<!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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.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; |
|
|
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> |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
#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; |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.button-container { |
|
|
position: absolute; |
|
|
top: 770px; |
|
|
left: 20px; |
|
|
z-index: 100; |
|
|
background-color: transparent; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.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> |
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<script> |
|
|
vkBridge.send('VKWebAppInit'); |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="button-container"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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://diamonik7777-up-fail.hf.space/up_page" 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://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"> |
|
|
<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 id="iframe3" 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="iframe2" 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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" 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 |
|
|
} |
|
|
} |
|
|
}); |
|
|
</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> |
|
|
editor.Components.addType('menu-settings-block', { |
|
|
model: { |
|
|
defaults: { |
|
|
|
|
|
content: '<div id="contents"></div>', |
|
|
|
|
|
script: function(props) { |
|
|
|
|
|
const loadScript = (src, callback) => { |
|
|
const script = document.createElement('script'); |
|
|
script.src = src; |
|
|
script.onload = callback; |
|
|
document.body.appendChild(script); |
|
|
}; |
|
|
window.home_url = props.home_url; |
|
|
window.but_url = JSON.parse(props.but_url); |
|
|
const initBlock = () => { |
|
|
console.log('Menu settings block initialized with props:', { home_url, but_url }); |
|
|
}; |
|
|
|
|
|
if (typeof $ === 'undefined') { |
|
|
|
|
|
loadScript('https://code.jquery.com/jquery-3.6.0.min.js', () => { |
|
|
console.log('jQuery loaded!'); |
|
|
|
|
|
loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/menu_vk.js', () => { |
|
|
console.log('Custom script loaded!'); |
|
|
initBlock(); |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
console.log('jQuery is already loaded!'); |
|
|
|
|
|
loadScript('https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/menu_vk.js', () => { |
|
|
console.log('Custom script loaded!'); |
|
|
initBlock(); |
|
|
}); |
|
|
} |
|
|
}, |
|
|
|
|
|
traits: [ |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'home_url', |
|
|
label: 'home_url', |
|
|
changeProp: true |
|
|
}, |
|
|
{ |
|
|
type: 'text', |
|
|
name: 'but_url', |
|
|
label: 'but_url', |
|
|
changeProp: true |
|
|
} |
|
|
], |
|
|
|
|
|
'script-props': ['home_url', 'but_url'] |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
editor.Blocks.add('menu-settings-block-block', { |
|
|
label: ` |
|
|
<div style="display: flex; flex-direction: column; align-items: center;"> |
|
|
<!-- icon666.com - MILLIONS vector ICONS FREE --><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 type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/okna_prog.js"></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.addEventListener('DOMContentLoaded', () => { |
|
|
console.log('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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
