API tools faq
paste
Advertisement
willysec_id

JSON Builder Tools

willysec_id
May 9th, 2025 (edited)
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.76 KB | Cybersecurity | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>JSON Builder Tool</title>
  7.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  8.   <style>
  9.     textarea {
  10.       font-family: monospace;
  11.     }
  12.   </style>
  13. </head>
  14. <body class="p-4">
  15.   <div class="container">
  16.     <h2>JSON Builder Tool</h2>
  17.     <button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#inputModal">Input JSON</button>
  18.     <button class="btn btn-success" onclick="showGeneratedModal()">Generate JSON</button>
  19.  
  20.     <!-- CRUD Table -->
  21.     <div class="mt-4">
  22.       <h4>Data Entries</h4>
  23.       <button class="btn btn-outline-primary mb-2" onclick="showAddEntryModal()">Add New Entry</button>
  24.       <table class="table table-bordered">
  25.         <thead>
  26.           <tr>
  27.             <th>Slug</th>
  28.             <th>Title</th>
  29.             <th>Description</th>
  30.             <th>Keyword</th>
  31.             <th>adsData</th>
  32.             <th>Actions</th>
  33.           </tr>
  34.         </thead>
  35.         <tbody id="dataTable"></tbody>
  36.       </table>
  37.     </div>
  38.   </div>
  39.  
  40.   <!-- Input Modal -->
  41.   <div class="modal fade" id="inputModal" tabindex="-1">
  42.     <div class="modal-dialog modal-lg">
  43.       <div class="modal-content">
  44.         <div class="modal-header">
  45.           <h5 class="modal-title">Input JSON</h5>
  46.           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  47.         </div>
  48.         <div class="modal-body">
  49.           <div class="mb-3">
  50.             <label for="jsonPaste" class="form-label">Paste JSON:</label>
  51.             <textarea id="jsonPaste" class="form-control" rows="5"></textarea>
  52.           </div>
  53.           <div class="mb-3">
  54.             <label for="jsonFile" class="form-label">Upload JSON File:</label>
  55.             <input type="file" id="jsonFile" accept="application/json" class="form-control">
  56.           </div>
  57.         </div>
  58.         <div class="modal-footer">
  59.           <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  60.           <button class="btn btn-primary" onclick="loadFromPaste(); document.getElementById('inputModalClose').click();">Load</button>
  61.           <button id="inputModalClose" type="button" class="d-none" data-bs-dismiss="modal"></button>
  62.         </div>
  63.       </div>
  64.     </div>
  65.   </div>
  66.  
  67.   <!-- Generate Modal -->
  68.   <div class="modal fade" id="generateModal" tabindex="-1">
  69.     <div class="modal-dialog modal-lg">
  70.       <div class="modal-content">
  71.         <div class="modal-header">
  72.           <h5 class="modal-title">Generated JSON</h5>
  73.           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  74.         </div>
  75.         <div class="modal-body">
  76.           <textarea id="generatedJson" class="form-control" rows="10" disabled></textarea>
  77.         </div>
  78.         <div class="modal-footer">
  79.           <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  80.           <button class="btn btn-info" onclick="copyJson()">Copy</button>
  81.           <button class="btn btn-success" onclick="downloadJson()">Download</button>
  82.         </div>
  83.       </div>
  84.     </div>
  85.   </div>
  86.  
  87.   <!-- Add/Edit Entry Modal -->
  88.   <div class="modal fade" id="addEntryModal" tabindex="-1">
  89.     <div class="modal-dialog">
  90.       <div class="modal-content">
  91.         <div class="modal-header">
  92.           <h5 class="modal-title" id="entryModalTitle">Add New Entry</h5>
  93.           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  94.         </div>
  95.         <div class="modal-body">
  96.           <input id="slug" class="form-control mb-2" placeholder="Slug">
  97.           <input id="title" class="form-control mb-2" placeholder="Title">
  98.           <textarea id="description" class="form-control mb-2" placeholder="Description"></textarea>
  99.           <input id="keyword" class="form-control mb-2" placeholder="Keyword">
  100.           <input id="adsData" class="form-control" placeholder="adsData URL">
  101.         </div>
  102.         <div class="modal-footer">
  103.           <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
  104.           <button class="btn btn-primary" id="entryModalBtn" onclick="addEntry()">Add</button>
  105.         </div>
  106.       </div>
  107.     </div>
  108.   </div>
  109.  
  110.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  111.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  112.   <script>
  113.     let jsonData = { data: [] };
  114.     let editingIndex = null;
  115.  
  116.     function slugify(text) {
  117.       return text.toString().toLowerCase()
  118.         .replace(/\s+/g, '-')
  119.         .replace(/[^a-z0-9\-]/g, '')
  120.         .replace(/\-+/g, '-')
  121.         .replace(/^-+|-+$/g, '');
  122.     }
  123.  
  124.     function isValidURL(url) {
  125.       try {
  126.         new URL(url);
  127.         return true;
  128.       } catch (_) {
  129.         return false;
  130.       }
  131.     }
  132.  
  133.     function loadFromPaste() {
  134.       const text = $('#jsonPaste').val();
  135.       try {
  136.         const loaded = JSON.parse(text);
  137.         if (loaded.data && Array.isArray(loaded.data)) {
  138.          jsonData = loaded;
  139.           alert('JSON loaded successfully!');
  140.           renderTable();
  141.         } else {
  142.           alert('Invalid JSON format');
  143.         }
  144.       } catch (err) {
  145.         alert('Error parsing pasted JSON: ' + err);
  146.       }
  147.     }
  148.  
  149.     $('#jsonFile').on('change', function(e) {
  150.       const file = e.target.files[0];
  151.       if (!file) return;
  152.  
  153.       const reader = new FileReader();
  154.       reader.onload = function(evt) {
  155.         try {
  156.           const loaded = JSON.parse(evt.target.result);
  157.           if (loaded.data && Array.isArray(loaded.data)) {
  158.            jsonData = loaded;
  159.             alert('File loaded successfully!');
  160.             renderTable();
  161.           } else {
  162.             alert('Invalid JSON format');
  163.           }
  164.         } catch (err) {
  165.           alert('Error reading JSON: ' + err);
  166.         }
  167.       };
  168.       reader.readAsText(file);
  169.     });
  170.  
  171.     function showGeneratedModal() {
  172.       $('#generatedJson').val(JSON.stringify(jsonData, null, 2));
  173.       new bootstrap.Modal(document.getElementById('generateModal')).show();
  174.     }
  175.  
  176.     function downloadJson() {
  177.       const blob = new Blob([JSON.stringify(jsonData, null, 2)], { type: 'application/json' });
  178.       const url = URL.createObjectURL(blob);
  179.       const a = document.createElement('a');
  180.       a.href = url;
  181.       a.download = 'data.json';
  182.       document.body.appendChild(a);
  183.       a.click();
  184.       document.body.removeChild(a);
  185.     }
  186.  
  187.     function copyJson() {
  188.       navigator.clipboard.writeText(JSON.stringify(jsonData, null, 2))
  189.         .then(() => alert('JSON copied to clipboard'))
  190.         .catch(err => alert('Failed to copy: ' + err));
  191.     }
  192.  
  193.     function renderTable() {
  194.       const tbody = $('#dataTable');
  195.       tbody.empty();
  196.       jsonData.data.forEach((item, index) => {
  197.         tbody.append(`
  198.           <tr>
  199.             <td>${item.slug}</td>
  200.             <td>${item.meta.title}</td>
  201.             <td>${item.meta.description}</td>
  202.             <td>${item.meta.keyword}</td>
  203.             <td>${item.adsData}</td>
  204.             <td>
  205.               <button class="btn btn-sm btn-warning me-1" onclick="showEditEntryModal(${index})">Edit</button>
  206.               <button class="btn btn-sm btn-danger" onclick="deleteEntry(${index})">Delete</button>
  207.             </td>
  208.           </tr>
  209.         `);
  210.       });
  211.     }
  212.  
  213.     function showAddEntryModal() {
  214.       editingIndex = null;
  215.       $('#entryModalTitle').text('Add New Entry');
  216.       $('#entryModalBtn').text('Add').attr('onclick', 'addEntry()');
  217.       $('#slug').val('');
  218.       $('#title').val('');
  219.       $('#description').val('');
  220.       $('#keyword').val('');
  221.       $('#adsData').val('');
  222.       new bootstrap.Modal(document.getElementById('addEntryModal')).show();
  223.     }
  224.  
  225.     function addEntry() {
  226.       const slug = slugify($('#slug').val());
  227.       const ads = $('#adsData').val();
  228.       if (!isValidURL(ads)) {
  229.         alert('Invalid adsData URL');
  230.         return;
  231.       }
  232.       const newEntry = {
  233.         slug,
  234.         meta: {
  235.           title: $('#title').val(),
  236.           description: $('#description').val(),
  237.           keyword: $('#keyword').val(),
  238.         },
  239.         adsData: ads,
  240.       };
  241.       jsonData.data.push(newEntry);
  242.       renderTable();
  243.       bootstrap.Modal.getInstance(document.getElementById('addEntryModal')).hide();
  244.     }
  245.  
  246.     function showEditEntryModal(index) {
  247.       editingIndex = index;
  248.       const entry = jsonData.data[index];
  249.       $('#entryModalTitle').text('Edit Entry');
  250.       $('#entryModalBtn').text('Update').attr('onclick', 'updateEntry()');
  251.       $('#slug').val(entry.slug);
  252.       $('#title').val(entry.meta.title);
  253.       $('#description').val(entry.meta.description);
  254.       $('#keyword').val(entry.meta.keyword);
  255.       $('#adsData').val(entry.adsData);
  256.       new bootstrap.Modal(document.getElementById('addEntryModal')).show();
  257.     }
  258.  
  259.     function updateEntry() {
  260.       if (editingIndex !== null) {
  261.         const slug = slugify($('#slug').val());
  262.         const ads = $('#adsData').val();
  263.         if (!isValidURL(ads)) {
  264.           alert('Invalid adsData URL');
  265.           return;
  266.         }
  267.         jsonData.data[editingIndex] = {
  268.           slug,
  269.           meta: {
  270.             title: $('#title').val(),
  271.             description: $('#description').val(),
  272.             keyword: $('#keyword').val(),
  273.           },
  274.           adsData: ads,
  275.         };
  276.         renderTable();
  277.         bootstrap.Modal.getInstance(document.getElementById('addEntryModal')).hide();
  278.       }
  279.     }
  280.  
  281.     function deleteEntry(index) {
  282.       if (confirm('Are you sure you want to delete this entry?')) {
  283.         jsonData.data.splice(index, 1);
  284.         renderTable();
  285.       }
  286.     }
  287.   </script>
  288. </body>
  289. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!