Update pages.html
Browse files- pages.html +2 -120
pages.html
CHANGED
@@ -17,7 +17,7 @@
|
|
17 |
|
18 |
|
19 |
|
20 |
-
|
21 |
|
22 |
|
23 |
|
@@ -452,125 +452,7 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
|
|
452 |
|
453 |
|
454 |
|
455 |
-
|
456 |
-
|
457 |
-
.container {
|
458 |
-
display: flex;
|
459 |
-
justify-content: space-between;
|
460 |
-
align-items: flex-start;
|
461 |
-
position: relative; /* Важно для z-index */
|
462 |
-
z-index: 1; /* Устанавливаем слой контейнера */
|
463 |
-
}
|
464 |
-
|
465 |
-
.input-row {
|
466 |
-
display: flex;
|
467 |
-
flex-direction: column;
|
468 |
-
gap: 10px;
|
469 |
-
margin-top: 20px;
|
470 |
-
width: 40%; /* Установите ширину по вашему усмотрению */
|
471 |
-
}
|
472 |
-
|
473 |
-
.input-row input, .input-row textarea {
|
474 |
-
padding: 10px;
|
475 |
-
font-size: 16px;
|
476 |
-
border: 1px solid #ccc;
|
477 |
-
border-radius: 5px;
|
478 |
-
}
|
479 |
-
|
480 |
-
#jsoneditor {
|
481 |
-
width: 50%;
|
482 |
-
height: 300px;
|
483 |
-
margin-left: 20px; /* Отодвигаем JSON редактор вправо */
|
484 |
-
}
|
485 |
-
|
486 |
-
#addVideo, #saveToClipboard {
|
487 |
-
color: white;
|
488 |
-
background-color: #4CAF50;
|
489 |
-
border: none;
|
490 |
-
cursor: pointer;
|
491 |
-
padding: 10px 20px;
|
492 |
-
font-size: 16px;
|
493 |
-
border-radius: 5px;
|
494 |
-
margin-top: 20px;
|
495 |
-
}
|
496 |
-
|
497 |
-
#addVideo:hover, #saveToClipboard:hover {
|
498 |
-
background-color: #388E3C;
|
499 |
-
}
|
500 |
-
|
501 |
-
.jsoneditor-menu {
|
502 |
-
background-color: #4CAF50 !important;
|
503 |
-
border-bottom: 1px solid #388E3C !important;
|
504 |
-
}
|
505 |
-
|
506 |
-
.jsoneditor {
|
507 |
-
border: 1px #4CAF50 !important;
|
508 |
-
border-bottom: 2px solid #388E3C !important;
|
509 |
-
}
|
510 |
-
</style>
|
511 |
-
|
512 |
-
|
513 |
-
<div>
|
514 |
-
<div class="input-row">
|
515 |
-
<label for="title">Название:</label>
|
516 |
-
<input type="text" id="title" placeholder="Введите название">
|
517 |
-
<label for="file">Ссылка на файл:</label>
|
518 |
-
<input type="text" id="file" placeholder="Введите ссылку">
|
519 |
-
</div>
|
520 |
-
<button id="addVideo">Добавить медиа</button>
|
521 |
-
<button id="saveToClipboard">Сохранить в буфер обмена</button>
|
522 |
-
</div>
|
523 |
-
<div id="jsoneditor"></div>
|
524 |
-
|
525 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
|
526 |
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
527 |
-
<script>
|
528 |
-
document.addEventListener('DOMContentLoaded', function() {
|
529 |
-
const container = document.getElementById('jsoneditor');
|
530 |
-
const options = {
|
531 |
-
mode: 'code',
|
532 |
-
modes: ['code', 'tree'],
|
533 |
-
onError: function(err) {
|
534 |
-
alert(err.toString());
|
535 |
-
}
|
536 |
-
};
|
537 |
-
const editor = new JSONEditor(container, options);
|
538 |
-
let videoList = [];
|
539 |
-
editor.set(videoList);
|
540 |
-
document.getElementById('addVideo').addEventListener('click', function() {
|
541 |
-
const title = document.getElementById('title').value;
|
542 |
-
const file = document.getElementById('file').value;
|
543 |
-
if (title && file) {
|
544 |
-
videoList.push({ title, file });
|
545 |
-
editor.set(videoList);
|
546 |
-
document.getElementById('title').value = '';
|
547 |
-
document.getElementById('file').value = '';
|
548 |
-
} else {
|
549 |
-
alert('Please fill in both title and file URL.');
|
550 |
-
}
|
551 |
-
});
|
552 |
-
document.getElementById('saveToClipboard').addEventListener('click', function() {
|
553 |
-
const json = editor.get();
|
554 |
-
const jsonString = JSON.stringify(json, null, 2); // Добавляем отступы для читаемости
|
555 |
-
navigator.clipboard.writeText(jsonString).then(function() {
|
556 |
-
Toastify({
|
557 |
-
text: "Видеолист скопирован!",
|
558 |
-
duration: 3000, // Показывать 3 секунды
|
559 |
-
newWindow: true,
|
560 |
-
close: true,
|
561 |
-
gravity: "top", // Показывать сверху
|
562 |
-
position: "center", // Позиционировать по центру
|
563 |
-
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
564 |
-
stopOnFocus: true // Останавливать таймер при фокусе на сообщении
|
565 |
-
}).showToast();
|
566 |
-
}, function(err) {
|
567 |
-
console.error('Could not copy text: ', err);
|
568 |
-
});
|
569 |
-
});
|
570 |
-
});
|
571 |
-
|
572 |
-
</script>
|
573 |
-
|
574 |
|
575 |
|
576 |
|
|
|
17 |
|
18 |
|
19 |
|
20 |
+
|
21 |
|
22 |
|
23 |
|
|
|
452 |
|
453 |
|
454 |
|
455 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
456 |
|
457 |
|
458 |
|