]> git.immae.eu Git - perso/Immae/Projets/Cryptomonnaies/BIP39.git/blobdiff - src/index.html
BIP44 Account xprv and xpub keys are shown
[perso/Immae/Projets/Cryptomonnaies/BIP39.git] / src / index.html
index 4f48a27d1d5eb5c72a4a8ce183471717296ed2e5..e3eebd6a4b04808807ca2e54ea98bf273972d57e 100644 (file)
             .phrase {
                 word-break: keep-all;
             }
-            .strength {
+            .generate-container .strength {
                 /* override mobile width from bootstrap */
                 width: auto!important;
                 display: inline-block;
             }
-            .languages * {
+            .languages a {
                 padding-left: 10px;
             }
+            .languages a:nth-of-type(1) {
+                margin-left: -12px;
+                padding-left: 0;
+            }
             .monospace {
                 font-family: monospace;
             }
+            .entropy-container .filtered,
+            .entropy-container .binary {
+                word-wrap: break-word;
+            }
+            .entropy-container li {
+                padding-bottom: 5px;
+            }
+            .card-suit {
+                font-size: 19px;
+                line-height: 0;
+            }
+            .card-suit.club {
+                color: #009F00;
+            }
+            .card-suit.diamond {
+                color: #3D5DC4;
+            }
+            .card-suit.heart {
+                color: #F00;
+            }
+            .card-suit.spade {
+                color: #000;
+            }
+            .qr-container {
+                position: fixed;
+                top: 0;
+                right: 0;
+                text-align: center;
+                background-color: #FFF;
+                border: 1px solid #CCC;
+            }
+            .qr-image {
+                margin: 5px;
+            }
+            .qr-hint {
+                padding: 2px;
+            }
         </style>
     </head>
     <body>
                         <div class="form-group">
                             <div class="col-sm-2"></div>
                             <div class="col-sm-10">
-                                <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>
-                                <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
+                                <p data-translate>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>
+                                <p data-translate-html>
+                                    For more info see the
+                                    <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a>.
+                                </p>
                             </div>
                         </div>
                         <div class="form-group generate-container">
                             <div class="col-sm-10">
                                 <div class="form-inline">
                                     <div class="input-group-inline">
+                                        <span data-translate>Generate a random mnemonic, or enter your own below</span>:
                                         <button class="btn generate">Generate</button>
-                                        <span>a random</span>
                                         <select id="strength" class="strength form-control">
                                             <option value="3">3</option>
                                             <option value="6">6</option>
                                             <option value="21">21</option>
                                             <option value="24">24</option>
                                         </select>
-                                        word mnemonic, or enter your own below.
+                                        <span data-translate>words</span>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="entropy-container hidden">
-                            <div class="form-group">
-                                <label for="entropy" class="col-sm-2 control-label">Entropy</label>
-                                <div class="col-sm-6">
-                                    <input id="entropy" class="entropy form-control" placeholder="Accepts binary, base 6, 6-sided dice, base 10, hexadecimal, cards">
-                                    <span class="help-block">
-                                        <div class="text-danger">
-                                        This is an advanced feature.
-                                        Your mnemonic may be insecure if this feature is used incorrectly.
-                                        <a href="#entropy-notes">Read more</a>
-                                        </div>
-                                   </span>
-                                </div>
-                                <div class="col-sm-4">
-                                    <p>Valid entropy values include:</p>
-                                    <ul>
-                                        <li>Binary: [0-1] eg 101010011</li>
-                                        <li>Base 6: [0-5] eg 123434014</li>
-                                        <li>Dice: [1-6] eg 62535634</li>
-                                        <li>Base 10: [0-9] eg 90834528</li>
-                                        <li>Hex: [0-9A-F] eg 4187a8bfd9</li>
-                                        <li>Card: [A2-9TJQK][CDHS] eg AHQS9DTC</li>
-                                    </ul>
+                            <div class="form-group text-danger">
+                                <label class="col-sm-2 control-label" data-translate>Warning</label>
+                                <div class="col-sm-10 form-control-static">
+                                    <span data-translate>Entropy is an advanced feature. Your mnemonic may be insecure if this feature is used incorrectly.</span>
+                                    <a href="#entropy-notes" data-translate>Read more</a>
                                 </div>
                             </div>
-                            <div class="entropy-feedback">
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Filtered</label>
-                                    <div class="filtered col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Type</label>
-                                    <div class="type col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Strength</label>
-                                    <div class="strength col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Event Count</label>
-                                    <div class="event-count col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Bits Per Event</label>
-                                    <div class="bits-per-event col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Bits</label>
-                                    <div class="bits col-sm-10 form-control-static"></div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Mnemonic Length</label>
-                                    <div class="col-sm-10">
+                            <div class="form-group">
+                                <label for="entropy" class="col-sm-2 control-label" data-translate>Entropy</label>
+                                <div class="col-sm-7">
+                                    <textarea id="entropy" rows="2" class="entropy form-control" placeholder="Accepts binary, base 6, 6-sided dice, base 10, hexadecimal, cards" data-translate-placeholder></textarea>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label" data-translate>Strength</label>
+                                        <div class="strength col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label" data-translate>Event Count</label>
+                                        <div class="event-count col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label" data-translate>Entropy Type</label>
+                                        <div class="type col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label" data-translate>Bits Per Event</label>
+                                        <div class="bits-per-event col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label" data-translate>Word Count</label>
+                                        <div class="word-count col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label" data-translate>Total Bits</label>
+                                        <div class="bits col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <label class="col-sm-3 control-label" data-translate>Filtered Entropy</label>
+                                    <div class="filtered col-sm-9 form-control-static"></div>
+                                    <label class="col-sm-3 control-label" data-translate>Raw Binary</label>
+                                    <div class="binary col-sm-9 form-control-static"></div>
+                                    <label class="col-sm-3 control-label" data-translate>Mnemonic Length</label>
+                                    <div class="col-sm-9">
                                         <select class="mnemonic-length form-control">
-                                            <option value="raw">From entropy length (3 words per 32 bits)</option>
-                                            <option value="12">12 Words</option>
-                                            <option value="15">15 Words</option>
-                                            <option value="18">18 Words</option>
-                                            <option value="21">21 Words</option>
-                                            <option value="24">24 Words</option>
+                                            <option value="raw" data-translate>From entropy length (3 words per 32 bits)</option>
+                                            <option value="12">12 <span data-translate>Words</span></option>
+                                            <option value="15" selected>15 <span data-translate>Words</option>
+                                            <option value="18">18 <span data-translate>Words</span></option>
+                                            <option value="21">21 <span data-translate>Words</span></option>
+                                            <option value="24">24 <span data-translate>Words</span></option>
                                         </select>
                                     </div>
                                 </div>
+                                <div class="col-sm-3">
+                                    <p data-translate>Valid entropy values include:</p>
+                                    <ul>
+                                        <li><strong data-translate>Binary</strong> [0-1]<br>101010011</li>
+                                        <li><strong data-translate>Base 6</strong> [0-5]<br>123434014</li>
+                                        <li><strong data-translate>Dice</strong> [1-6]<br>62535634</li>
+                                        <li><strong data-translate>Base 10</strong> [0-9]<br>90834528</li>
+                                        <li><strong data-translate>Hex</strong> [0-9A-F]<br>4187a8bfd9</li>
+                                        <li><strong data-translate>Card</strong> [A2-9TJQK][CDHS]<br>ahqs9dtc</li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                         <div class="form-group">
                             <div class="col-sm-10 checkbox">
                                 <label>
                                     <input type="checkbox" class="use-entropy">
-                                    Supply my own source of entropy
+                                    <span data-translate>Supply my own source of entropy</span>
                                 </label>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="col-sm-2 control-label"></label>
+                            <label class="col-sm-2 control-label" data-translate>Mnemonic Language</label>
                             <div class="col-sm-10 languages">
-                                <a href="#english">English</a>
-                                <a href="#japanese" title="Japanese">日本語</a>
-                                <a href="#spanish"  title="Spanish">Español</a>
-                                <a href="#chinese_simplified"  title="Chinese (Simplified)">中文(简体)</a>
-                                <a href="#chinese_traditional"  title="Chinese (Traditional)">中文(繁體)</a>
-                                <a href="#french"  title="French">Français</a>
-                                <a href="#italian"  title="Italian">Italiano</a>
+                                <div class="form-control no-border">
+                                    <a href="#english">English</a>
+                                    <a href="#japanese" title="Japanese">日本語</a>
+                                    <a href="#spanish"  title="Spanish">Español</a>
+                                    <a href="#chinese_simplified"  title="Chinese (Simplified)">中文(简体)</a>
+                                    <a href="#chinese_traditional"  title="Chinese (Traditional)">中文(繁體)</a>
+                                    <a href="#french"  title="French">Français</a>
+                                    <a href="#italian"  title="Italian">Italiano</a>
+                                </div>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="phrase" class="col-sm-2 control-label">BIP39 Mnemonic</label>
+                            <label for="phrase" class="col-sm-2 control-label" data-translate>BIP39 Mnemonic</label>
                             <div class="col-sm-10">
-                                <textarea id="phrase" class="phrase form-control"></textarea>
+                                <textarea id="phrase" class="phrase form-control" data-show-qr></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="passphrase" class="col-sm-2 control-label">BIP39 Passphrase (optional)</label>
+                            <label for="passphrase" class="col-sm-2 control-label" data-translate>BIP39 Passphrase (optional)</label>
                             <div class="col-sm-10">
                                 <textarea id="passphrase" class="passphrase form-control"></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="seed" class="col-sm-2 control-label">BIP39 Seed</label>
+                            <label for="seed" class="col-sm-2 control-label" data-translate>BIP39 Seed</label>
                             <div class="col-sm-10">
-                                <textarea id="seed" class="seed form-control" readonly="readonly"></textarea>
+                                <textarea id="seed" class="seed form-control" readonly="readonly" data-show-qr></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="network-phrase" class="col-sm-2 control-label">Coin</label>
+                            <label for="network-phrase" class="col-sm-2 control-label" data-translate>Coin</label>
                             <div class="col-sm-10">
                                 <select id="network-phrase" class="network form-control">
                                     <!-- populated by javascript -->
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="root-key" class="col-sm-2 control-label">BIP32 Root Key</label>
+                            <label for="root-key" class="col-sm-2 control-label" data-translate>BIP32 Root Key</label>
                             <div class="col-sm-10">
-                                <textarea id="root-key" class="root-key form-control"></textarea>
+                                <textarea id="root-key" class="root-key form-control" data-show-qr></textarea>
                             </div>
                         </div>
                     </form>
                                 <br>
                                 <div class="col-sm-2"></div>
                                 <div class="col-sm-10">
-                                    <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">BIP44 spec</a></p>
+                                    <p data-translate-html>
+                                        For more info see the
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">BIP44 spec</a>.
+                                    </p>
                                 </div>
                                 <div class="form-group">
                                     <label for="purpose" class="col-sm-2 control-label">
-                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#purpose" target="_blank">Purpose</a>
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#purpose" target="_blank" data-translate>Purpose</a>
                                     </label>
                                     <div class="col-sm-10">
                                         <input id="purpose" type="text" class="purpose form-control" value="44">
                                 </div>
                                 <div class="form-group">
                                     <label for="coin" class="col-sm-2 control-label">
-                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#registered-coin-types" target="_blank">Coin</a>
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#registered-coin-types" target="_blank" data-translate>Coin</a>
                                     </label>
                                     <div class="col-sm-10">
                                         <input id="coin" type="text" class="coin form-control" value="0">
                                 </div>
                                 <div class="form-group">
                                     <label for="account" class="col-sm-2 control-label">
-                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account" target="_blank">Account</a>
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account" target="_blank" data-translate>Account</a>
                                     </label>
                                     <div class="col-sm-10">
                                         <input id="account" type="text" class="account form-control" value="0">
                                 </div>
                                 <div class="form-group">
                                     <label for="change" class="col-sm-2 control-label">
-                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#change" target="_blank">External / Internal</a>
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#change" target="_blank" data-translate>External / Internal</a>
                                     </label>
                                     <div class="col-sm-10">
                                         <input id="change" type="text" class="change form-control" value="0">
                                     </div>
                                 </div>
                                 <div class="form-group">
-                                    <label for="bip44-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
+                                    <label class="col-sm-2 control-label">
+                                    </label>
+                                    <div class="col-sm-10">
+                                        <p data-translate>The account extendend keys can be used for importing to most BIP44 compatible wallets, such as mycelium or electrum.</p>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="account-xprv" class="col-sm-2 control-label">
+                                        <span data-translate>Account Extended Private Key</span>
+                                    </label>
+                                    <div class="col-sm-10">
+                                        <textarea id="account-xprv" type="text" class="account-xprv form-control" readonly data-show-qr></textarea>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="account-xpub" class="col-sm-2 control-label">
+                                        <span data-translate>Account Extended Public Key</span>
+                                    </label>
+                                    <div class="col-sm-10">
+                                        <textarea id="account-xpub" type="text" class="account-xpub form-control" readonly data-show-qr></textarea>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="col-sm-2 control-label">
+                                    </label>
+                                    <div class="col-sm-10">
+                                        <p data-translate>The BIP32 derivation path and extended keys are the basis for the derived addresses.</p>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="bip44-path" class="col-sm-2 control-label" data-translate>BIP32 Derivation Path</label>
                                     <div class="col-sm-10">
                                         <input id="bip44-path" type="text" class="path form-control" value="m/44'/0'/0'/0" readonly="readonly">
                                     </div>
                                 <br>
                                 <div class="col-sm-2"></div>
                                 <div class="col-sm-10">
-                                    <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">BIP32 spec</a></p>
+                                    <p data-translate>
+                                        For more info see the
+                                        <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">BIP32 spec</a>
+                                    </p>
                                 </div>
                                 <div class="form-group">
-                                    <label for="bip32-path" class="col-sm-2 control-label">BIP32 Derivation Path</label>
+                                    <label for="bip32-path" class="col-sm-2 control-label" data-translate>BIP32 Derivation Path</label>
                                     <div class="col-sm-10">
                                         <input id="bip32-path" type="text" class="path form-control" value="m/0">
                                     </div>
                                     <div class="col-sm-2"></div>
                                     <label class="col-sm-10">
                                         <input class="hardened-addresses" type="checkbox">
-                                        Use hardened addresses
+                                        <span data-translate>Use hardened addresses</span>
                                     </label>
                                 </div>
                                 <div class="form-group">
-                                    <label class="col-sm-2 control-label">Hive Wallet</label>
+                                    <label for="core-path" class="col-sm-2 control-label" data-translate>Bitcoin Core</label>
                                     <div class="col-sm-10">
-                                        <p class="form-control no-border">
-                                        Use path <code>m/0'/0</code>.
-                                        For more info see the <a href="https://www.hivewallet.com/" target="_blank">Hive Wallet homepage</a>
+                                        <p class="form-control no-border" data-translate-html>
+                                        Use path <code>m/0'/0'</code> with hardened addresses.
                                         </p>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label for="mycelium-path" class="col-sm-2 control-label">Mycelium Wallet</label>
-                                    <div class="col-sm-10">
-                                        <p class="form-control no-border">
-                                        Use path <code>m/44'/0'/0'/0</code>.
-                                        For more info see the <a href="http://www.mycelium.com/" target="_blank">Mycelium Wallet homepage</a>
+                                        <p class="form-control no-border" data-translate-html>
+                                            For more info see the
+                                            <a href="https://github.com/bitcoin/bitcoin/pull/8035" target="_blank">Bitcoin Core BIP32 implementation</a>
                                         </p>
                                     </div>
                                 </div>
                                 <div class="form-group">
-                                    <label for="core-path" class="col-sm-2 control-label">Bitcoin Core</label>
+                                    <label class="col-sm-2 control-label" data-translate>Block Explorers</label>
                                     <div class="col-sm-10">
                                         <p class="form-control no-border">
-                                        Use path <code>m/0'/0'</code> with hardened addresses.
-                                        For more info see the <a href="https://github.com/bitcoin/bitcoin/pull/8035" target="_blank">Bitcoin Core BIP32 implementation</a>
+                                            <span data-translate-html>Use path <code>m/44'/0'/0'</code>.</span>
+                                            <span data-translate-html>Only enter the <code>xpub</code> extended key into block explorer search fields, never the <code>xprv</code> key.</span>
                                         </p>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="col-sm-2 control-label">Block Explorers</label>
-                                    <div class="col-sm-10">
                                         <p class="form-control no-border">
-                                        Use path <code>m/44'/0'/0'</code>.
-                                        Only enter the <code>xpub</code> extended key into block explorer search fields, never the <code>xpriv</code> key.
+                                            <span data-translate>Can be used with</span>:
+                                            <a href="https://blockchain.info/" target="_blank">blockchain.info</a>
                                         </p>
                                     </div>
                                 </div>
                     </div>
                     <form class="form-horizontal" role="form">
                         <div class="form-group">
-                            <label for="extended-priv-key" class="col-sm-2 control-label">BIP32 Extended Key</label>
+                            <label for="extended-priv-key" class="col-sm-2 control-label" data-translate>BIP32 Extended Private Key</label>
                             <div class="col-sm-10">
-                                <textarea id="extended-priv-key" class="extended-priv-key form-control" readonly="readonly"></textarea>
+                                <textarea id="extended-priv-key" class="extended-priv-key form-control" readonly="readonly" data-show-qr></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="extended-pub-key" class="col-sm-2 control-label">BIP32 Extended Key (addresses only)</label>
+                            <label for="extended-pub-key" class="col-sm-2 control-label" data-translate>BIP32 Extended Public Key</label>
                             <div class="col-sm-10">
-                                <textarea id="extended-pub-key" class="extended-pub-key form-control" readonly="readonly"></textarea>
+                                <textarea id="extended-pub-key" class="extended-pub-key form-control" readonly="readonly" data-show-qr></textarea>
                             </div>
                         </div>
                     </form>
             <div class="row">
                 <div class="col-md-12">
                     <h2>Derived Addresses</h2>
-                    <p>Note these addreses are derived from the <strong>BIP32 Extended Key</strong></p>
+                    <p data-translate>Note these addreses are derived from the BIP32 Extended Key</p>
                     <table class="table table-striped">
                         <thead>
                             <th>
                                 <div class="input-group">
-                                    Path&nbsp;&nbsp;
-                                    <button class="index-toggle">Toggle</button>
+                                    <span data-translate>Path</span>&nbsp;&nbsp;
+                                    <button class="index-toggle" data-translate>Toggle</button>
                                 </div>
                             </th>
                             <th>
                                 <div class="input-group">
-                                    Address&nbsp;&nbsp;
-                                    <button class="address-toggle">Toggle</button>
+                                    <span data-translate>Address</span>&nbsp;&nbsp;
+                                    <button class="address-toggle" data-translate>Toggle</button>
                                 </div>
                             </th>
                             <th>
                                 <div class="input-group">
-                                    Public Key&nbsp;&nbsp;
-                                    <button class="public-key-toggle">Toggle</button>
+                                    <span data-translate>Public Key</span>&nbsp;&nbsp;
+                                    <button class="public-key-toggle" data-translate>Toggle</button>
                                 </div>
                             </th>
                             <th>
                                 <div class="input-group">
-                                    Private Key&nbsp;&nbsp;
-                                    <button class="private-key-toggle">Toggle</button>
+                                    <span data-translate>Private Key</span>&nbsp;&nbsp;
+                                    <button class="private-key-toggle" data-translate>Toggle</button>
                                 </div>
                             </th>
                         </thead>
                         <tbody class="addresses monospace">
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
                         </tbody>
                     </table>
                 </div>
             </div>
-            <span>Show next </button>
+            <span data-translate>Show more rows</span>:
             <input type="number" class="rows-to-add" value="20">
-            <button class="more">Show</button>
+            <button class="more" data-translate>Show</button>
 
             <hr>
 
             <div class="row">
                 <div class="col-md-12">
-                    <h2>More info</h2>
-                    <h3>BIP39 <span class="small">Mnemonic code for generating deterministic keys</span></h3>
-                    <p>
+                    <h2 data-translate>More info</h2>
+                    <h3>BIP39 <span class="small" data-translate>Mnemonic code for generating deterministic keys</span></h3>
+                    <p data-translate-html>
                         Read more at the
                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">official BIP39 spec</a>
                     </p>
-                    <h3>BIP32 <span class="small">Hierarchical Deterministic Wallets</span></h3>
-                    <p>
+                    <h3>BIP32 <span class="small" data-translate>Hierarchical Deterministic Wallets</span></h3>
+                    <p data-translate-html>
                         Read more at the
                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki" target="_blank">official BIP32 spec</a>
-                        and see the demo at
+                    </p>
+                    <p data-translate-html>
+                        See the demo at
                         <a href="http://bip32.org/" target="_blank">bip32.org</a>
                     </p>
-                    <h3>BIP44 <span class="small">Multi-Account Hierarchy for Deterministic Wallets</span></h3>
-                    <p>
+                    <h3>BIP44 <span class="small" data-translate>Multi-Account Hierarchy for Deterministic Wallets</span></h3>
+                    <p data-translate-html>
                         Read more at the
                         <a href="https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki" target="_blank">official BIP44 spec</a>
                     </p>
-                    <h3>Private Keys</h3>
+                    <h3 data-translate>Private Keys</h3>
                     <p>
-                        Use private keys at
-                        <a href="https://web.archive.org/web/20150707020924/https://brainwallet.org/" target="_blank">brainwallet.org</a>,
-                        but be careful - it can be easy to make mistakes if you
-                        don't know what you're doing
+                        <span data-translate-html>
+                            Use private keys at
+                            <a href="https://web.archive.org/web/20150707020924/https://brainwallet.org/" target="_blank">brainwallet.org</a>.
+                        </span>
+                        <span data-translate>Be careful - it can be easy to make mistakes if you don't know what you're doing.</span>
                     </p>
-                    <h3 id="entropy-notes">Entropy</h3>
+                    <h3 id="entropy-notes" data-translate>Entropy</h3>
                     <p>
-                    Entropy values must be sourced from a
-                    <a href="https://en.wikipedia.org/wiki/Random_number_generation" target="_blank">strong source of randomness</a>.
-                    This means flipping a fair coin, rolling a fair dice, noise measurements etc. Do <strong>NOT</strong> use
-                    phrases from books, lyrics from songs, your birthday or steet address, keyboard mashing, or anything you <i>think</i>
-                    is random, because chances are <em>overwhelming</em> that it isn't random enough for the needs of this tool.
+                        <span data-translate-html>
+                            Entropy values must be sourced from a
+                            <a href="https://en.wikipedia.org/wiki/Random_number_generation" target="_blank">strong source of randomness</a>.
+                        </span>
+                        <span data-translate>This means flipping a fair coin, rolling a fair dice, noise measurements etc.</span>
+                        <span data-translate-html>
+                            Do <strong>NOT</strong> use phrases from books, lyrics from songs, your birthday or steet address,
+                            keyboard mashing, or anything you <i>think</i> is random, because chances are overwhelming it isn't
+                            random enough for the needs of this tool.
+                        </span>
                     </p>
                     <p>
-                    The random mnemonic generator on this page uses a
-                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/RandomSource/getRandomValues" target="_blank">cryptographically secure random number generator</a>,
-                    and can generally be trusted more than your own intuition about randomness.
-                    If cryptographic randomness isn't available in your browser, this page will show a warning and <i>will not generate
-                    random mnemonics</i>.
+                        <span data-translate-html>
+                            The random mnemonic generator on this page uses a
+                            <a href="https://developer.mozilla.org/en-US/docs/Web/API/RandomSource/getRandomValues" target="_blank">cryptographically secure random number generator</a>.
+                        </span>
+                        <span data-translate>The built in random generator can generally be trusted more than your own intuition about randomness.</span>
+                        <span data-translate>If cryptographic randomness isn't available in your browser, this page will show a warning and the generate button will not work.</span>
+                        <span data-translate>In that case you might choose to use your own source of entropy.</span>
                     </p>
                     <p>
-                    <a href="https://bitcointalk.org/index.php?topic=311000.msg3345309#msg3345309" target="_blank">You are not a good source of entropy.</a>
+                        <a href="https://bitcointalk.org/index.php?topic=311000.msg3345309#msg3345309" target="_blank" data-translate>You are not a good source of entropy.</a>
                     </p>
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-12">
 
-                    <h2>Offline Usage</h2>
+                    <h2 data-translate>Offline Usage</h2>
 
-                    <p>
+                    <p data-translate>
                     You can use this tool without having to be online.
                     </p>
-                    <p>
+                    <p data-translate>
                     In your browser, select file save-as, and save this page
                     as a file.
                     </p>
-                    <p>
+                    <p data-translate>
                     Double-click that file to open it in a browser
                     on any offline computer.
                     </p>
                     <p>
-                    Alternatively, download it from
-                    <a href="https://github.com/iancoleman/bip39">
-                        https://github.com/iancoleman/bip39
-                    </a>
+                    <span data-translate>Alternatively, download the file from the repository</span>
+                    -
+                    <a href="https://github.com/iancoleman/bip39">https://github.com/iancoleman/bip39</a>
+                    </p>
 
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-12">
 
-                    <h2>This project is 100% open-source code</h2>
+                    <h2 data-translate>This project is 100% open-source code</h2>
 
                     <p>
-                        <span>Get the source code at - </span>
+                        <span data-translate>Get the source code from the repository</span>
+                        -
                         <a href="https://github.com/iancoleman/bip39" target="_blank">
                             https://github.com/iancoleman/bip39
                         </a>
                     </p>
 
-                    <h3>Libraries</h3>
+                    <h3 data-translate>Libraries</h3>
 
                     <p>
                         <span>BitcoinJS - </span>
 
         </div>
 
+        <div class="qr-container hidden">
+            <div class="qr-hint bg-primary" data-translate>Click field to hide QR</div>
+            <div class="qr-hint bg-primary hidden" data-translate>Click field to show QR</div>
+            <div class="qr-image"></div>
+        </div>
+
         <div class="feedback-container">
             <div class="feedback">Loading...</div>
         </div>
         <script type="text/template" id="address-row-template">
             <tr>
                 <td class="index"><span></span></td>
-                <td class="address"><span></span></td>
-                <td class="pubkey"><span></span></td>
-                <td class="privkey"><span></span></td>
+                <td class="address"><span data-show-qr></span></td>
+                <td class="pubkey"><span data-show-qr></span></td>
+                <td class="privkey"><span data-show-qr></span></td>
             </tr>
         </script>
         <script src="js/jquery.min.js"></script>
         <script src="js/bootstrap.min.js"></script>
         <script src="js/levenshtein.js"></script>
+        <script src="js/jquery.qrcode.min.js"></script>
         <script src="js/bitcoinjs-1-5-7.js"></script>
         <script src="js/bitcoinjs-extensions.js"></script>
         <script src="js/sjcl-bip39.js"></script>
+        <script src="js/translate.js"></script>
+        <script src="js/phrases_en.js"></script>
         <script src="js/wordlist_english.js"></script>
         <script src="js/wordlist_japanese.js"></script>
         <script src="js/wordlist_spanish.js"></script>
         <script src="js/wordlist_french.js"></script>
         <script src="js/wordlist_italian.js"></script>
         <script src="js/jsbip39.js"></script>
+        <script src="js/biginteger.js"></script>
         <script src="js/zxcvbn.js"></script>
         <script src="js/entropy.js"></script>
         <script src="js/index.js"></script>