<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wheel of Fortune Sectors 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; } 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 select { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } #jsoneditor { width: 50%; height: 300px; margin: 20px auto; } #addSector, #saveToClipboard { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; } #addSector: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="color">Цвет:</label> <input type="color" id="color"> <label for="label">Лейбл:</label> <input type="text" id="label" placeholder="Введите лейбл"> <label for="probability">Вероятность:</label> <input type="number" id="probability" placeholder="Введите вероятность"> </div> <button id="addSector">Добавить сектор</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 sectorsList = []; editor.set(sectorsList); document.getElementById('addSector').addEventListener('click', function() { const color = document.getElementById('color').value; const label = document.getElementById('label').value; const probability = document.getElementById('probability').value; if (label && probability) { sectorsList.push({ color, label, probability: parseInt(probability, 10) }); editor.set(sectorsList); document.getElementById('label').value = ''; document.getElementById('probability').value = ''; } else { alert('Please fill in both label and probability.'); } }); 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>