jsonlint/resources/views/jsoncompare.blade.php

@extends('layouts.app')

@section('title', 'JSON Compare - Free Online JSON Diff Tool')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/jsondiffpatch@0.4.1/dist/formatters-styles/html.css" rel="stylesheet">
<style>
    .json-input {
        min-height: 300px;
        font-family: 'Courier New', monospace;
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        transition: all 0.3s ease;
    }

    .json-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(74, 107, 255, 0.25);
    }

    .result-box {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .result-box.show {
        display: block;
    }

    .diff-viewer {
        height: 500px;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
        margin-top: 1rem;
        background-color: var(--bs-body-bg);
        transition: all 0.3s ease;
        overflow: auto;
    }

    .hero-section {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6a8eff 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 2rem;
        border-radius: 0.5rem;
    }

    .feature-icon {
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }

    .feature-card {
        text-align: center;
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        transition: all 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    /* Dark mode styles for jsondiffpatch */
    [data-bs-theme="dark"] .jsondiffpatch-delta {
        background-color: var(--bs-dark);
    }

    [data-bs-theme="dark"] .jsondiffpatch-delta pre {
        color: var(--bs-light);
    }

    [data-bs-theme="dark"] .jsondiffpatch-added {
        background-color: rgba(40, 167, 69, 0.2);
    }

    [data-bs-theme="dark"] .jsondiffpatch-removed {
        background-color: rgba(220, 53, 69, 0.2);
    }

    [data-bs-theme="dark"] .jsondiffpatch-modified {
        background-color: rgba(255, 193, 7, 0.2);
    }
</style>
@endpush

@section('content')
<div class="hero-section text-center">
    <h1 class="display-4 fw-bold mb-3">JSON Compare Tool</h1>
    <p class="lead mb-4">Compare and visualize differences between two JSON documents</p>
</div>

<div class="row mb-4">
    <div class="col-md-4 mb-3">
        <div class="feature-card">
            <i class="bi bi-arrows-angle-contract feature-icon"></i>
            <h3>Side-by-Side Diff</h3>
            <p>View differences between two JSON documents in a clear, visual format</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="feature-card">
            <i class="bi bi-code-slash feature-icon"></i>
            <h3>Color-Coded</h3>
            <p>Easily identify additions, deletions, and modifications with color coding</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="feature-card">
            <i class="bi bi-arrows-collapse feature-icon"></i>
            <h3>Collapsible</h3>
            <p>Navigate large JSON documents with collapsible nodes</p>
        </div>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="jsonInput1" class="form-label">First JSON:</label>
                <textarea class="form-control json-input" id="jsonInput1" rows="10" placeholder='{
    "example": "json",
    "format": "here"
}'></textarea>
            </div>
            <div class="col-md-6 mb-3">
                <label for="jsonInput2" class="form-label">Second JSON:</label>
                <textarea class="form-control json-input" id="jsonInput2" rows="10" placeholder='{
    "example": "json",
    "format": "here"
}'></textarea>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary" id="compareBtn">
                <i class="bi bi-arrows-angle-contract me-2"></i>Compare JSON
            </button>
            <button class="btn btn-outline-secondary" id="clearBtn">
                <i class="bi bi-trash me-2"></i>Clear
            </button>
        </div>
    </div>
</div>

<div class="card shadow-sm mt-4 result-box" id="resultBox">
    <div class="card-body">
        <h3 class="h5 card-title">Comparison Result</h3>
        <div id="resultContent"></div>
        <div class="diff-viewer" id="diffViewer"></div>
    </div>
</div>

<div class="mt-5">
    <h2 class="h4 mb-3">About JSON Compare Tool</h2>
    <div class="card">
        <div class="card-body">
            <p>Our JSON Compare Tool helps you identify differences between two JSON documents quickly and efficiently. Whether you're comparing API responses, configuration files, or any other JSON data, our tool provides a clear visualization of the changes.</p>
            
            <h3 class="h5 mt-4">Key Features:</h3>
            <ul>
                <li>Side-by-side JSON comparison</li>
                <li>Color-coded differences (green for additions, red for deletions, yellow for modifications)</li>
                <li>Collapsible nodes for easy navigation</li>
                <li>Dark and light mode support</li>
                <li>Mobile-friendly interface</li>
            </ul>

            <h3 class="h5 mt-4">How to Use:</h3>
            <ol>
                <li>Enter or paste your first JSON document in the left textarea</li>
                <li>Enter or paste your second JSON document in the right textarea</li>
                <li>Click the "Compare JSON" button to see the differences</li>
                <li>Use the collapsible nodes to navigate through the differences</li>
            </ol>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/jsondiffpatch@0.4.1/dist/jsondiffpatch.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsondiffpatch@0.4.1/dist/formatters-styles/html.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const compareBtn = document.getElementById('compareBtn');
        const clearBtn = document.getElementById('clearBtn');
        const jsonInput1 = document.getElementById('jsonInput1');
        const jsonInput2 = document.getElementById('jsonInput2');
        const resultBox = document.getElementById('resultBox');
        const resultContent = document.getElementById('resultContent');
        const diffViewer = document.getElementById('diffViewer');

        // Compare JSON
        compareBtn.addEventListener('click', function() {
            try {
                const json1 = JSON.parse(jsonInput1.value);
                const json2 = JSON.parse(jsonInput2.value);
                
                const delta = jsondiffpatch.diff(json1, json2);
                
                if (!delta) {
                    resultContent.innerHTML = `
                        <div class="alert alert-success">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            The JSON documents are identical!
                        </div>
                    `;
                    diffViewer.innerHTML = '';
                } else {
                    resultContent.innerHTML = `
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            Differences found between the JSON documents
                        </div>
                    `;
                    diffViewer.innerHTML = jsondiffpatch.formatters.html.format(delta, json1);
                }
                
                resultBox.classList.add('show');
            } catch (e) {
                resultContent.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-circle-fill me-2"></i>
                        Error comparing JSON: ${e.message}
                    </div>
                `;
                resultBox.classList.add('show');
                diffViewer.innerHTML = '';
            }
        });

        // Clear input
        clearBtn.addEventListener('click', function() {
            jsonInput1.value = '';
            jsonInput2.value = '';
            resultBox.classList.remove('show');
            diffViewer.innerHTML = '';
        });
    });
</script>
@endpush