Huge graphic redesign

README.md

@@ -1,14 +1,14 @@
 # Vanity-ETH
 
 [![Build Status](https://img.shields.io/travis/bokub/vanity-eth/master.svg?style=flat-square)](https://travis-ci.org/bokub/vanity-eth)
-[![License](https://img.shields.io/badge/license-MIT-f49068.svg?style=flat-square)](https://raw.githubusercontent.com/bokub/vanity-eth/master/LICENSE)
+[![License](https://img.shields.io/badge/license-MIT-f68084.svg?style=flat-square)](https://raw.githubusercontent.com/bokub/vanity-eth/master/LICENSE)
 [![Maintainability](https://api.codeclimate.com/v1/badges/818874f09ea56c310072/maintainability)](https://codeclimate.com/github/bokub/vanity-eth/maintainability)
 
 Browser-based ETH vanity address generator
 
 Just type [`git.io/veth`](https://git.io/veth) to use it ⚡️
 
-[![Vanity-ETH](https://i.imgur.com/hxgxohl.png)](https://git.io/veth)
+[![Vanity-ETH](https://i.imgur.com/lv6Gej5.png)](https://git.io/veth)
 
 
 ## Usage
@@ -29,7 +29,7 @@ As explained above, everything is computed in your browser. Nothing ever leaves
 
 Once the web page is loaded, you can turn off the internet and continue playing.
 
-You can also download the latest build of Vanity-ETH [here](https://github.com/bokub/vanity-eth/wiki/Download-Vanity-ETH)
+You can also download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
 and use it completely offline.
 
 Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum addresses.

src/App.vue

@@ -236,6 +236,7 @@
     body
         padding: 0
         font-family: 'Lato', sans-serif
+        background: $bg-1
         background: $background
 
     h1, h2, h3, h4, h5, h6, p, label
@@ -243,50 +244,55 @@
         font-weight: normal
 
     a, a:visited, a:hover
-        color: $grey-text
+        color: $text-alt
         text-decoration: underline
 
     a:hover
-        color: $white-text
+        color: $text
 
     .panel
         padding: 1.5em 3em
         background-color: $panel-background
         margin-top: 2em
-        color: $white-text
+        color: $text
         font-weight: 400
-
+        box-shadow: $shadow
+        transition: box-shadow 0.2s ease-in-out
+        &:hover
+            box-shadow: $shadow-big
     #content
         margin-top: 8em
         margin-bottom: 6em
 
     .text-input-large
         width: 100%
-        color: $white-text
+        color: $text
-        background: $panel-background-clear
+        background: $panel-background-alt
         outline: none
         font-size: 1.3em
         padding: 0.5em
         border: none
         margin-bottom: 10px
         -webkit-appearance: none
+        &::placeholder
+            color: $placeholder
 
     .button-large
         border: none
         outline: none
-        color: $white-text
+        color: $text-opposite
         padding: 0.6em
         font-size: 1.3em
         font-weight: 500
         margin: 1.3em 0 0 0
         cursor: pointer
         -webkit-appearance: none
-        background: $teal
+        background: $primary
         width: 100%
         &:hover
-            background: $yellow
+            background: $secondary
         &:disabled
-            background: $panel-background-clear
+            background: $disabled
             cursor: auto
 
     /*-- Fonts --*/

src/css/variables.sass

@@ -1,10 +1,22 @@
-$white-text: #fff
+$text: #353535
-$grey-text: #888
+$text-alt: #5d5d5d
-$border-grey: #97A2A8
+$text-opposite: #fff
-$background: #000
+$logo: #fff
-$panel-background: #191919
+$border-grey: #97a2a8
-$panel-background-clear: #2d2c2c
 
-$teal: #198a88
+$panel-background: #fff
-$yellow: #d78716
+$panel-background-alt: #e0e0e0
-$red: #ec4a41
+$disabled: #c3c3c3
+$placeholder: #b2b2b2
+
+$bg-1: #b490ca
+$bg-2: #f68084
+
+$background: linear-gradient(to top, $bg-2 0%, $bg-1 100%)
+
+$primary: #ea969b
+$secondary: #ffa0a0
+$error: #ff4a40
+
+$shadow: 1px 5px 10px rgba(0, 0, 0, 0.15)
+$shadow-big: 2px 10px 15px rgba(0, 0, 0, 0.15)

src/vue/Corner.vue

@@ -4,9 +4,9 @@
         <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#fff"></path>
             <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-                  fill="#000" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+                  fill="#b490ca" style="transform-origin: 130px 106px;" class="octo-arm"></path>
             <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-                  fill="#000" class="octo-body"></path>
+                  fill="#b490ca" class="octo-body"></path>
         </svg>
     </a>
 </template>

src/vue/Description.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="panel">
         <p>
-            Vanity-ETH is a browser-based tool to generate Ethereum vanity addresses.
+            Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.
         </p>
         <h2>Usage</h2>
         <p>
@@ -20,7 +20,7 @@
             Once the web page is loaded, you can turn off the internet and continue
             playing.<br>
             You can also download the latest build of Vanity-ETH on
-            <a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">Github</a> and use it
+            <a href="https://git.io/veth-dl" target="_blank">Github</a> and use it
             completely offline.<br>
             Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
             Ethereum addresses.<br>
@@ -49,5 +49,5 @@
     @import "../css/variables"
     p
         margin: 15px 0 20px
-        color: $grey-text
+        color: $text-alt
 </style>

src/vue/Error.vue

@@ -23,8 +23,8 @@
 <style lang="sass" scoped>
     @import "../css/variables"
     .panel
-        background-color: $red
+        background-color: $error
+        color: $text-opposite
         a, a:visited, a:hover
-            color: $white-text
             text-decoration: underline
 </style>

src/vue/Footer.vue

@@ -37,16 +37,17 @@
     footer
         padding: 1rem 0 0.5rem
         background-color: $panel-background
-        color: $grey-text
+        color: $text-alt
         a
             text-decoration: none
         .address
             margin-bottom: 20px
-            color: $white-text
+            color: $text
             a
                 font-family: "Courier New", "Courier", monospace
                 margin-left: 15px
                 word-break: break-all
+                font-weight: bold
         .links
             text-align: right
             a

src/vue/Headline.vue

@@ -16,14 +16,14 @@
 
     div
         margin-bottom: 8em
-        color: $white-text
+        color: $logo
         font-family: 'Montserrat', sans-serif
         text-align: center
 
         h1
             font-size: 3em
             font-weight: 700
-            border: 4px solid $white-text
+            border: 4px solid $logo
             width: 7.8em
             margin: 0 auto
 
@@ -44,7 +44,7 @@
             margin-bottom: 4em
             h1
                 font-size: 2.5em
-                border: 3px solid $white-text
+                border-width: 3px
             p
                 font-size: 1.4em
                 margin-top: 0.8em
@@ -61,7 +61,7 @@
     @media screen and (max-width: 480px)
         h1
             font-size: 2em
-            border: 2px solid $white-text
+            border-width: 2px
         p
             font-size: 1.2em
 

src/vue/Input.vue

@@ -85,11 +85,11 @@
     .error-text
         display: none
         font-size: 0.85em
-        color: $red
+        color: $error
 
     .error
         input[type="text"]
-            border: 1px solid $red
+            border: 1px solid $error
         .error-text
             display: block
 
@@ -103,7 +103,7 @@
         cursor: pointer
         position: relative
         font-size: 1.2em
-        color: $white-text
+        color: $text
         font-weight: 400
         &:last-child
             margin-bottom: 0

src/vue/Result.vue

@@ -49,13 +49,14 @@
         width: 48px
         height: 48px
         margin: 0 15px
-        background-color: $panel-background-clear
+        background-color: $panel-background-alt
 
     .output
         font-family: "Courier New", "Courier", monospace
-        color: $grey-text
+        color: $text-alt
         margin-left: 15px
         word-break: break-all
+        font-weight: bold
 
     .panel > div:not(:last-child)
         margin-bottom: 15px

src/vue/Save.vue

@@ -60,7 +60,7 @@
 
     .remodal
         background-color: $panel-background
-        color: $white-text
+        color: $text
         .title
             margin-bottom: 45px
         .remodal-close
@@ -68,7 +68,7 @@
             &:before
                 font-size: 2em
             &:hover
-                color: $white-text
+                color: $text
         .hidden
             display: none
 

src/vue/Statistics.vue

@@ -89,14 +89,14 @@
         width: 85%
         margin: 5px 0
         height: 18px
-        background: $panel-background-clear
+        background: $panel-background-alt
         float: left
 
     .probability-bar
         height: 100%
         width: 0
         display: block
-        background-color: #d78716
+        background-color: $secondary
 
     .percentage
         float: right
@@ -108,17 +108,16 @@
         div
             font-size: 0.75em
         h5
-            color: $white-text
+            color: $text
             font-weight: 500
 
     .output
         font-family: "Courier New", "Courier", monospace
         font-size: 1.1em
-        color: $grey-text
+        color: $text-alt
         margin-left: 15px
         word-break: break-all
 
-
     @media screen and (max-width: 480px)
         .percentage
             left: -5px