<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu JSON 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; } 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 { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } #jsoneditor { width: 50%; height: 300px; margin: 20px auto; } button { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; } button: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>Редактор JSON для меню</h1> <div> <div class="input-row"> <label for="title1">Название 1:</label> <input type="text" id="title1" placeholder="Главная"> <label for="link1">Ссылка 1:</label> <input type="text" id="link1" placeholder="https://example.com"> </div> <div class="input-row"> <label for="title2">Название 2:</label> <input type="text" id="title2" placeholder="Контакты"> <label for="link2">Ссылка 2:</label> <input type="text" id="link2" placeholder="https://example.com"> </div> <div class="input-row"> <label for="title3">Название 3:</label> <input type="text" id="title3" placeholder="Мега-меню"> </div> <div class="input-row"> <label for="title4">Название 4:</label> <input type="text" id="title4" placeholder="Подменю"> </div> <button id="addMenu">Добавить меню</button> </div> <div> <div class="input-row"> <label for="menuTitle">Название меню:</label> <input type="text" id="menuTitle" placeholder="Мега-меню"> <label for="submenuTitle">Название подменю:</label> <input type="text" id="submenuTitle" placeholder="Раздел 1"> <label for="submenuLink">Ссылка подменю:</label> <input type="text" id="submenuLink" placeholder="https://example.com"> </div> <button id="addSubmenu">Добавить подменю</button> </div> <div> <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 menuData = { "menu": [] }; editor.set(menuData); document.getElementById('addMenu').addEventListener('click', function() { const title1 = document.getElementById('title1').value; const link1 = document.getElementById('link1').value; const title2 = document.getElementById('title2').value; const link2 = document.getElementById('link2').value; const title3 = document.getElementById('title3').value; const title4 = document.getElementById('title4').value; if (title1 && link1 && title2 && link2 && title3 && title4) { menuData.menu = [ { "title": title1, "link": link1 }, { "title": title3, "link": "#link" }, { "title": title4, "link": "#link" }, { "title": title2, "link": link2 } ]; editor.set(menuData); } else { alert('Please fill in all menu fields.'); } }); document.getElementById('addSubmenu').addEventListener('click', function() { const menuTitle = document.getElementById('menuTitle').value; const submenuTitle = document.getElementById('submenuTitle').value; const submenuLink = document.getElementById('submenuLink').value; if (menuTitle && submenuTitle && submenuLink) { const menuItem = menuData.menu.find(item => item.title === menuTitle); if (menuItem) { if (!menuItem.submenu) { menuItem.submenu = []; } menuItem.submenu.push({ "title": submenuTitle, "link": submenuLink }); editor.set(menuData); } else { alert('Menu item not found.'); } } else { alert('Please fill in all submenu fields.'); } }); 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>