forked from multiformats/cid-utils-website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (125 loc) · 7.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CID Inspector | IPFS</title>
<meta name="description" content="Convert IPFS CIDs into human-readable form">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./main.css">
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==" />
<link rel="canonical" href="https://cid.ipfs.tech/">
</head>
<body class='sans-serif bg-white'>
<header class="flex-ns items-center pt3 pb2 ph3 bg-navy bb bw3 border-aqua tc justify-between">
<div>
<a href="https://ipfs.tech/" title="Visit ipfs.tech">
<img src="assets/ipfs_logo.svg" style='height:50px' />
</a>
</div>
<div class='pb1 ma0 inline-flex items-center'>
<h1 class='f3 fw2 montserrat aqua ttu'>CID Inspector</h1>
<div class='pl3'>
<a href="https://github.com/multiformats/cid-utils-website" target="_blank" rel="noopener noreferrer" aria-label="View source on GitHub">
<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 32.58 31.77'>
<path fill='#7f8491' d='M16.29 0a16.29 16.29 0 00-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 00-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 012.49 1.68 3.48 3.48 0 004.74 1.36 3.46 3.46 0 011-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 011.67-4.37 5.94 5.94 0 01.16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 018.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 01.2 4.28 6.3 6.3 0 011.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 011.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0016.29 0z'/>
</svg>
</a>
</div>
</div>
</header>
<section class='pv4 pl2 pl5-l'>
<div class='pt2 measure-wide cf pr2 pr0-l'>
<a class='gray hover-aqua link underline fr ml3' href="https://proto.school/#/anatomy-of-a-cid" target="_blank">Tutorial</a>
<a class='gray hover-aqua link underline fr ml3' href="https://github.com/ipld/cid" target="_blank">Spec</a>
<a class='gray hover-aqua link underline fr' href="https://docs.ipfs.tech/concepts/content-addressing/#identifier-formats" target="_blank">Docs</a>
<label for="input-cid" class='db pb2 w-100 tracked ttu f5 teal'>CID</label>
<input id="input-cid" type="text" placeholder="Paste a CID here to break it down!" class='db w-100 ph2 pv2 monospace input-reset ba b--black-20 border-box' />
</div>
<small id="input-error" class="db yellow f6 pt1 overflow-x-auto" style="opacity: 0; min-height:20px;"></small>
<div id="outputs">
<div class='pt3'>
<label class='db'>
<a class='tracked ttu f5 teal-muted hover-aqua link' href='https://github.com/ipld/cid#human-readable-cids'>
Human readable CID
</a>
</label>
<pre class='f5 sans-serif fw5 ma0 pv2 dib overflow-x-auto w-100' id="hr-cid"></pre>
<div class='f5 sans-serif ma0 charcoal-muted ttu f7 tracked'>multibase - version - multicodec - multihash (name : size : digest in hex)</div>
<div class='dn' id="cid" ></div>
</div>
<div class='pt4'>
<label class='db'>
<a class='pb1 w-100 tracked ttu f6 teal-muted hover-aqua link' href="https://github.com/multiformats/multibase">
Multibase
</a>
</label>
<div class='f5 sans-serif ma0 fw4 pt2'id="multibase"></div>
</div>
<div class='pt4'>
<label clas='db'>
<a class='pb1 w-100 tracked ttu f6 teal-muted hover-aqua link' href="https://github.com/multiformats/multicodec">
Multicodec
</a>
</label>
<div class='f5 sans-serif ma0 fw4 pt2'id="multicodec"></div>
</div>
<div class='pt4'>
<label class='dib'>
<a class='db pb1 w-100 tracked ttu f6 teal-muted hover-aqua link' href="https://github.com/multiformats/multihash">
Multihash
</a>
</label>
<div class='f5 sans-serif ma0 fw4 pt2'id="multihash"></div>
</div>
<div class='pt4'>
<label class='dib'>
<a class='db pb1 w-100 tracked ttu f6 teal-muted hover-aqua link'>
CID Byte length
</a>
</label>
<div class='pb1' id="cid-input-byte-length">
<dt class='dib pr2 sans-serif charcoal-muted ttu f7 tracked' id="cid-base-label"></dt>
<dd class='dib ma0 pa0 fw5 overflow-x-auto overflow-y-hidden w-100' id="cidbytelength-input"></dd>
</div>
<div class='pb1'>
<dt class='dib pr2 sans-serif charcoal-muted ttu f7 tracked'>As base32 string (Bytes)</dt>
<dd class='dib ma0 pa0 fw5 overflow-x-auto overflow-y-hidden w-100' id="cidbytelengthbase32"></dd>
</div>
<div class='pb1'>
<dt class='dib pr2 sans-serif charcoal-muted ttu f7 tracked'>Binary (Bytes)</dt>
<dd class='dib ma0 pa0 fw5 overflow-x-auto overflow-y-hidden w-100' id="cidbytelengthbin"></dd>
</div>
</div>
<div class='pt4'>
<label class='dib'>
<a class='db pb1 w-100 tracked ttu f6 teal-muted hover-aqua link' href="https://docs.ipfs.tech/concepts/content-addressing/#version-1-v1">
CIDv1 (Base32)
</a>
</label>
<div class='f5 monospace ma0 overflow-x-auto overflow-y-hidden fw4 pt2' id="base32cidv1"></div>
</div>
<div class='pt4' id='dns'>
<label class='dib'>
<a class='db pb1 w-100 tracked ttu f6 teal-muted hover-aqua link' href="https://docs.ipfs.tech/how-to/address-ipfs-on-web/#subdomain-gateway">
CIDv1 (Base36, optimized for Subdomains)
</a>
</label>
<div class='f5 monospace ma0 overflow-x-auto overflow-y-hidden fw4 pt2' id="dnscidv1"></div>
</div>
</div>
</section>
<footer class='mt2 pv2 ph2 ph3-l bt b--light-gray'>
<a href="https://multiformats.io/" title='Multiformats' class='dib v-mid'>
<img src="assets/multiformats_logo.svg" style='height:50px' />
</a>
<a href="https://ipld.io" title="Interplanetary Linked Data" class='dib v-mid'>
<img src="assets/ipld_logo.svg" style='height:40px' />
</a>
<a href="https://proto.school/#/anatomy-of-a-cid" title="ProtoSchool" class='dib v-mid pl1'>
<img src="assets/protoschool_logo.svg" style='height:40px' />
</a>
</footer>
<script type="module" src="./index.js"></script>
</body>
</html>