QR code shown on hover for certain bits of data

[perso/Immae/Projets/Cryptomonnaies/BIP39.git] / src / index.html
diff --git a/src/index.html b/src/index.html

index 860e9d044bb6a39a9c0642322c076c981aae7437..aab473c55ae46adf21610bb653cad29a3003715b 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -81,6 +81,20 @@
              .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>
@@ -209,7 +223,7 @@
                          <div class="form-group">
                              <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">
@@ -221,7 +235,7 @@
                          <div class="form-group">
                              <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">
@@ -235,7 +249,7 @@
                          <div class="form-group">
                              <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>
@@ -382,13 +396,13 @@
                          <div class="form-group">
                              <label for="extended-priv-key" class="col-sm-2 control-label" data-translate>BIP32 Extended 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" data-translate>BIP32 Extended Key (addresses only)</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>
@@ -586,6 +600,12 @@
  
          </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>
@@ -593,14 +613,15 @@
          <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>