data/html/panel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSON Diff viewer</title>
<meta name="author" content="Raffaele" />
<meta charset="utf-8">
<script src="../lib/jquery-3.1.1.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../js/jsondiff.js"></script>
<script src="../js/ui.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<link rel="stylesheet" href="../lib/jquery-ui.min.css">
</head>
<body>
<div class='title centered darkblue'>
<h1>JSON Diff viewver</h1>
</div>
<div class='description block darkblue'>
<span>
This add-on allows you to easily copare two JSON object. <BR/>
It will highlight the differences.
</span>
</div>
<div class='input block'>
<div class='textarea' id="resizable" class="ui-widget-content textarea">
<div class="divleft">
<h3 class="darkblue">First version</h3>
<textarea class="resizeable" id="primary">
{"a":3, "c":8, "obj":{"d":6}, "obj2":{"f":6}}
</textarea>
</div>
<div class="divright">
<h3 class="darkblue">Second version</h3>
<textarea class="resizeable" id="secondary">
{"a":6, "b":7, "obj":{"g":5}, "obj3":{"h":3}}
</textarea>
</div>
</div>
<div class="centered padded">
<a href="#" class="ui-state-default ui-corner-all button formatsrc" id="format_primary">Format</a>
<a href="#" class="ui-state-default ui-corner-all button" id="checkdiff">Check diff</a>
<a href="#" class="ui-state-default ui-corner-all button formatdst" id="format_secondary">Format</a>
</div>
</div>
<div id='result'>
<div class='description block darkblue'>
<span>
<p>* Paste your JSON objects in the text fields. Click "Check diff" to see the diff.</p>
<p>* Changed values are highlited in yellow. New "arrivals" are marked in green, while removed values are highlighted in red.</p>
<p>* If the json string in the texbox is not valid it will be indicated.</p>
</span>
</div>
<div id='diff' class='block'></div>
</div>
</body>
</html>