<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据查看器</title>
    <style>
        :root {
            --bg-color: #f8f9fa;
            --panel-bg: #ffffff;
            --border-color: #dee2e6;
            --text-color: #212529;
            --key-color: #d73a49;
            --string-color: #032f62;
            --number-color: #e36209;
            --boolean-color: #0d6efd;
            --null-color: #6f42c1;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            line-height: 1.5;
        }

        .container {
            max-width: 98%;
            margin: 0 auto;
        }

        .json-display {
            background-color: var(--panel-bg);
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid var(--border-color);
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 14px;
            line-height: 1.4;
            white-space: pre-wrap;
            margin-top: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .json-line {
            display: block;
            margin: 3px 0;
        }

        .json-key {
            color: var(--key-color);
            font-weight: bold;
        }

        .json-string { color: var(--string-color); }
        .json-number { color: var(--number-color); }
        .json-boolean { color: var(--boolean-color); }
        .json-null { color: var(--null-color); }

        .json-indent {
            padding-left: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .json-brace {
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>JSON数据查看器</h1>
        </div>

        <div class="json-display" id="jsonContainer"></div>
    </div>

    {{ json_data|json_script:"external-json-data" }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 示例JSON数据
            const jsonData = JSON.parse(document.getElementById('external-json-data').textContent);
            // 渲染JSON数据
            renderJson(jsonData);

            function renderJson(data) {
                const container = document.getElementById('jsonContainer');
                container.innerHTML = '';
                const formattedJson = formatJson(data, 0);
                container.appendChild(formattedJson);
            }

            function formatJson(data, depth) {
                const container = document.createElement('pre');
                const type = typeof data;
                const isArray = Array.isArray(data);

                if (data === null) {
                    const line = document.createElement('span');
                    line.textContent = 'null';
                    line.classList.add('json-null');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'string') {
                    const line = document.createElement('span');
                    line.textContent = `"${data}"`;
                    line.classList.add('json-string');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'number') {
                    const line = document.createElement('span');
                    line.textContent = data;
                    line.classList.add('json-number');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'boolean') {
                    const line = document.createElement('span');
                    line.textContent = data ? 'true' : 'false';
                    line.classList.add('json-boolean');
                    container.appendChild(line);
                    return container;
                }
                if (type === 'object') {
                    // 开括号
                    const openBrace = document.createElement('span');
                    openBrace.textContent = isArray ? '[' : '{';
                    openBrace.classList.add('json-brace');
                    container.appendChild(openBrace);

                    // 递归处理对象/数组的键值对
                    const entries = isArray ? data : Object.entries(data);
                    let count = 0;
                    const total = entries.length;

                    for (let key in entries) {
                        if (!isArray) {
                            key = entries[key][0];
                        }
                        const value = isArray ? data[key] : data[key];
                        const line = document.createElement('div');
                        line.classList.add('json-line');
                        line.classList.add('json-indent');

                        const keyElement = document.createElement('span');
                        if (!isArray) {
                            keyElement.textContent = `"${key}": `;
                            keyElement.classList.add('json-key');
                        } else {
                            // 数组索引
                            const indexSpan = document.createElement('span');
                            indexSpan.textContent = `${key}: `;
                            keyElement.appendChild(indexSpan);
                        }
                        // 值处理
                        const valueContainer = formatJson(value, depth + 1);
                        valueContainer.style.display = 'inline';

                        line.appendChild(keyElement);
                        line.appendChild(valueContainer);

                        // 添加逗号（最后一个元素不加）
                        if (++count < total) {
                            line.appendChild(document.createTextNode(','));
                        }

                        container.appendChild(line);
                    }
                    // 闭括号
                    const closeBrace = document.createElement('span');
                    closeBrace.textContent = isArray ? ']' : '}';
                    closeBrace.classList.add('json-brace');
                    container.appendChild(closeBrace);
                }
                return container;
            }
        });
    </script>
</body>
</html>