<style> /* ===== JSON Formatter - High Specificity Styles ===== */<br />/* Scoped under #jsonf-root to prevent WordPress/theme overrides */<br />#jsonf-root *,<br />#jsonf-root *::before,<br />#jsonf-root *::after {<br /> box-sizing: border-box !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;<br /> -webkit-font-smoothing: antialiased !important;<br /> -moz-osx-font-smoothing: grayscale !important;<br />}<br />#jsonf-root {<br /> max-width: 940px;<br /> margin: 0 auto;<br /> padding: 24px 20px;<br /> background: #ffffff;<br /> color: #1e293b;<br /> line-height: 1.5;<br /> font-size: 15px;<br /> -webkit-user-select: none;<br /> -moz-user-select: none;<br /> -ms-user-select: none;<br /> user-select: none;<br />}<br />/* ===== H1 Title ===== */<br />#jsonf-root .jsonf-title {<br /> font-size: 26px !important;<br /> font-weight: 700 !important;<br /> color: #1e293b !important;<br /> text-align: center !important;<br /> margin-bottom: 20px !important;<br /> letter-spacing: -0.3px !important;<br /> line-height: 1.3 !important;<br />}<br />#jsonf-root .jsonf-title .jsonf-title-accent {<br /> color: #4150F6 !important;<br />}<br />/* ===== Section Labels ===== */<br />#jsonf-root .jsonf-label {<br /> font-size: 15px !important;<br /> font-weight: 600 !important;<br /> color: #334155 !important;<br /> margin-bottom: 8px !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br />}<br />#jsonf-root .jsonf-label .jsonf-label-hint {<br /> font-weight: 400 !important;<br /> color: #94a3b8 !important;<br /> font-size: 13px !important;<br />}<br />/* ===== Input Area ===== */<br />#jsonf-root .jsonf-input-wrap {<br /> position: relative !important;<br /> margin-bottom: 12px !important;<br />}<br />#jsonf-root .jsonf-textarea {<br /> width: 100% !important;<br /> min-height: 140px !important;<br /> max-height: 200px !important;<br /> padding: 12px 14px !important;<br /> font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Consolas', monospace !important;<br /> font-size: 13px !important;<br /> line-height: 1.6 !important;<br /> color: #1e293b !important;<br /> background: #f8fafc !important;<br /> border: 1.5px solid #e2e8f0 !important;<br /> border-radius: 10px !important;<br /> resize: vertical !important;<br /> outline: none !important;<br /> transition: border-color 0.2s ease, box-shadow 0.2s ease !important;<br /> -webkit-user-select: text !important;<br /> -moz-user-select: text !important;<br /> -ms-user-select: text !important;<br /> user-select: text !important;<br />}<br />#jsonf-root .jsonf-textarea:focus {<br /> border-color: #4150F6 !important;<br /> box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.1) !important;<br />}<br />#jsonf-root .jsonf-textarea::placeholder {<br /> color: #94a3b8 !important;<br /> font-style: italic !important;<br />}<br />/* ===== Drag & Drop Overlay ===== */<br />#jsonf-root .jsonf-drop-overlay {<br /> display: none;<br /> position: absolute !important;<br /> inset: 0 !important;<br /> background: rgba(65, 80, 246, 0.08) !important;<br /> border: 2px dashed #4150F6 !important;<br /> border-radius: 10px !important;<br /> z-index: 10 !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> font-size: 15px !important;<br /> font-weight: 600 !important;<br /> color: #4150F6 !important;<br /> pointer-events: none !important;<br />}<br />#jsonf-root .jsonf-drop-overlay.jsonf-active {<br /> display: flex !important;<br />}<br />/* ===== Button Row ===== */<br />#jsonf-root .jsonf-btn-row {<br /> display: flex !important;<br /> flex-wrap: wrap !important;<br /> gap: 8px !important;<br /> margin-bottom: 16px !important;<br />}<br />/* ===== Buttons ===== */<br />#jsonf-root .jsonf-btn {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 8px 16px !important;<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> border-radius: 8px !important;<br /> cursor: pointer !important;<br /> border: 1.5px solid transparent !important;<br /> transition: all 0.2s ease !important;<br /> white-space: nowrap !important;<br /> line-height: 1.4 !important;<br /> text-decoration: none !important;<br /> -webkit-user-select: none !important;<br /> user-select: none !important;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;<br />}<br />#jsonf-root .jsonf-btn svg {<br /> width: 15px !important;<br /> height: 15px !important;<br /> flex-shrink: 0 !important;<br />}<br />/* Primary Button */<br />#jsonf-root .jsonf-btn-primary {<br /> background: #4150F6 !important;<br /> color: #ffffff !important;<br /> border-color: #4150F6 !important;<br />}<br />#jsonf-root .jsonf-btn-primary:hover {<br /> background: #3441d4 !important;<br /> border-color: #3441d4 !important;<br /> transform: translateY(-1px) !important;<br /> box-shadow: 0 4px 12px rgba(65, 80, 246, 0.3) !important;<br />}<br />#jsonf-root .jsonf-btn-primary:active {<br /> transform: translateY(0) !important;<br /> box-shadow: none !important;<br />}<br />/* Outline Button */<br />#jsonf-root .jsonf-btn-outline {<br /> background: #ffffff !important;<br /> color: #475569 !important;<br /> border-color: #e2e8f0 !important;<br />}<br />#jsonf-root .jsonf-btn-outline:hover {<br /> background: #f8fafc !important;<br /> border-color: #cbd5e1 !important;<br /> color: #1e293b !important;<br />}<br />/* Danger Button */<br />#jsonf-root .jsonf-btn-danger {<br /> background: #ffffff !important;<br /> color: #ef4444 !important;<br /> border-color: #fecaca !important;<br />}<br />#jsonf-root .jsonf-btn-danger:hover {<br /> background: #fef2f2 !important;<br /> border-color: #f87171 !important;<br />}<br />/* ===== Output Area ===== */<br />#jsonf-root .jsonf-output-wrap {<br /> position: relative !important;<br /> margin-bottom: 12px !important;<br />}<br />#jsonf-root .jsonf-output {<br /> width: 100% !important;<br /> min-height: 140px !important;<br /> max-height: 220px !important;<br /> overflow: auto !important;<br /> padding: 0 !important;<br /> background: #f8fafc !important;<br /> border: 1.5px solid #e2e8f0 !important;<br /> border-radius: 10px !important;<br /> font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Consolas', monospace !important;<br /> font-size: 13px !important;<br /> line-height: 1.6 !important;<br /> counter-reset: line !important;<br />}<br />#jsonf-root .jsonf-output-table {<br /> width: 100% !important;<br /> border-collapse: collapse !important;<br /> table-layout: auto !important;<br />}<br />#jsonf-root .jsonf-output-table tr {<br /> background: transparent !important;<br />}<br />#jsonf-root .jsonf-output-table tr:hover {<br /> background: rgba(65, 80, 246, 0.03) !important;<br />}<br />#jsonf-root .jsonf-line-num {<br /> width: 42px !important;<br /> min-width: 42px !important;<br /> padding: 0 10px 0 12px !important;<br /> text-align: right !important;<br /> color: #94a3b8 !important;<br /> font-size: 12px !important;<br /> vertical-align: top !important;<br /> border-right: 1px solid #e2e8f0 !important;<br /> -webkit-user-select: none !important;<br /> user-select: none !important;<br /> line-height: 1.6 !important;<br />}<br />#jsonf-root .jsonf-line-code {<br /> padding: 0 14px !important;<br /> white-space: pre !important;<br /> color: #1e293b !important;<br /> vertical-align: top !important;<br /> line-height: 1.6 !important;<br /> -webkit-user-select: text !important;<br /> user-select: text !important;<br />}<br />/* Syntax Highlighting */<br />#jsonf-root .jsonf-syn-key { color: #7c3aed !important; }<br />#jsonf-root .jsonf-syn-str { color: #16a34a !important; }<br />#jsonf-root .jsonf-syn-num { color: #2563eb !important; }<br />#jsonf-root .jsonf-syn-bool { color: #dc2626 !important; }<br />#jsonf-root .jsonf-syn-null { color: #9333ea !important; font-style: italic !important; }<br />#jsonf-root .jsonf-syn-brace { color: #64748b !important; font-weight: 600 !important; }<br />/* ===== Placeholder for Output ===== */<br />#jsonf-root .jsonf-output-placeholder {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> min-height: 140px !important;<br /> color: #94a3b8 !important;<br /> font-size: 14px !important;<br /> font-style: italic !important;<br />}<br />/* ===== Error State ===== */<br />#jsonf-root .jsonf-error {<br /> padding: 10px 14px !important;<br /> background: #fef2f2 !important;<br /> border: 1px solid #fecaca !important;<br /> border-radius: 8px !important;<br /> color: #dc2626 !important;<br /> font-size: 13px !important;<br /> margin-bottom: 12px !important;<br /> display: none !important;<br />}<br />#jsonf-root .jsonf-error.jsonf-visible {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 8px !important;<br />}<br />#jsonf-root .jsonf-error svg {<br /> width: 16px !important;<br /> height: 16px !important;<br /> flex-shrink: 0 !important;<br />}<br />/* ===== Toast Notification ===== */<br />#jsonf-root .jsonf-toast {<br /> position: fixed !important;<br /> bottom: 24px !important;<br /> left: 50% !important;<br /> transform: translateX(-50%) translateY(80px) !important;<br /> background: #1e293b !important;<br /> color: #ffffff !important;<br /> padding: 10px 20px !important;<br /> border-radius: 8px !important;<br /> font-size: 13px !important;<br /> font-weight: 500 !important;<br /> box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;<br /> z-index: 9999 !important;<br /> opacity: 0 !important;<br /> transition: all 0.3s ease !important;<br /> pointer-events: none !important;<br />}<br />#jsonf-root .jsonf-toast.jsonf-toast-show {<br /> opacity: 1 !important;<br /> transform: translateX(-50%) translateY(0) !important;<br />}<br />/* ===== File Input Hidden ===== */<br />#jsonf-root .jsonf-file-input {<br /> display: none !important;<br />}<br />/* ===== Indent Controls ===== */<br />#jsonf-root .jsonf-controls-row {<br /> display: flex !important;<br /> flex-wrap: wrap !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> gap: 8px !important;<br /> margin-bottom: 12px !important;<br />}<br />#jsonf-root .jsonf-indent-control {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> font-size: 13px !important;<br /> color: #64748b !important;<br />}<br />#jsonf-root .jsonf-indent-select {<br /> padding: 4px 8px !important;<br /> border: 1.5px solid #e2e8f0 !important;<br /> border-radius: 6px !important;<br /> font-size: 13px !important;<br /> color: #334155 !important;<br /> background: #ffffff !important;<br /> outline: none !important;<br /> cursor: pointer !important;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;<br />}<br />#jsonf-root .jsonf-indent-select:focus {<br /> border-color: #4150F6 !important;<br />}<br />/* ===== Responsive ===== */<br />@media screen and (max-width: 640px) {<br /> #jsonf-root {<br /> padding: 16px 12px;<br /> }<br /> #jsonf-root .jsonf-title {<br /> font-size: 22px !important;<br /> }<br /> #jsonf-root .jsonf-btn-row {<br /> gap: 6px !important;<br /> }<br /> #jsonf-root .jsonf-btn {<br /> padding: 7px 12px !important;<br /> font-size: 12px !important;<br /> }<br /> #jsonf-root .jsonf-textarea {<br /> min-height: 110px !important;<br /> font-size: 12px !important;<br /> }<br /> #jsonf-root .jsonf-output {<br /> min-height: 110px !important;<br /> max-height: 180px !important;<br /> }<br /> #jsonf-root .jsonf-line-num {<br /> width: 32px !important;<br /> min-width: 32px !important;<br /> padding: 0 6px !important;<br /> font-size: 11px !important;<br /> }<br /> #jsonf-root .jsonf-line-code {<br /> padding: 0 8px !important;<br /> font-size: 12px !important;<br /> }<br />}<br />@media screen and (max-width: 400px) {<br /> #jsonf-root .jsonf-btn span.jsonf-btn-text {<br /> display: none !important;<br /> }<br /> #jsonf-root .jsonf-btn svg {<br /> width: 16px !important;<br /> height: 16px !important;<br /> }<br /> #jsonf-root .jsonf-btn {<br /> padding: 8px 10px !important;<br /> }<br />}<br />.jnews_inline_related_post {<br /> display: none;<br />}<br /></style> <h1>JSON Formatter</h1> <!-- Input Section --> Input JSON (or drag and drop a .json file) <textarea id="jsonf-input" placeholder="Paste your JSON here, e.g. {"name": "John", "age": 30}"></textarea> Drop your JSON file here <!-- Action Buttons --> <button id="jsonf-format-btn" type="button"></button> Format JSON <button id="jsonf-file-btn" type="button"></button> Open File <button id="jsonf-sample-btn" type="button"></button> Sample JSON <button id="jsonf-clear-btn" type="button"></button> Clear <!-- Error Message --> <!-- Output Section --> Output Formatted JSON Indent: <select id="jsonf-indent"> <option selected="selected" value="2">2 spaces</option> <option value="4">4 spaces</option> <option value="tab">Tab</option> </select> Formatted JSON will appear here <!-- Output Buttons --> <button id="jsonf-copy-btn" disabled="disabled" type="button"></button> Copy JSON <button id="jsonf-download-btn" disabled="disabled" type="button"></button> Download JSON <button id="jsonf-minify-btn" disabled="disabled" type="button"></button> Minify <!-- Hidden File Input --> <input id="jsonf-file-input" accept=".json,application/json" type="file" /> <!-- Toast -->
