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