Update pages.html
Browse files- pages.html +91 -1
pages.html
CHANGED
|
@@ -300,7 +300,47 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
|
|
| 300 |
</style>
|
| 301 |
|
| 302 |
|
| 303 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 304 |
</head>
|
| 305 |
<body>
|
| 306 |
<script>
|
|
@@ -365,7 +405,57 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
|
|
| 365 |
<p>Некоторый текст в модальном теле</p>
|
| 366 |
|
| 367 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 368 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 369 |
<br><br><br>
|
| 370 |
</div>
|
| 371 |
<div class="modal-footer_2">
|
|
|
|
| 300 |
</style>
|
| 301 |
|
| 302 |
|
| 303 |
+
<style>
|
| 304 |
+
|
| 305 |
+
.input-row {
|
| 306 |
+
display: flex;
|
| 307 |
+
justify-content: center;
|
| 308 |
+
gap: 10px;
|
| 309 |
+
margin-top: 20px;
|
| 310 |
+
}
|
| 311 |
+
.input-row input, .input-row textarea {
|
| 312 |
+
padding: 10px;
|
| 313 |
+
font-size: 16px;
|
| 314 |
+
border: 1px solid #ccc;
|
| 315 |
+
border-radius: 5px;
|
| 316 |
+
}
|
| 317 |
+
#jsoneditor {
|
| 318 |
+
width: 50%;
|
| 319 |
+
height: 300px;
|
| 320 |
+
margin: 20px auto;
|
| 321 |
+
}
|
| 322 |
+
#addVideo, #saveToClipboard {
|
| 323 |
+
color: white;
|
| 324 |
+
background-color: #4CAF50;
|
| 325 |
+
border: none;
|
| 326 |
+
cursor: pointer;
|
| 327 |
+
padding: 10px 20px;
|
| 328 |
+
font-size: 16px;
|
| 329 |
+
border-radius: 5px;
|
| 330 |
+
margin-top: 20px;
|
| 331 |
+
}
|
| 332 |
+
#addVideo:hover, #saveToClipboard:hover {
|
| 333 |
+
background-color: #388E3C;
|
| 334 |
+
}
|
| 335 |
+
.jsoneditor-menu {
|
| 336 |
+
background-color: #4CAF50 !important;
|
| 337 |
+
border-bottom: 1px solid #388E3C !important;
|
| 338 |
+
}
|
| 339 |
+
.jsoneditor{
|
| 340 |
+
border: 1px #4CAF50 !important;
|
| 341 |
+
border-bottom: 2px solid #388E3C !important;
|
| 342 |
+
}
|
| 343 |
+
</style>
|
| 344 |
</head>
|
| 345 |
<body>
|
| 346 |
<script>
|
|
|
|
| 405 |
<p>Некоторый текст в модальном теле</p>
|
| 406 |
|
| 407 |
|
| 408 |
+
<h1>Редактор медиа листов</h1>
|
| 409 |
+
<div>
|
| 410 |
+
<div class="input-row">
|
| 411 |
+
<label for="title">Название:</label>
|
| 412 |
+
<input type="text" id="title" placeholder="Введите название">
|
| 413 |
+
<label for="file">Ссылка на файл:</label>
|
| 414 |
+
<input type="text" id="file" placeholder="Введите ссылку">
|
| 415 |
+
</div>
|
| 416 |
+
<button id="addVideo">Добавить медиа</button>
|
| 417 |
+
<button id="saveToClipboard">Сохранить в буфер обмена</button>
|
| 418 |
+
</div>
|
| 419 |
+
<div id="jsoneditor"></div>
|
| 420 |
|
| 421 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
|
| 422 |
+
<script>
|
| 423 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 424 |
+
const container = document.getElementById('jsoneditor');
|
| 425 |
+
const options = {
|
| 426 |
+
mode: 'code',
|
| 427 |
+
modes: ['code', 'tree'],
|
| 428 |
+
onError: function(err) {
|
| 429 |
+
alert(err.toString());
|
| 430 |
+
}
|
| 431 |
+
};
|
| 432 |
+
const editor = new JSONEditor(container, options);
|
| 433 |
+
let videoList = [];
|
| 434 |
+
editor.set(videoList);
|
| 435 |
+
document.getElementById('addVideo').addEventListener('click', function() {
|
| 436 |
+
const title = document.getElementById('title').value;
|
| 437 |
+
const file = document.getElementById('file').value;
|
| 438 |
+
if (title && file) {
|
| 439 |
+
videoList.push({ title, file });
|
| 440 |
+
editor.set(videoList);
|
| 441 |
+
document.getElementById('title').value = '';
|
| 442 |
+
document.getElementById('file').value = '';
|
| 443 |
+
} else {
|
| 444 |
+
alert('Please fill in both title and file URL.');
|
| 445 |
+
}
|
| 446 |
+
});
|
| 447 |
+
document.getElementById('saveToClipboard').addEventListener('click', function() {
|
| 448 |
+
const json = editor.get();
|
| 449 |
+
const jsonString = JSON.stringify(json); // Убираем параметры отступов
|
| 450 |
+
navigator.clipboard.writeText(jsonString).then(function() {
|
| 451 |
+
alert('JSON saved to clipboard!');
|
| 452 |
+
}, function(err) {
|
| 453 |
+
console.error('Could not copy text: ', err);
|
| 454 |
+
});
|
| 455 |
+
});
|
| 456 |
+
});
|
| 457 |
+
|
| 458 |
+
</script>
|
| 459 |
<br><br><br>
|
| 460 |
</div>
|
| 461 |
<div class="modal-footer_2">
|