src/index.html

   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="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>
  13             body {
  14                 padding-bottom: 32px;
  15             }
  16             .form-control[readonly] {
  17                 cursor: text;
  18             }
  19             .feedback-container {
  20                 position: fixed;
  21                 top: 0;
  22                 width: 100%;
  23                 text-align: center;
  24                 z-index: 4;
  25             }
  26             .feedback {
  27                 display: table;
  28                 padding: 0.5em 1em;
  29                 background-color: orange;
  30                 margin: 0 auto;
  31                 font-size: 2em;
  32                 color: #444;
  33                 border: 2px solid #555;
  34                 border-top: 0;
  35                 border-bottom-left-radius: 20px 20px;
  36                 border-bottom-right-radius: 20px 20px;
  37             }
  38             .no-border {
  39                 border: 0;
  40                 box-shadow: inset 0 1px 1px rgba(0,0,0,.0);
  41                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.0);
  42             }
  43         </style>
  44     </head>
  45     <body>
  46         <div class="container">
  47
  48             <h1 class="text-center">Mnemonic Code Converter</h1>
  49             <hr>
  50             <div class="row">
  51                 <div class="col-md-12">
  52                     <h2>Mnemonic</h2>
  53                     <form class="form-horizontal" role="form">
  54                         <div class="col-sm-2"></div>
  55                         <div class="col-sm-10">
  56                             <p>You can enter an existing BIP39 mnemonic, 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>
  57                             <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
  58                         </div>
  59                         <div class="form-group">
  60                             <label for="phrase" class="col-sm-2 control-label">BIP39 Mnemonic</label>
  61                             <div class="col-sm-10">
  62                                 <textarea id="phrase" class="phrase form-control"></textarea>
  63                             </div>
  64                         </div>
  65                         <div class="form-group">
  66                             <label for="strength" class="col-sm-2 control-label">Number of words</label>
  67                             <div class="col-sm-10">
  68                                 <div class="input-group">
  69                                     <select id="strength" class="strength form-control">
  70                                         <option val="3">3</option>
  71                                         <option val="6">6</option>
  72                                         <option val="9">9</option>
  73                                         <option val="12">12</option>
  74                                         <option val="15" selected>15</option>
  75                                         <option val="18">18</option>
  76                                         <option val="21">21</option>
  77                                         <option val="24">24</option>
  78                                     </select>
  79                                     <span class="input-group-btn">
  80                                         <button class="btn generate">Generate Random Mnemonic</button>
  81                                     </span>
  82                                 </div>
  83                             </div>
  84                         </div>
  85                         <div class="form-group">
  86                             <label for="passphrase" class="col-sm-2 control-label">BIP39 Passphrase (optional)</label>
  87                             <div class="col-sm-10">
  88                                 <textarea id="passphrase" class="passphrase form-control"></textarea>
  89                             </div>
  90                         </div>
  91                         <div class="form-group">
  92                             <label for="seed" class="col-sm-2 control-label">BIP39 Seed</label>
  93                             <div class="col-sm-10">
  94                                 <textarea id="seed" class="seed form-control" readonly="readonly"></textarea>
  95                             </div>
  96                         </div>
  97                         <div class="form-group">
  98                             <label for="network-phrase" class="col-sm-2 control-label">Coin</label>
  99                             <div class="col-sm-10">
 100                                 <select id="network-phrase" class="network form-control">
 101                                     <!-- populated by javascript -->
 102                                 </select>
 103                             </div>
 104                         </div>
 105                         <div class="form-group">
 106                             <label for="root-key" class="col-sm-2 control-label">BIP32 Root Key</label>
 107                             <div class="col-sm-10">
 108                                 <textarea id="root-key" class="root-key form-control"></textarea>
 109                             </div>
 110                         </div>
 111                     </form>
 112                 </div>
 113             </div>
 114
 115             <hr>
 116
 117             <div class="row">
 118                 <div class="col-md-12">
 119                     <h2>Derivation Path</h2>
 120                     <ul class="derivation-type nav nav-tabs" role="tablist">
 121                         <li id="bip44-tab" class="active">
 122                             <a href="#bip44" role="tab" data-toggle="tab">BIP44</a>
 123                         </li>
 124                         <li id="bip32-tab">
 125                             <a href="#bip32" role="tab" data-toggle="tab">BIP32</a>
 126                         </li>
 127                     </ul>
 128                     <div class="derivation-type tab-content">
 129                         <div id="bip44" class="tab-pane active">
 130                             <form class="form-horizontal" role="form">
 131                                 <br>
 132                                 <div class="col-sm-2"></div>
 133                                 <div class="col-sm-10">
 134                                     <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">BIP44 spec</a></p>
 135                                 </div>
 136                                 <div class="form-group">
 137                                     <label for="purpose" class="col-sm-2 control-label">
 138                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#purpose" target="_blank">Purpose</a>
 139                                     </label>
 140                                     <div class="col-sm-10">
 141                                         <input id="purpose" type="text" class="purpose form-control" value="44">
 142                                     </div>
 143                                 </div>
 144                                 <div class="form-group">
 145                                     <label for="coin" class="col-sm-2 control-label">
 146                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#registered-coin-types" target="_blank">Coin</a>
 147                                     </label>
 148                                     <div class="col-sm-10">
 149                                         <input id="coin" type="text" class="coin form-control" value="0">
 150                                     </div>
 151                                 </div>
 152                                 <div class="form-group">
 153                                     <label for="account" class="col-sm-2 control-label">
 154                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account" target="_blank">Account</a>
 155                                     </label>
 156                                     <div class="col-sm-10">
 157                                         <input id="account" type="text" class="account form-control" value="0">
 158                                     </div>
 159                                 </div>
 160                                 <div class="form-group">
 161                                     <label for="change" class="col-sm-2 control-label">
 162                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#change" target="_blank">External / Internal</a>
 163                                     </label>
 164                                     <div class="col-sm-10">
 165                                         <input id="change" type="text" class="change form-control" value="0">
 166                                     </div>
 167                                 </div>
 168                                 <div class="form-group">
 169                                     <label for="bip44-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
 170                                     <div class="col-sm-10">
 171                                         <input id="bip44-path" type="text" class="path form-control" value="m/44'/0'/0'/0" readonly="readonly">
 172                                     </div>
 173                                 </div>
 174                             </form>
 175                         </div>
 176                         <div id="bip32" class="tab-pane">
 177                             <form class="form-horizontal" role="form">
 178                                 <br>
 179                                 <div class="col-sm-2"></div>
 180                                 <div class="col-sm-10">
 181                                     <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">BIP32 spec</a></p>
 182                                 </div>
 183                                 <div class="form-group">
 184                                     <label for="bip32-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
 185                                     <div class="col-sm-10">
 186                                         <input id="bip32-path" type="text" class="path form-control" value="m/0">
 187                                     </div>
 188                                 </div>
 189                                 <div class="form-group">
 190                                     <div class="col-sm-2"></div>
 191                                     <label class="col-sm-10">
 192                                         <input class="hardened-addresses" type="checkbox">
 193                                         Use hardened addresses
 194                                     </label>
 195                                 </div>
 196                                 <div class="form-group">
 197                                     <label class="col-sm-2 control-label">Hive Wallet</label>
 198                                     <div class="col-sm-10">
 199                                         <p class="form-control no-border">
 200                                         Use path <code>m/0'/0</code>.
 201                                         For more info see the <a href="https://www.hivewallet.com/" target="_blank">Hive Wallet homepage</a>
 202                                         </p>
 203                                     </div>
 204                                 </div>
 205                                 <div class="form-group">
 206                                     <label for="mycelium-path" class="col-sm-2 control-label">Mycelium Wallet</label>
 207                                     <div class="col-sm-10">
 208                                         <p class="form-control no-border">
 209                                         Use path <code>m/44'/0'/0'/0</code>.
 210                                         For more info see the <a href="http://www.mycelium.com/" target="_blank">Mycelium Wallet homepage</a>
 211                                         </p>
 212                                     </div>
 213                                 </div>
 214                             </form>
 215                         </div>
 216                     </div>
 217                     <form class="form-horizontal" role="form">
 218                         <div class="form-group">
 219                             <label for="extended-priv-key" class="col-sm-2 control-label">BIP32 Extended Key</label>
 220                             <div class="col-sm-10">
 221                                 <textarea id="extended-priv-key" class="extended-priv-key form-control" readonly="readonly"></textarea>
 222                             </div>
 223                         </div>
 224                         <div class="form-group">
 225                             <label for="extended-pub-key" class="col-sm-2 control-label">BIP32 Extended Key (addresses only)</label>
 226                             <div class="col-sm-10">
 227                                 <textarea id="extended-pub-key" class="extended-pub-key form-control" readonly="readonly"></textarea>
 228                             </div>
 229                         </div>
 230                     </form>
 231                 </div>
 232             </div>
 233
 234             <hr>
 235
 236             <div class="row">
 237                 <div class="col-md-12">
 238                     <h2>Derived Addresses</h2>
 239                     <p>Note these addreses are derived from the <strong>BIP32 Extended Key</strong></p>
 240                     <table class="table table-striped">
 241                         <thead>
 242                             <th>
 243                                 <div class="input-group">
 244                                     Path&nbsp;&nbsp;
 245                                     <button class="index-toggle">Toggle</button>
 246                                 </div>
 247                             </th>
 248                             <th>
 249                                 <div class="input-group">
 250                                     Address&nbsp;&nbsp;
 251                                     <button class="address-toggle">Toggle</button>
 252                                 </div>
 253                             </th>
 254                             <th>
 255                                 <div class="input-group">
 256                                     Private Key&nbsp;&nbsp;
 257                                     <button class="private-key-toggle">Toggle</button>
 258                                 </div>
 259                             </th>
 260                         </thead>
 261                         <tbody class="addresses">
 262                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 263                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 264                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 265                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 266                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 267                         </tbody>
 268                     </table>
 269                 </div>
 270             </div>
 271             <span>Show next </button>
 272             <input type="number" class="rows-to-add" value="20">
 273             <button class="more">Show</button>
 274
 275             <hr>
 276
 277             <div class="row">
 278                 <div class="col-md-12">
 279                     <h2>More info</h2>
 280                     <h3>BIP39 <span class="small">Mnemonic code for generating deterministic keys</span></h3>
 281                     <p>
 282                         Read more at the
 283                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">official BIP39 spec</a>
 284                     </p>
 285                     <h3>BIP32 <span class="small">Hierarchical Deterministic Wallets</span></h3>
 286                     <p>
 287                         Read more at the
 288                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">official BIP32 spec</a>
 289                         and see the demo at
 290                         <a href="http://bip32.org/" target="_blank">bip32.org</a>
 291                     </p>
 292                     <h3>BIP44 <span class="small">Multi-Account Hierarchy for Deterministic Wallets</span></h3>
 293                     <p>
 294                         Read more at the
 295                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">official BIP44 spec</a>
 296                     </p>
 297                     <h3>Private Keys</h3>
 298                     <p>
 299                         Use private keys at
 300                         <a href="https://web.archive.org/web/20150707020924/https://brainwallet.org/" target="_blank">brainwallet.org</a>,
 301                         but be careful - it can be easy to make mistakes if you
 302                         don't know what you're doing
 303                     </p>
 304                 </div>
 305             </div>
 306
 307             <hr>
 308
 309             <div class="row">
 310                 <div class="col-md-12">
 311
 312                     <h2>Offline Usage</h2>
 313
 314                     <p>
 315                     You can use this tool without having to be online.
 316                     </p>
 317                     <p>
 318                     In your browser, select file save-as, and save this page
 319                     as a file.
 320                     </p>
 321                     <p>
 322                     Double-click that file to open it in a browser
 323                     on any offline computer.
 324                     </p>
 325                     <p>
 326                     Alternatively, download it from
 327                     <a href="https://github.com/dcpos/bip39">
 328                         https://github.com/dcpos/bip39
 329                     </a>
 330
 331                 </div>
 332             </div>
 333
 334             <hr>
 335
 336             <div class="row">
 337                 <div class="col-md-12">
 338
 339                     <h2>This project is 100% open-source code</h2>
 340
 341                     <p>
 342                         <span>Get the source code at - </span>
 343                         <a href="https://github.com/dcpos/bip39" target="_blank">
 344                             https://github.com/dcpos/bip39
 345                         </a>
 346                     </p>
 347
 348                     <h3>Libraries</h3>
 349
 350                     <p>
 351                         <span>BitcoinJS - </span>
 352                         <a href="https://github.com/bitcoinjs/bitcoinjs-lib" target="_blank">
 353                             https://github.com/bitcoinjs/bitcoinjs-lib
 354                         </a>
 355                     </p>
 356
 357                     <p>
 358                         <span>jsBIP39 - </span>
 359                         <a href="https://github.com/iancoleman/jsbip39" target="_blank">
 360                             https://github.com/iancoleman/jsbip39
 361                         </a>
 362                     </p>
 363
 364                     <p>
 365                         <span>sjcl - </span>
 366                         <a href="https://github.com/bitwiseshiftleft/sjcl" target="_blank">
 367                             https://github.com/bitwiseshiftleft/sjcl
 368                         </a>
 369                     </p>
 370
 371                     <p>
 372                         <span>jQuery - </span>
 373                         <a href="https://jquery.com/" target="_blank">
 374                             https://jquery.com/
 375                         </a>
 376                     </p>
 377
 378                     <p>
 379                         <span>Twitter Bootstrap - </span>
 380                         <a href="http://getbootstrap.com/" target="_blank">
 381                             http://getbootstrap.com/
 382                         </a>
 383                     </p>
 384
 385                 </div>
 386             </div>
 387
 388         </div>
 389
 390         <div class="feedback-container">
 391             <div class="feedback">Loading...</div>
 392         </div>
 393
 394         <script type="text/template" id="address-row-template">
 395             <tr>
 396                 <td class="index"><span></span></td>
 397                 <td class="address"><span></span></td>
 398                 <td class="privkey"><span></span></td>
 399             </tr>
 400         </script>
 401         <script src="js/jquery.min.js"></script>
 402         <script src="js/bootstrap.min.js"></script>
 403         <script src="js/levenshtein.js"></script>
 404         <script src="js/bitcoinjs-1-5-7.js"></script>
 405         <script src="js/bitcoinjs-extensions.js"></script>
 406         <script src="js/sjcl-bip39.js"></script>
 407         <script src="js/wordlist_english.js"></script>
 408         <script src="js/jsbip39.js"></script>
 409         <script src="js/index.js"></script>
 410     </body>
 411 </html>