p30629751
/
merkletreejs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
merkletreejs/example/index.html

173 lines
5.3 KiB
HTML
Raw Permalink Normal View History

Add example
2021-07-02 15:20:10 +08:00
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">
<title>MerkleTree.js example</title>
<style>
body {
padding-bottom: 4rem;
}
Update example
2021-07-04 14:14:20 +08:00
form {
display: block;
border: 1px dashed black;
padding: 0.2rem;
}
Add example
2021-07-02 15:20:10 +08:00
label {
display: inline-block;
}
textarea {
width: 100%;
}
Update example
2021-07-04 14:14:20 +08:00
input[type="text"] {
width: 100%;
}
Add example
2021-07-02 15:20:10 +08:00
#output {
Update example
2021-07-08 06:41:00 +08:00
}
details {
margin-bottom: 2rem;
}
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::marker {
display: none;
Add example
2021-07-02 15:20:10 +08:00
}
</style>
</head>
<body>
<h1>MerleTree.js example</h1>
Update example
2021-07-04 14:14:20 +08:00
<div>
Update example
2021-07-08 06:41:00 +08:00
<details open>
<summary>Input ▾</summary>
<form id="form">
Update example
2021-07-04 14:14:20 +08:00
<div>
Update example
2021-07-08 06:41:00 +08:00
<label>Leaves <small>(input json array or newline separated)</small></label>
<textarea id="input" rows="10">
[
"0xca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb",
"0x3e23e8160039594a33894f6564e1b1348bbd7a0088d42c4acb73eeaed59c009d",
"0x2e7d2c03a9507ae265ecf5b5356885a53393a2029d241394997265a1a25aefc6"
]
</textarea>
Update example
2021-07-04 14:14:20 +08:00
</div>
Update example
2021-07-08 06:41:00 +08:00
<div>
<label>Hash function</label>
<div>
<input type="radio" name="hash" value="sha256" id="sha256" checked>
<label for="sha256">SHA-256</label>
<input type="radio" name="hash" value="keccak256" id="keccak256">
<label for="keccak256">Keccak-256</label>
</div>
Update example
2021-07-04 14:14:20 +08:00
</div>
Update example
2021-07-08 06:41:00 +08:00
<div>
<label>Options</label>
<div>
<input type="checkbox" name="option" value="hashLeaves" id="hashLeaves">
<label for="hashLeaves">hashLeaves</label>
<input type="checkbox" name="option" value="sortLeaves" id="sortLeaves">
<label for="sortLeaves">sortLeaves</label>
<input type="checkbox" name="option" value="sortPairs" id="sortPairs">
<label for="sortPairs">sortPairs</label>
<input type="checkbox" name="option" value="duplicateOdd" id="duplicateOdd">
<label for="duplicateOdd">duplicateOdd</label>
<input type="checkbox" name="option" value="isBitcoinTree" id="isBitcoinTree">
<label for="isBitcoinTree">isBitcoinTree</label>
<input type="checkbox" name="option" value="fillDefaultHash" id="fillDefaultHash">
<label for="fillDefaultHash">fillDefaultHash</label>
</div>
</div>
<div id="fillDefaultHashView" style="display:none">
<label>Fill default hash</label>
<small>
<a href='#' id="addressZero">addressZero</a>
<a href='#' id="hashAddressZero">hash(addressZero)</a>
</small>
<input type="text" id="fillDefaultHashValue" />
</div>
<div>
<button type="submit">Compute</button>
</div>
</form>
</details>
Add example
2021-07-02 15:20:10 +08:00
</div>
<div>
Update example
2021-07-08 06:41:00 +08:00
<details open>
<summary>Verify ▾</summary>
<form id="verifyForm">
<label>Proof</label>
<div>
<textarea id="verifyProof" rows="3"></textarea>
</div>
<label>Leaf</label>
<div>
<input type="text" id="verifyLeaf" />
</div>
<label>Root</label>
<div>
<input type="text" id="verifyRoot" />
</div>
<div>
<button type="submit">Verify</button>
</div>
<label>Verified</label>
<div>
<pre id="verified"></pre>
</div>
</form>
</details>
Add example
2021-07-02 15:20:10 +08:00
</div>
<div>
Update example
2021-07-08 06:41:00 +08:00
<details open>
<summary>Proof ▾</summary>
<form id="proofForm">
Update example
2021-07-04 14:14:20 +08:00
<div>
Update example
2021-07-08 06:41:00 +08:00
<label>Leaf</label>
<div>
<select id="leaveSelect"></select>
</div>
Update example
2021-07-04 14:14:20 +08:00
</div>
Update example
2021-07-08 06:41:00 +08:00
<div>
<label>Proof</label>
<pre id="proof"></pre>
</div>
</form>
</details>
Add example
2021-07-02 15:20:10 +08:00
</div>
Update example
2021-07-08 06:41:00 +08:00
<div>
<details open>
<summary>Output ▾</summary>
<div id="output">
<div>
<label>Root</label>
<pre id="root"></pre>
</div>
<div>
<label>Leaves</label>
<pre id="leaves"></pre>
</div>
<div>
<label>Layers</label>
<pre id="layers"></pre>
</div>
<div>
<label>Flat Layers</label>
<pre id="flatLayers"></pre>
</div>
<div>
<label>Tree</label>
<pre id="tree"></pre>
</div>
</div>
Update example
2021-07-04 14:14:20 +08:00
</div>
Add example
2021-07-02 15:20:10 +08:00
</div>
<script src="https://cdn.jsdelivr.net/npm/keccak256@latest/keccak256.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
Update .npmignore
2021-07-02 15:25:42 +08:00
<script src="https://cdn.jsdelivr.net/npm/merkletreejs@latest/merkletree.js"></script>
Add example
2021-07-02 15:20:10 +08:00
<script src="main.js"></script>
<a href="https://github.com/miguelmota/merkletreejs" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</body>
</html>