]> git.immae.eu Git - perso/Immae/Projets/Cryptomonnaies/BIP39.git/blame - src/index.html
Help text has correct left padding
[perso/Immae/Projets/Cryptomonnaies/BIP39.git] / src / index.html
CommitLineData
ebd8d4e8
IC
1<!DOCTYPE html>
2<html>
3 <head lang="en">
4 <meta charset="utf-8" />
5 <title>BIP39 - Mnemonic Code</title>
6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
7 <meta content="Mnemonic code for generating deterministic keys" name="description"/>
8 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
9 <meta content="bitcoin mnemonic converter" name="description" />
10 <meta content="DC POS" name="author" />
11
12 <style>
f52dcdbd
IC
13 body {
14 padding-bottom: 32px;
15 }
ebd8d4e8
IC
16 .feedback-container {
17 position: fixed;
18 top: 0;
19 width: 100%;
20 text-align: center;
21 z-index: 4;
22 }
23 .feedback {
24 display: table;
25 padding: 0.5em 1em;
26 background-color: orange;
27 margin: 0 auto;
28 font-size: 2em;
29 color: #444;
30 border: 2px solid #555;
31 border-top: 0;
32 border-bottom-left-radius: 20px 20px;
33 border-bottom-right-radius: 20px 20px;
34 }
35 </style>
36 </head>
37 <body>
38 <div class="container">
39
40 <h1 class="text-center">Mnemonic Code Converter</h1>
41 <hr>
42 <div class="row">
43 <div class="col-md-12">
44 <h2>Phrase</h2>
45 <form class="form-horizontal" role="form">
46 <div class="col-sm-2"></div>
47 <div class="col-sm-10">
d922d691 48 <p>You can enter an existing BIP39 phrase, or generate a new random one. Typing your own twelve words will probably not work how you expect, since the words require a particular structure (the last word is a checksum)</p>
ebd8d4e8
IC
49 <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
50 </div>
51 <div class="form-group">
52 <label for="phrase" class="col-sm-2 control-label">BIP39 Phrase</label>
53 <div class="col-sm-10">
54 <textarea id="phrase" class="phrase form-control"></textarea>
55 </div>
56 </div>
57 <div class="form-group">
58 <label for="strength" class="col-sm-2 control-label">Number of words</label>
59 <div class="col-sm-10">
60 <div class="input-group">
61 <input type="number" class="strength form-control" id="strength" value="12">
62 <span class="input-group-btn">
63 <button class="btn generate">Generate Random Phrase</button>
64 </span>
65 </div>
66 </div>
67 </div>
68 <div class="form-group">
69 <label for="root-key" class="col-sm-2 control-label">BIP32 Root Key</label>
70 <div class="col-sm-10">
71 <textarea id="root-key" class="root-key form-control" disabled="disabled"></textarea>
72 </div>
73 </div>
74 </form>
75 </div>
76 </div>
77
78 <hr>
79
80 <div class="row">
81 <div class="col-md-12">
82 <h2>Derivation Path</h2>
83 <ul class="derivation-type nav nav-tabs" role="tablist">
84 <li class="active">
85 <a href="#bip44" role="tab" data-toggle="tab">BIP44</a></li>
86 <li><a href="#bip32" role="tab" data-toggle="tab">BIP32</a></li>
87 </ul>
88 <div class="derivation-type tab-content">
89 <div id="bip44" class="tab-pane active">
90 <form class="form-horizontal" role="form">
91 <br>
92 <div class="col-sm-2"></div>
93 <div class="col-sm-10">
94 <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">BIP44 spec</a></p>
95 </div>
96 <div class="form-group">
97 <label for="purpose" class="col-sm-2 control-label">
98 <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#purpose" target="_blank">Purpose</a>
99 </label>
100 <div class="col-sm-10">
101 <input id="purpose" type="text" class="purpose form-control" value="44">
102 </div>
103 </div>
104 <div class="form-group">
105 <label for="coin" class="col-sm-2 control-label">
106 <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#registered-coin-types" target="_blank">Coin</a>
107 </label>
108 <div class="col-sm-10">
109 <input id="coin" type="text" class="coin form-control" value="0">
110 </div>
111 </div>
112 <div class="form-group">
113 <label for="account" class="col-sm-2 control-label">
114 <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account" target="_blank">Account</a>
115 </label>
116 <div class="col-sm-10">
117 <input id="account" type="text" class="account form-control" value="0">
118 </div>
119 </div>
120 <div class="form-group">
121 <label for="change" class="col-sm-2 control-label">
122 <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#change" target="_blank">External / Internal</a>
123 </label>
124 <div class="col-sm-10">
125 <input id="change" type="text" class="change form-control" value="0">
126 </div>
127 </div>
128 <div class="form-group">
129 <label for="bip44-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
130 <div class="col-sm-10">
131 <input id="bip44-path" type="text" class="path form-control" value="m/44'/0'/0'/0" disabled="disabled">
132 </div>
133 </div>
134 </form>
135 </div>
136 <div id="bip32" class="tab-pane">
137 <form class="form-horizontal" role="form">
138 <br>
139 <div class="col-sm-2"></div>
140 <div class="col-sm-10">
141 <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">BIP32 spec</a></p>
142 </div>
143 <div class="form-group">
144 <label for="bip32-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
145 <div class="col-sm-10">
146 <input id="bip32-path" type="text" class="path form-control" value="m/0">
147 </div>
148 </div>
149 </form>
150 </div>
151 </div>
152 <form class="form-horizontal" role="form">
153 <div class="form-group">
154 <label for="extended-priv-key" class="col-sm-2 control-label">BIP32 Extended Key</label>
155 <div class="col-sm-10">
156 <textarea id="extended-priv-key" class="extended-priv-key form-control" disabled="disabled"></textarea>
157 </div>
158 </div>
159 <div class="form-group">
160 <label for="extended-pub-key" class="col-sm-2 control-label">BIP32 Extended Key (addresses only)</label>
161 <div class="col-sm-10">
162 <textarea id="extended-pub-key" class="extended-pub-key form-control" disabled="disabled"></textarea>
163 </div>
164 </div>
165 </form>
166 </div>
167 </div>
168
169 <hr>
170
171 <div class="row">
172 <div class="col-md-12">
173 <h2>Derived Addresses</h2>
174 <p>Note these addreses are derived from the <strong>BIP32 Extended Key</strong></p>
175 <table class="table table-striped">
176 <thead>
177 <th>
178 <div class="input-group">
179 Index&nbsp;&nbsp;
180 <button class="index-toggle">Toggle</button>
181 </div>
182 </th>
183 <th>
184 <div class="input-group">
185 Address&nbsp;&nbsp;
186 <button class="address-toggle">Toggle</button>
187 </div>
188 </th>
189 <th>
190 <div class="input-group">
191 Private Key&nbsp;&nbsp;
192 <button class="private-key-toggle">Toggle</button>
193 </div>
194 </th>
195 </thead>
196 <tbody class="addresses">
197 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
198 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
199 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
200 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
201 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
202 </tbody>
203 </table>
204 </div>
205 </div>
206 <span>Show next </button>
207 <input type="number" class="rows-to-add" value="20">
208 <button class="more">Show</button>
209
210 <hr>
211
212 <div class="row">
213 <div class="col-md-12">
214 <h2>More info</h2>
215 <h3>BIP39 <span class="small">Mnemonic code for generating deterministic keys</span></h3>
216 <p>
217 Read more at the
218 <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">official BIP39 spec</a>
219 </p>
220 <h3>BIP32 <span class="small">Hierarchical Deterministic Wallets</span></h3>
221 <p>
222 Read more at the
223 <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">official BIP32 spec</a>
224 and see the demo at
225 <a href="http://bip32.org/" target="_blank">bip32.org</a>
226 </p>
227 <h3>BIP44 <span class="small">Multi-Account Hierarchy for Deterministic Wallets</span></h3>
228 <p>
229 Read more at the
230 <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">official BIP44 spec</a>
231 </p>
232 <h3>Private Keys</h3>
233 <p>
234 Use private keys at
235 <a href="https://brainwallet.github.io/" target="_blank">brainwallet.org</a>,
236 but be careful - it can be easy to make mistakes if you
237 don't know what you're doing
238 </p>
239 </div>
240 </div>
45b8a745
IC
241
242 <hr>
243
c5863485
IC
244 <div class="row">
245 <div class="col-md-12">
246
247 <h2>Offline Usage</h2>
248
249 <p>
250 You can use this tool without having to be online.
251 </p>
252 <p>
253 In your browser, select file save-as, and save this page
254 as a file.
255 </p>
256 <p>
257 Double-click that file to open it in a browser
258 on any offline computer.
259 </p>
260 <p>
261 Alternatively, download it from
262 <a href="https://github.com/dcpos/bip39">
263 https://github.com/dcpos/bip39
264 </a>
265
266 </div>
267 </div>
268
269 <hr>
270
45b8a745
IC
271 <div class="row">
272 <div class="col-md-12">
273
274 <h2>This project is 100% open-source code</h2>
275
276 <p>
277 <span>Get the source code at - </span>
278 <a href="https://github.com/dcpos/bip39" target="_blank">
279 https://github.com/dcpos/bip39
280 </a>
281 </p>
282
283 <h3>Libraries</h3>
284
285 <p>
286 <span>BitcoinJS - </span>
287 <a href="https://github.com/bitcoinjs/bitcoinjs-lib" target="_blank">
288 https://github.com/bitcoinjs/bitcoinjs-lib
289 </a>
290 </p>
291
292 <p>
293 <span>jsBIP39 - </span>
294 <a href="https://github.com/iancoleman/jsbip39" target="_blank">
295 https://github.com/iancoleman/jsbip39
296 </a>
297 </p>
298
299 <p>
300 <span>asmCrypto - </span>
301 <a href="https://github.com/vibornoff/asmcrypto.js" target="_blank">
302 https://github.com/vibornoff/asmcrypto.js
303 </a>
304 </p>
305
306 <p>
307 <span>jQuery - </span>
308 <a href="https://jquery.com/" target="_blank">
309 https://jquery.com/
310 </a>
311 </p>
312
313 <p>
314 <span>Twitter Bootstrap - </span>
315 <a href="http://getbootstrap.com/" target="_blank">
316 http://getbootstrap.com/
317 </a>
318 </p>
319
320 </div>
321 </div>
322
ebd8d4e8
IC
323 </div>
324
325 <div class="feedback-container">
326 <div class="feedback"></div>
327 </div>
328
329 <script type="text/template" id="address-row-template">
330 <tr>
331 <td class="index"><span></span></td>
332 <td class="address"><span></span></td>
333 <td class="privkey"><span></span></td>
334 </tr>
335 </script>
336 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
337 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
338 <script src="/js/bitcoinjs-1-0-0.js"></script>
339 <script src="/js/asmcrypto.js"></script>
340 <script src="/js/jsbip39.js"></script>
341 <script src="/js/index.js"></script>
342 </body>
343</html>