Improve user experience

README.md

@@ -20,8 +20,8 @@ Examples: `0xc0ffee254729296a45a3885639AC7E10F9d54979`, or `0x999999cf1046e68e36
 
 First of all, visit [`vanity-eth.tk`](https://vanity-eth.tk)
 
-Enter the prefix of your choice below, and click ‘generate’ to start. Your browser will generate lots of random
+Enter as short prefix/suffix of your choice at the bottom of the page, and click ‘generate’ to start. Your browser will
-addresses until one begins with your prefix.
+generate lots of random addresses until one matches your input.
 
 Once an address is found, you can reveal the private key, or click the 'save' button to download a password-encrypted keystore file.
 

src/main.js

@@ -3,8 +3,6 @@
 import Vue from 'vue';
 import App from './App.vue';
 
-// eslint-disable-next-line no-new
-
 new Vue({
     el: '#app',
     render: (h) => h(App)

src/vue/Description.vue

@@ -2,8 +2,11 @@
     <div class="panel">
         <p>
             Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.<br>
-            Enter a short prefix of your choice below, and click ‘generate’ to start.
+            Enter a short prefix/suffix of your choice, and click ‘generate’ to start.
         </p>
+        <div class="shortcut">
+            <button type="button" class="button-large" @click="scrollDown">Start now</button>
+        </div>
 
         <h2>What's a vanity address?</h2>
         <p>
@@ -14,8 +17,8 @@
 
         <h2>How it works</h2>
         <p>
-            Enter the prefix of your choice below, and click ‘generate’ to start. Your browser will generate lots of random
+            Enter the prefix/suffix of your choice, and click ‘generate’ to start. Your browser will generate lots of random
-            addresses until one begins with your prefix.<br>
+            addresses until one matches your input.<br>
             Once an address is found, you can reveal the private key, or click the 'save' button to download
             a password-encrypted keystore file.<br>
             You can increase the number of working threads to reach higher speeds, or decrease it if you computer
@@ -54,7 +57,28 @@
 </template>
 
 <script>
-    export default {};
+    export default {
+        data: function () {
+            return {
+                scrollTimeOut: null
+            }
+        },
+        methods: {
+            scrollDown() {
+                this.scrollTo(document.getElementById('input-panel'), -1);
+            },
+            scrollTo(element, lastValue) {
+                let currentValue = window.scrollY;
+                let diff = element.getBoundingClientRect().top / 6;
+                if (Math.abs(diff) > 1 && currentValue > lastValue) {
+                    window.scrollTo(0, (window.scrollY + diff));
+                    this.scrollTimeOut = setTimeout(this.scrollTo, 30, element, currentValue)
+                } else if (currentValue >= lastValue) {
+                    document.getElementById('input').focus();
+                }
+            }
+        }
+    };
 </script>
 
 <style lang="sass" scoped>
@@ -67,4 +91,9 @@
         .monospace
             font-family: $monospace-font
             font-size: 0.85em
+    .shortcut
+        text-align: center
+        .button-large
+            width: 150px
+            margin: 15px 0 35px
 </style>

src/vue/Input.vue

@@ -1,15 +1,22 @@
 <template>
-    <div class="panel">
+    <div class="panel" id="input-panel">
         <form :class="{error: inputError}" @submit.prevent="startGen">
             <div class="error-text">Numbers and letters from A to F only</div>
-            <input type="text" class="text-input-large" :placeholder="suffix ? 'Suffix' : 'Prefix'" v-model="hex" :disabled="running">
+            <input type="text" class="text-input-large" id="input"
+                   :placeholder="suffix ? 'Suffix' : 'Prefix'" v-model="hex" :disabled="running">
             <div class="row justify-content-center hide-render">
                 <div class="spinner">
                     <div></div><div></div><div></div><div></div>
                 </div>
             </div>
             <div class="example hide-prerender">
-                E.g.&nbsp;<span v-text="example" class="monospace"></span>
+                E.g.&nbsp;
+                <span class="monospace">
+                    0x<!--
+                    --><b v-if="!suffix" v-text="example.chosen"></b><!--
+                    --><span v-text="example.random"></span><!--
+                    --><b v-if="suffix" v-text="example.chosen"></b>
+                </span>
             </div>
             <div class="row controls hide-prerender">
                 <div class="col-12 col-sm-6 col-md-12 col-lg-6">
@@ -23,7 +30,7 @@
                 <div class="col-12 col-sm-6 col-md-12 col-lg-6">
                     <span>Prefix</span>
                     <label class="switch">
-                        <input type="checkbox" v-model="suffix">
+                        <input type="checkbox" v-model="suffix" :disabled="running">
                         <span class="slider"></span>
                     </label>
                     <span>Suffix</span>
@@ -91,7 +98,7 @@
                 for (let i = 0; i < 40 - this.hex.length; i++) {
                     random += mixCase(Math.floor((Math.random() * 16)).toString(16));
                 }
-                return this.suffix ? `0x${random}${chosen}` :`0x${chosen}${random}`
+                return {random, chosen};
             }
         },
         methods: {
@@ -139,8 +146,10 @@
 
     .example
         font-size: 14px
-        text-overflow: ellipsis
+        word-break: break-all
-        overflow-x: hidden
+        color: $text-alt
+        b
+            color: $text
         .monospace
             font-family: $monospace-font
     .controls