index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Formatter - DevToolkit</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg: #f0f4f8; --surface: #ffffff; --text: #1e293b;
            --text-secondary: #64748b; --border: #e2e8f0;
            --purple: #6d28d9; --blue: #2563eb; --teal: #0891b2;
            --green: #059669; --red: #dc2626;
        }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
        .toolbar {
            background: var(--surface); border-bottom: 1px solid var(--border);
            padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
        }
        .toolbar a { color: var(--purple); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
        .toolbar h1 { font-size: 1.1rem; font-weight: 600; flex: 1; }
        .btn {
            padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border);
            font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
            background: var(--surface); color: var(--text); transition: all 0.2s;
        }
        .btn:hover { border-color: var(--purple); color: var(--purple); }
        .btn-primary { background: var(--purple); color: white; border-color: var(--purple); }
        .btn-primary:hover { background: #5b21b6; }
        .editor-container {
            display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
            padding: 1.5rem; max-width: 1400px; margin: 0 auto; height: calc(100vh - 70px);
        }
        .panel {
            background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
            display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        }
        .panel-header {
            padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
            font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
            text-transform: uppercase; letter-spacing: 0.05em;
            display: flex; align-items: center; justify-content: space-between;
        }
        textarea {
            flex: 1; padding: 1rem; border: none; outline: none; resize: none;
            font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.6;
            background: transparent; color: var(--text);
        }
        .status { font-size: 0.75rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); }
        .status-valid { color: var(--green); }
        .status-error { color: var(--red); }
        @media (max-width: 768px) { .editor-container { grid-template-columns: 1fr; } }
    </style>
</head>
<body>
    <div class="toolbar">
        <a href="../../index.html">DevToolkit</a>
        <h1>JSON Formatter</h1>
        <button class="btn" onclick="formatJSON()">Format</button>
        <button class="btn" onclick="minifyJSON()">Minify</button>
        <button class="btn" onclick="copyOutput()">Copy</button>
        <button class="btn" onclick="clearAll()">Clear</button>
        <select class="btn" id="indent" onchange="formatJSON()">
            <option value="2">2 spaces</option>
            <option value="4">4 spaces</option>
            <option value="tab">Tab</option>
        </select>
    </div>
    <div class="editor-container">
        <div class="panel">
            <div class="panel-header">
                <span>Input</span>
                <button class="btn" onclick="pasteFromClipboard()" style="padding:0.25rem 0.5rem;font-size:0.75rem">Paste</button>
            </div>
            <textarea id="input" placeholder="Paste your JSON here...">{
  "name": "Jaidevstudio",
  "type": "organization",
  "projects": ["MotherTongue", "DevToolkit", "Unique-Github-Profiles"],
  "members": "dynamic",
  "open_source": true
}</textarea>
            <div class="status" id="input-status">Ready</div>
        </div>
        <div class="panel">
            <div class="panel-header">
                <span>Output</span>
                <span id="size-info"></span>
            </div>
            <textarea id="output" readonly placeholder="Formatted output will appear here..."></textarea>
            <div class="status" id="output-status">--</div>
        </div>
    </div>
    <script>
        const input = document.getElementById('input');
        const output = document.getElementById('output');
        const inputStatus = document.getElementById('input-status');
        const outputStatus = document.getElementById('output-status');
        const sizeInfo = document.getElementById('size-info');

        input.addEventListener('input', () => formatJSON());

        function formatJSON() {
            try {
                const parsed = JSON.parse(input.value);
                const indentVal = document.getElementById('indent').value;
                const indent = indentVal === 'tab' ? '\t' : parseInt(indentVal);
                const formatted = JSON.stringify(parsed, null, indent);
                output.value = formatted;
                inputStatus.textContent = 'Valid JSON';
                inputStatus.className = 'status status-valid';
                outputStatus.textContent = `${Object.keys(parsed).length} top-level keys`;
                outputStatus.className = 'status status-valid';
                sizeInfo.textContent = `${formatted.length} chars`;
            } catch (e) {
                output.value = '';
                inputStatus.textContent = `Error: ${e.message}`;
                inputStatus.className = 'status status-error';
                outputStatus.textContent = '--';
                outputStatus.className = 'status';
                sizeInfo.textContent = '';
            }
        }

        function minifyJSON() {
            try {
                const parsed = JSON.parse(input.value);
                const minified = JSON.stringify(parsed);
                output.value = minified;
                inputStatus.textContent = 'Valid JSON (minified)';
                inputStatus.className = 'status status-valid';
                sizeInfo.textContent = `${minified.length} chars`;
            } catch (e) {
                inputStatus.textContent = `Error: ${e.message}`;
                inputStatus.className = 'status status-error';
            }
        }

        function copyOutput() {
            navigator.clipboard.writeText(output.value).then(() => {
                outputStatus.textContent = 'Copied to clipboard';
                setTimeout(() => { outputStatus.textContent = '--'; }, 2000);
            });
        }

        function clearAll() {
            input.value = '';
            output.value = '';
            inputStatus.textContent = 'Ready';
            inputStatus.className = 'status';
            outputStatus.textContent = '--';
            sizeInfo.textContent = '';
        }

        async function pasteFromClipboard() {
            try {
                input.value = await navigator.clipboard.readText();
                formatJSON();
            } catch (e) {
                inputStatus.textContent = 'Could not read clipboard';
                inputStatus.className = 'status status-error';
            }
        }

        // Format on load
        formatJSON();
    </script>
</body>
</html>