-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
428 lines (382 loc) · 22.7 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Primary Meta Tags -->
<title>Proof.ink - proven immutable files!</title>
<meta name="title" content="Proof.ink - proven immutable files!">
<meta name="description" content="File hashes stored on the Hive blockchain. Tamperproof blockchain-based file fingerprint integrity.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://proof.ink/">
<meta property="og:title" content="Proof.ink - proven immutable files!">
<meta property="og:description" content="File hashes stored on the Hive blockchain. Tamperproof blockchain-based file fingerprint integrity.">
<meta property="og:image" content="https://proof.ink/img/fb-social.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://proof.ink/">
<meta property="twitter:title" content="Proof.ink - proven immutable files!">
<meta property="twitter:description" content="File hashes stored on the Hive blockchain. Tamperproof blockchain-based file fingerprint integrity.">
<meta property="twitter:image" content="https://proof.ink/img/tw-social.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="roelandp">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
body {
font-family: "Calibre",sans-serif;
color: #212529;
font-feature-settings: 'liga','kern';
text-rendering: optimizeLegibility;
}
.bgbrand {
background-image:url('img/splash.svg');
background-repeat: no-repeat;
background-position: -52px -120px;
background-size: 300px 300px;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Raleway', sans-serif;
}
section {
margin: 5rem auto;
}
.home {
cursor: pointer;
}
.progress.active .progress-bar {
-webkit-transition: none !important;
transition: none !important;
}
/* CORNER RIBBON STYLING */
.corner-ribbon{
width: 300px;
background: rgb(218, 85, 47);
color: #fff;
position: fixed;
text-align: center;
top: 65px;
line-height: 40px;
}
.corner-ribbon.right{
right: -65px;
left: auto;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container bgbrand">
<nav class="navbar navbar-expand-lg navbar-light">
<!-- <nav class="my-2 my-md-0 mr-md-3"> -->
<a href="https://proof.ink" style="text-decoration:none;"><h2 class="text-white home">proof</h2></a>
<button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-primary"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarText">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item text-right">
<a class="p-2 text-dark proofit" href="#proofit"><i>proof something</i></a>
</li>
<li class="nav-item text-right">
<small><i> or <a href="#validate" class="p-2 verifyit text-dark">validate</a></i></small>
</li>
<li class="nav-item text-right"> | </li>
<li class="nav-item text-right">
<a class="p-2 text-dark about" href="#about">about</a>
</li>
<li class="nav-item text-right">
<a class="p-2 text-dark faq" href="#about">faq</a>
</li>
<li class="nav-item text-right">
<a class="p-2" href="https://signup.hive.io" title="Register a Hive account">sign up</a>
</li>
</ul>
</div>
</nav>
<section class="page-header">
<div id="carouselExampleSlidesOnly" class="carousel d-flex" data-ride="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row d-flex">
<div class="col-sm-6 align-self-center">
<h1>Proven immutable data<sup>*</sup></h1>
<p><b>File hashes stored on the <a href="#about" target="_blank">Hive</a> blockchain</b></p>
<p><small>* data: documents, files, images, music, zip, software, 1010101000, etcetera</small>
<p class="mt-4">
<a class="btn btn-info btn-lg proofit" href="#proof" id="proofit"><b>proof</b> something</a> or <a href="#validate" class="verifyit">validate</a>
</p>
</div>
<div class="col-sm-6">
<img src="img/undraw_agreement.svg" class="img-fluid" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="row d-flex">
<div class="col-sm-6 align-self-center">
<h2 id="pyftitle">Proof your file </h2>
<div class="form-group" id="filehashform">
<p><b>Step 1:</b> Select file to be fingerprinted</p>
<label class="btn btn-info btn-lg" for="document">
<input id="document" type="file" style="display:none" accept='*'><b>select</b> file
</label>
<span class='label label-info' id="upload-file-info"></span>
<!-- <input type="file" id="document" class="form-control" accept='*' placeholder="Select file"/>
<p><small>Your file will NOT be uploaded, but fingerprinted in this browser based session</small></p> -->
</div>
<div id="postonchainform" style="display:none;">
<p><b>Step 2:</b> Store the fingerprint on the immutable Hive blockchain</p>
<p><small>Note that the fingerprint and any additional posted data is publicly verifyable and visible on the hive blockchain.</small></p>
<p><small>Don't have a Hive account? <a href="https://signup.hive.io" data-referrer="proof.ink" data-name="Proof.ink" data-image="https://proof.ink/apple-touch-icon.png" title="Register a Hive account">Get one instantly!</a>.</small></p>
<a class="btn btn-info btn-lg postit" href="#posttohive"><b>store</b> fingerprint</a>
</div>
<!-- <div class="form-group">
<label for="hash">Hash</label>
<input type="text" id="hash" class="form-control"/>
</div>
<div class="form-group">
<label for="fileSize">File size</label>
<input type="text" id="fileSize" class="form-control"/>
</div> -->
</div>
<div class="col-sm-6">
<div id="info">
<img src="img/undraw_meeting_115p.svg" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<h2 id="storefp_h2">Store fingerprint</h2>
<p id="storefp_p"><b>All data displayed on the right is stored <span class="bg-success text-white p-1">publicly</span> on the Hive chain</b></p>
</div>
</div>
<div class="row d-flex">
<div class="col-sm-4 align-self-center">
<div class="card" id="whattostore">
<div class="card-body">
<h5 class="card-title">1. Add additional data to store</h5>
<p class="card-text">Storing the fingerprint is obligatory, the rest of the data you can optionally add yourself:</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="chk_fingerprint" disabled="disabled" checked="checked">
<label class="form-check-label" for="chk_fingerprint">
fingerprint: <code id="prev_fingerprint"></code>
</label>
</div>
<div class="form-check">
<input class="form-check-input topost" type="checkbox" value="" id="chk_filename">
<label class="form-check-label" for="chk_filename">
filename: <code id="prev_filename"></code>
</label>
</div>
<div class="form-check">
<input class="form-check-input topost" type="checkbox" value="" id="chk_filesize">
<label class="form-check-label" for="chk_filesize">
filesize: <code id="prev_filesize"></code>
</label>
</div>
<div class="form-check">
<input class="form-check-input topost" type="checkbox" value="" id="chk_chunks">
<label class="form-check-label" for="chk_chunks">
chunks: <code id="prev_chunks"></code>
</label>
</div>
<div class="form-check">
<input class="form-check-input topost" type="checkbox" value="" id="chk_created">
<label class="form-check-label" for="chk_created">
created: <code id="prev_created"></code>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div id="previewjson">
</div>
<div id="formpostinputs">
<hr />
<div class="row">
<div class="col-sm-12">
<p><small>The fingerprint will be stored utilising the public transfer method.<br />Therefore you need to pick an (any) amount of Hive or HBD you need to send.<br />Your donation will be used to maintain this service.</small></p>
<p><small>Don't have a Hive account? <a href="https://signup.hive.io" target="_blank">Sign up here</a></small></p>
<h5 class="card-title">2. Set amount</h5>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Amount:
</label>
<div class="col-sm-1">
</div>
<div class="col-sm-4">
<input class="form-control form-control-sm text-right topost" placeholder="amount" type="number" step="0.001" value="9.999" id="amount" />
</div>
<div class="col-sm-4">
<select class="form-control form-control-sm topost" id="currency">
<option value="HIVE" selected>HIVE</option>
<option value="HBD">HBD</option>
</select>
</div>
</div>
<hr />
<h5>3. Post fingerprint to the Hive chain via</h5>
<div id="postbuts"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<h3 class="mb-3">Tamperproof blockchain-based file fingerprint integrity</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Proof.ink's service is pretty straightforward. <b>If you have a document of which you want to know with 100% certainty that it's contents has not been changed, tampered with or altered in any form, use Proof.ink.</b></p>
<p>Proof.ink works by <b>fingerprinting your file</b> (no matter how big), without the need to upload it, inside your browser. The result of this calculation is a unique SHA256 hash / fingerprint of your file.</p>
</div>
<div class="col-sm-4">
<p>By enabling you to <b>store the fingerprint publicly on the <a href="https://hive.io" target="_blank">Hive blockchain</a></b>, Proof.ink can guarantee the integrity of the fingerprint of the file as how it was created at a given time by a given user. This way others can use this service to validate the fingerprint on the blockchain and against the file they receive.</p>
<p>The Hive chain serves as a public accessible ledger with provable immutability at it's core, for a trustless public store of the derived file's fingerprint.</p>
</div>
<div class="col-sm-4">
<p><img src="img/undraw_building_blocks.svg" class="img-fluid" /></p>
<p class="text-center">Proof.ink is made by <a href="https://hive.blog/@roelandp" target="_blank">@roelandp</a><br /><small><a href="https://hive/@roelandp" target="_blank">learn more</a> - <a href="https://github.com/roelandp/proof" target="_blank">view source</a></small></p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row d-flex">
<div class="col-sm-6 align-self-center">
<div class="form-group" id="filehashform2">
<h2 id="pyftitle">Validate your file</h2>
<p>So you have received a file along with a <code>proof.ink.*.txt</code> certificate file and want to validate the integrity of the original file?</p>
<p><b>Step 1:</b> Select files to be validated. Select both the original file and the <code>proof.ink.*.txt</code> certificate file in one go.</p>
<label class="btn btn-info btn-lg" for="documentvalidate">
<input id="documentvalidate" type="file" style="display:none" accept='*' multiple><b>select</b> original file + proof.ink.txt
</label>
<span class='label label-info' id="upload-file-info"></span>
<!-- <input type="file" id="document" class="form-control" accept='*' placeholder="Select file"/>
<p><small>Your file will NOT be uploaded, but fingerprinted in this browser based session</small></p> -->
</div>
<div id="postonchainform2" style="display:none;">
</div>
<!-- <div class="form-group">
<label for="hash">Hash</label>
<input type="text" id="hash" class="form-control"/>
</div>
<div class="form-group">
<label for="fileSize">File size</label>
<input type="text" id="fileSize" class="form-control"/>
</div> -->
</div>
<div class="col-sm-6">
<div id="info2">
<img src="img/undraw_server_status.svg" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<h3 class="mb-3">Questions & Answers</h3>
<dl>
<dt>What do you do with my files?</dt>
<dd>Actually.... Nothing! This site (or app if you will) solely run in your browser. The fingerprinting happens without the need for you to upload your data. Try it! You can disconnect from the internet if you want. After the fingerprinting you can store the resulting 'hash' or fingerprint on the Hive blockchain. </dd>
<dt>What do you need from me?</dt>
<dd>Well... You need a file to be fingerprinted. And then you need a Hive account. Don't have one? <a href="https://signup.hive.io" data-referrer="proof.ink" data-name="Proof.ink" data-image="https://proof.ink/apple-touch-icon.png" title="Register a Hive account">Sign up instantly now</a>!</dd>
<dt>What is a hash/checksum/fingerprint?</dt>
<dd>From Wikipedia: A checksum is a small-sized datum derived from a block of digital data. Checksums are often used to verify data integrity but are not relied upon to verify data authenticity.</dd>
<dt>Why is hashing useful for proving file integrity? </dt>
<dd>
<ul>
<li>The hashing function used on this site is meant for one-way, so infeasible to invert. </li>
<li>The fingerprint is deterministic so the same data always results in the same fingerprint. This fact is used to help you prove the immutability of a given file you want to analyse using Proof.ink</li>
<li>Depending on the filesize, it is quick to compute the hash</li>
<li>It is infeasible to generate a message from its hash value except by trying all possible messages</li>
<li>A small change to a document should change the fingerprint so extensively that the new fingerprint appears uncorrelated with the old fingerprint</li>
<li>It is infeasible to find two different messages with the same fingerprint</li>
</ul>
</dd>
<dt>What is the Hive Blockchain?</dt>
<dd>The Hive blockchain is a decentralised proof of stake blockchain with 3 second blocktimes and quick confirmations. By using the Hive blockchain Proof.ink can build a trustless store of fingerprints on a blockchain which responds near instant and therefore keep the service "snappy". A fingerprint is ready while you wait, depending on your processor speed and filesize, and storing them doesn't take longer than 3 seconds if you have a Hive account readily available. </dd>
<dt>How can I get a Hive account? </dt>
<dd>Hive is a free to use blockchain. Registerring an account however costs a little bit of Hive currency (3 Hive at the time of writing). Some faucets issueing free accounts do exist, but have a waiting time of 2 weeks or more. You can easily signup for a paid account (think 2-4 dollars at time of writing) via for example the <a href="https://hivewallet.app" target="_blank">HiveWallet.app - opensource mobile Hive Wallet for iOS and Android</a> or <a href="https://signup.hive.io" data-referrer="proof.ink" data-name="Proof.ink" data-image="https://proof.ink/apple-touch-icon.png" title="Register a Hive account">directly on Proof.ink</a> for a small fee.</dd>
<dt>How much does your service cost?</dt>
<dd>Storing the fingerprint on the Hive chain is done by sending a public transfer to the @proof.ink account on the Hive chain, including your 'fingerprint' in the message's "memo"-field. Intrinsic to transferring is that you need to send a bit of Hive or Hive dollars along. It is up to you to decide how much Hive you send. Any funds you send will be used to maintain the service. A recommended amount is pre-filled, but you can go as low as 0.001 Hive/HBD or as high as sending all the Hive/HBD you have!</dd>
<dt>Who are you?</dt>
<dd>My name is RoelandP, I am a huge fan of the Hive and related graphene chains. Here are some of my links: <a href="https://github.com/roelandp" target="_blank">github</a>, <a href="https://twitter.com/@roelandp" target="_blank">twitter</a>, <a href="https://hive.blog/@roelandp" target="_blank">hive blog</a> and my <a href="https://roelandp.nl" target="_blank">personal landingpage</a>.</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
</footer>
<div class="modal" tabindex="-1" role="dialog" id="qrmodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scan QRcode</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="qrcode"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="manualmodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Post fingerprint manually</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Send a transaction to <code class="bg-success text-white p-1">@proof.ink</code> on the Hive blockchain using for example <a href="https://hive.blog" target="_blank">Hive.blog</a>, <a href="https://busy.org" target="_blank">Busy</a>, <a href="https://ecency.app" target="_blank">Ecency</a> or <a href="https://peakd.com" target="_blank">PeakD</a>.</p>
<div class="form-group">
<label for="manualmodaltextarea"><b>Copy paste the following text in the <code class="bg-success text-white p-1">memo</code>-field:</b></label>
<textarea class="form-control code" id="manualmodaltextarea" rows="4" onclick="this.focus();this.select()" readonly="readonly"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="./crypto-js.js"></script>
<script src="./index.js?v=4"></script>
</body>
</html>