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