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             .feedback-container {
  14                 position: fixed;
  15                 top: 0;
  16                 width: 100%;
  17                 text-align: center;
  18                 z-index: 4;
  19             }
  20             .feedback {
  21                 display: table;
  22                 padding: 0.5em 1em;
  23                 background-color: orange;
  24                 margin: 0 auto;
  25                 font-size: 2em;
  26                 color: #444;
  27                 border: 2px solid #555;
  28                 border-top: 0;
  29                 border-bottom-left-radius: 20px 20px;
  30                 border-bottom-right-radius: 20px 20px;
  31             }
  32         </style>
  33     </head>
  34     <body>
  35         <div class="container">
  36
  37             <h1 class="text-center">Mnemonic Code Converter</h1>
  38             <hr>
  39             <div class="row">
  40                 <div class="col-md-12">
  41                     <h2>Phrase</h2>
  42                     <form class="form-horizontal" role="form">
  43                         <div class="col-sm-2"></div>
  44                         <div class="col-sm-10">
  45                             <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
  46                         </div>
  47                         <div class="form-group">
  48                             <label for="phrase" class="col-sm-2 control-label">BIP39 Phrase</label>
  49                             <div class="col-sm-10">
  50                                 <textarea id="phrase" class="phrase form-control"></textarea>
  51                             </div>
  52                         </div>
  53                         <div class="form-group">
  54                             <label for="strength" class="col-sm-2 control-label">Number of words</label>
  55                             <div class="col-sm-10">
  56                                 <div class="input-group">
  57                                     <input type="number" class="strength form-control" id="strength" value="12">
  58                                     <span class="input-group-btn">
  59                                         <button class="btn generate">Generate Random Phrase</button>
  60                                     </span>
  61                                 </div>
  62                             </div>
  63                         </div>
  64                         <div class="form-group">
  65                             <label for="root-key" class="col-sm-2 control-label">BIP32 Root Key</label>
  66                             <div class="col-sm-10">
  67                                 <textarea id="root-key" class="root-key form-control" disabled="disabled"></textarea>
  68                             </div>
  69                         </div>
  70                     </form>
  71                 </div>
  72             </div>
  73
  74             <hr>
  75
  76             <div class="row">
  77                 <div class="col-md-12">
  78                     <h2>Derivation Path</h2>
  79                     <ul class="derivation-type nav nav-tabs" role="tablist">
  80                         <li class="active">
  81                         <a href="#bip44" role="tab" data-toggle="tab">BIP44</a></li>
  82                         <li><a href="#bip32" role="tab" data-toggle="tab">BIP32</a></li>
  83                     </ul>
  84                     <div class="derivation-type tab-content">
  85                         <div id="bip44" class="tab-pane active">
  86                             <form class="form-horizontal" role="form">
  87                                 <br>
  88                                 <div class="col-sm-2"></div>
  89                                 <div class="col-sm-10">
  90                                     <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">BIP44 spec</a></p>
  91                                 </div>
  92                                 <div class="form-group">
  93                                     <label for="purpose" class="col-sm-2 control-label">
  94                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#purpose" target="_blank">Purpose</a>
  95                                     </label>
  96                                     <div class="col-sm-10">
  97                                         <input id="purpose" type="text" class="purpose form-control" value="44">
  98                                     </div>
  99                                 </div>
 100                                 <div class="form-group">
 101                                     <label for="coin" class="col-sm-2 control-label">
 102                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#registered-coin-types" target="_blank">Coin</a>
 103                                     </label>
 104                                     <div class="col-sm-10">
 105                                         <input id="coin" type="text" class="coin form-control" value="0">
 106                                     </div>
 107                                 </div>
 108                                 <div class="form-group">
 109                                     <label for="account" class="col-sm-2 control-label">
 110                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account" target="_blank">Account</a>
 111                                     </label>
 112                                     <div class="col-sm-10">
 113                                         <input id="account" type="text" class="account form-control" value="0">
 114                                     </div>
 115                                 </div>
 116                                 <div class="form-group">
 117                                     <label for="change" class="col-sm-2 control-label">
 118                                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#change" target="_blank">External / Internal</a>
 119                                     </label>
 120                                     <div class="col-sm-10">
 121                                         <input id="change" type="text" class="change form-control" value="0">
 122                                     </div>
 123                                 </div>
 124                                 <div class="form-group">
 125                                     <label for="bip44-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
 126                                     <div class="col-sm-10">
 127                                         <input id="bip44-path" type="text" class="path form-control" value="m/44'/0'/0'/0" disabled="disabled">
 128                                     </div>
 129                                 </div>
 130                             </form>
 131                         </div>
 132                         <div id="bip32" class="tab-pane">
 133                             <form class="form-horizontal" role="form">
 134                                 <br>
 135                                 <div class="col-sm-2"></div>
 136                                 <div class="col-sm-10">
 137                                     <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">BIP32 spec</a></p>
 138                                 </div>
 139                                 <div class="form-group">
 140                                     <label for="bip32-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
 141                                     <div class="col-sm-10">
 142                                         <input id="bip32-path" type="text" class="path form-control" value="m/0">
 143                                     </div>
 144                                 </div>
 145                             </form>
 146                         </div>
 147                     </div>
 148                     <form class="form-horizontal" role="form">
 149                         <div class="form-group">
 150                             <label for="extended-priv-key" class="col-sm-2 control-label">BIP32 Extended Key</label>
 151                             <div class="col-sm-10">
 152                                 <textarea id="extended-priv-key" class="extended-priv-key form-control" disabled="disabled"></textarea>
 153                             </div>
 154                         </div>
 155                         <div class="form-group">
 156                             <label for="extended-pub-key" class="col-sm-2 control-label">BIP32 Extended Key (addresses only)</label>
 157                             <div class="col-sm-10">
 158                                 <textarea id="extended-pub-key" class="extended-pub-key form-control" disabled="disabled"></textarea>
 159                             </div>
 160                         </div>
 161                     </form>
 162                 </div>
 163             </div>
 164
 165             <hr>
 166
 167             <div class="row">
 168                 <div class="col-md-12">
 169                     <h2>Derived Addresses</h2>
 170                     <p>Note these addreses are derived from the <strong>BIP32 Extended Key</strong></p>
 171                     <table class="table table-striped">
 172                         <thead>
 173                             <th>
 174                                 <div class="input-group">
 175                                     Index&nbsp;&nbsp;
 176                                     <button class="index-toggle">Toggle</button>
 177                                 </div>
 178                             </th>
 179                             <th>
 180                                 <div class="input-group">
 181                                     Address&nbsp;&nbsp;
 182                                     <button class="address-toggle">Toggle</button>
 183                                 </div>
 184                             </th>
 185                             <th>
 186                                 <div class="input-group">
 187                                     Private Key&nbsp;&nbsp;
 188                                     <button class="private-key-toggle">Toggle</button>
 189                                 </div>
 190                             </th>
 191                         </thead>
 192                         <tbody class="addresses">
 193                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 194                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 195                             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 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                         </tbody>
 199                     </table>
 200                 </div>
 201             </div>
 202             <span>Show next </button>
 203             <input type="number" class="rows-to-add" value="20">
 204             <button class="more">Show</button>
 205
 206             <hr>
 207
 208             <div class="row">
 209                 <div class="col-md-12">
 210                     <h2>More info</h2>
 211                     <h3>BIP39 <span class="small">Mnemonic code for generating deterministic keys</span></h3>
 212                     <p>
 213                         Read more at the
 214                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">official BIP39 spec</a>
 215                     </p>
 216                     <h3>BIP32 <span class="small">Hierarchical Deterministic Wallets</span></h3>
 217                     <p>
 218                         Read more at the
 219                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">official BIP32 spec</a>
 220                         and see the demo at
 221                         <a href="http://bip32.org/" target="_blank">bip32.org</a>
 222                     </p>
 223                     <h3>BIP44 <span class="small">Multi-Account Hierarchy for Deterministic Wallets</span></h3>
 224                     <p>
 225                         Read more at the
 226                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">official BIP44 spec</a>
 227                     </p>
 228                     <h3>Private Keys</h3>
 229                     <p>
 230                         Use private keys at
 231                         <a href="https://brainwallet.github.io/" target="_blank">brainwallet.org</a>,
 232                         but be careful - it can be easy to make mistakes if you
 233                         don't know what you're doing
 234                     </p>
 235                 </div>
 236             </div>
 237         </div>
 238
 239         <div class="feedback-container">
 240             <div class="feedback"></div>
 241         </div>
 242
 243         <script type="text/template" id="address-row-template">
 244             <tr>
 245                 <td class="index"><span></span></td>
 246                 <td class="address"><span></span></td>
 247                 <td class="privkey"><span></span></td>
 248             </tr>
 249         </script>
 250         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 251         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 252         <script src="/js/bitcoinjs-1-0-0.js"></script>
 253         <script src="/js/asmcrypto.js"></script>
 254         <script src="/js/jsbip39.js"></script>
 255         <script src="/js/index.js"></script>
 256     </body>
 257 </html>