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