File size: 4,274 Bytes
744616c eff3515 95397fc 744616c 7aabb8a eff3515 7aabb8a eff3515 7aabb8a 744616c 8ba6080 7aabb8a eff3515 7aabb8a eff3515 7aabb8a 744616c 2914454 eff3515 8bd78f0 5381dec 106a47b 744616c eff3515 744616c 7aabb8a eff3515 7aabb8a eff3515 744616c 95397fc 744616c eff3515 acb0b98 de3daed 95397fc eff3515 acb0b98 eff3515 744616c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video List Editor</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" />
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
max-height: 250px; /* Устанавливаем максимальную высоту страницы */
}
h1 {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 0;
border-bottom: 2px solid #388E3C;
}
.input-row {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.input-row input, .input-row textarea {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#jsoneditor {
width: 50%;
height: 300px;
margin: 20px auto;
}
#addVideo, #saveToClipboard {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-top: 20px;
}
#addVideo:hover, #saveToClipboard:hover {
background-color: #388E3C;
}
.jsoneditor-menu {
background-color: #4CAF50 !important;
border-bottom: 1px solid #388E3C !important;
}
.jsoneditor{
border: 1px #4CAF50 !important;
border-bottom: 2px solid #388E3C !important;
}
</style>
</head>
<body>
<h1>Редактор медиа листов</h1>
<div>
<div class="input-row">
<label for="title">Название:</label>
<input type="text" id="title" placeholder="Введите название">
<label for="file">Ссылка на файл:</label>
<input type="text" id="file" placeholder="Введите ссылку">
</div>
<button id="addVideo">Добавить медиа</button>
<button id="saveToClipboard">Сохранить в буфер обмена</button>
</div>
<div id="jsoneditor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('jsoneditor');
const options = {
mode: 'code',
modes: ['code', 'tree'],
onError: function(err) {
alert(err.toString());
}
};
const editor = new JSONEditor(container, options);
let videoList = [];
editor.set(videoList);
document.getElementById('addVideo').addEventListener('click', function() {
const title = document.getElementById('title').value;
const file = document.getElementById('file').value;
if (title && file) {
videoList.push({ title, file });
editor.set(videoList);
document.getElementById('title').value = '';
document.getElementById('file').value = '';
} else {
alert('Please fill in both title and file URL.');
}
});
document.getElementById('saveToClipboard').addEventListener('click', function() {
const json = editor.get();
const jsonString = JSON.stringify(json, null, 0); // Добавляем в одну строку без отступов
navigator.clipboard.writeText(jsonString).then(function() {
Toastify({
text: "Видеолист скопирован!",
duration: 3000, // Показывать 3 секунды
newWindow: true,
close: true,
gravity: "top", // Показывать сверху
position: "center", // Позиционировать по центру
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true // Останавливать таймер при фокусе на сообщении
}).showToast();
}, function(err) {
console.error('Could not copy text: ', err);
});
});
});
</script>
</body>
</html> |