251 lines
8.6 KiB
PHP
251 lines
8.6 KiB
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
|