-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
40 lines (32 loc) · 2.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Merkle Tree Visualization</title>
<style>
</style>
<link rel="stylesheet" href="tree-viz/Treant.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="tree-viz/vendor/raphael.js" type="text/javascript"></script>
<script src="tree-viz/Treant.js" type="text/javascript"></script>
<script src="tree-construct.js" type="text/javascript"></script>
<script src="merkle-tree.js" type="text/javascript"></script>
</head>
<body>
<div class='controls'>
<ul style='list-style-type: none;'>
<li>Enter your text to construct the tree</li>
<li><textarea cols='200' rows='20' id='data'>Merkle trees are used in distributed and peer to peer systems for data verification. Suppose you want to check if a file is same everywhere and nobody has tampered with its contents. For doing this, we can use merkle trees. Instead of sending the entire file from point A to point B and then comparing it with a copy of it, we can send the hash of the file from A to B. This hash is then checked against the root of the merkle tree. If the hashes matches then we can be sure that the data in the file was not modified in any way.</textarea></li>
<li>Enter The chunk size to divide your data into</li>
<li><input type='text' value='10' id='chunkSize' size='4'></li>
<li><button onclick='initConstructTree()'>Construct Tree</button></li>
</ul>
</div>
<div class='tree-container'>
<div id="merkle-tree" style="width:100%; height: 660px"> </div>
</div>
</body>
</html>