File size: 3,579 Bytes
744616c eff3515 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 eff3515 744616c 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 |
<!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" 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>
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); // Убираем параметры отступов
navigator.clipboard.writeText(jsonString).then(function() {
alert('JSON saved to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
});
});
});
</script>
</body>
</html> |