fileLoader.addEventListener('change', (event) => if (event.target.files && event.target.files[0]) loadFromFile(event.target.files[0]); // reset file input so same file can be loaded again fileLoader.value = ''; );
button background: #0f172a; color: white; border: none; padding: 0.5rem 1.2rem; border-radius: 2rem; font-weight: 500; cursor: pointer; transition: 0.15s; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;
// Attempt to pretty-print JSON if valid function prettyPrintJson() const raw = inputEditor.value; try const parsed = JSON.parse(raw); const pretty = JSON.stringify(parsed, null, 2); inputEditor.value = pretty; fileStatusSpan.innerText = '✅ Formatted JSON'; applyChanges(); // auto sync after formatting catch (e) alert('Not valid JSON. Could not prettify.\nError: ' + e.message); fileStatusSpan.innerText = '⚠️ Invalid JSON'; save editor online
textarea width: 100%; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.85rem; line-height: 1.5; padding: 1rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #fefce8; resize: vertical; transition: 0.1s;
@media (max-width: 760px) body padding: 12px; .panel-header flex-direction: column; align-items: flex-start; fileLoader
.editor-grid display: flex; flex-wrap: wrap; gap: 1.5rem;
// Clear input editor and optionally output if desired (but keep output only cleared if user wants) function clearEditors() if (confirm('Clear the input editor? Output will remain as is unless you re-apply.')) inputEditor.value = ''; fileStatusSpan.innerText = '🗑️ Cleared'; // do not auto-clear output, but you can let user decide. but better UX: optionally apply empty? No. // just reset status setTimeout(() => if (fileStatusSpan.innerText === '🗑️ Cleared') fileStatusSpan.innerText = 'No file loaded'; , 1200); but better UX: optionally apply empty
.footer text-align: center; margin-top: 2.5rem; color: #64748b; font-size: 0.75rem; border-top: 1px solid #cbd5e6; padding-top: 1.5rem;