Add address example while typing prefix

README.md

@@ -32,10 +32,12 @@ You can increase the number of working threads to reach higher speeds, or decrea
 
 As explained above, everything is computed in your browser. Nothing ever leaves your machine, or even your browser tab.
 
-Once the web page is loaded, you can turn off the internet and continue playing.
+**Vanity-ETH cannot and will never store your private key**, and if you don't trust it, you have 3 ways to ensure your key remains private:
 
-You can also download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
+- Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly
-and use it completely offline.
+- You can also download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
+and use it on a completely offline computer
+- The code is 100% open source and available on Github. You can review it as much as you want
 
 Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum addresses.
 

src/vue/Description.vue

@@ -25,11 +25,14 @@
         <p>
             As explained above, everything is computed in your browser. Nothing ever leaves your machine, or
             even your browser tab.<br>
-            Once the web page is loaded, you can turn off the internet and continue
+            <b>Vanity-ETH cannot and will never store your private key</b>, and if you don't trust it, you have 3 ways to ensure
-            playing.<br>
+            your key remains private:<br>
-            You can also download the latest build of Vanity-ETH on
+            &nbsp;-&nbsp;Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly<br>
-            <a href="https://git.io/veth-dl" target="_blank">Github</a> and use it
+            &nbsp;-&nbsp;You can also download the latest build of Vanity-ETH
-            completely offline.<br>
+                <a href="https://git.io/veth-dl" target="_blank">here</a> and use it on a completely offline computer<br>
+            &nbsp;-&nbsp;The code is 100% open source and available on
+            <a href="https://github.com/bokub/vanity-eth" target="_blank">Github</a>. You can review it as much as you want<br>
+           <br>
             Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
             Ethereum addresses.<br>
             The keystore file is encrypted with a AES-128-CTR cipher using the BKDF2-SHA256 derivation function with 65536 hashing rounds.

src/vue/Input.vue

@@ -3,6 +3,9 @@
         <form :class="{error: inputError}" v-on:submit.prevent="startGen">
             <div class="error-text">Numbers and letters from A to F only</div>
             <input type="text" class="text-input-large" placeholder="Prefix" v-model="prefix" :disabled="running">
+            <div class="example">
+                E.g.&nbsp;<span v-text="example" class="monospace"></span>
+            </div>
             <div class="check">
                 <label class="checkbox">
                     <input type="checkbox" name="checkbox" checked="" v-model="checksum"
@@ -34,6 +37,13 @@
 </template>
 
 <script>
+    function mixCase(str) {
+        let ret = '';
+        for(let i of str) {
+            ret += Math.random() < 0.5 ? i.toUpperCase() : i.toLowerCase();
+        }
+        return ret;
+    }
     export default {
         props: {
             running: Boolean,
@@ -51,6 +61,16 @@
             inputError: function () {
                 return !isValidHex(this.prefix);
             },
+            example: function () {
+                if(this.inputError){
+                    return 'N/A';
+                }
+                let text = '0x' + (this.checksum ? this.prefix : mixCase(this.prefix));
+                for (let i = 0; i < 40 - this.prefix.length; i++){
+                    text += mixCase(Math.floor((Math.random() * 16)).toString(16));
+                }
+                return text.substr(0, 42);
+            }
         },
         methods: {
             startGen: function () {
@@ -93,6 +113,12 @@
         .error-text
             display: block
 
+    .example
+        font-size: 0.85em
+        text-overflow: ellipsis
+        overflow-x: hidden
+        .monospace
+            font-family: $monospace-font
     .check
         margin: .5em 0