Add footer

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="container">
+        <div class="container" id="content">
             <!--Headline-->
             <headline></headline>
 
@@ -40,6 +40,9 @@
             </div>
         </div>
 
+        <!--Footer-->
+        <foot></foot>
+
         <!--Github corner-->
         <corner></corner>
     </div>
@@ -51,21 +54,14 @@
     import Headline from './vue/Headline';
     import Description from './vue/Description';
     import Err from './vue/Error';
-    import Input from './vue/Input';
+    import UserInput from './vue/Input';
     import Statistics from './vue/Statistics';
     import Result from './vue/Result';
     import Corner from './vue/Corner';
+    import Foot from './vue/Footer';
 
     export default {
-        components: {
+        components: {Headline, Description, Err, UserInput, Statistics, Result, Corner, Foot},
-            headline: Headline,
-            description: Description,
-            error: Err,
-            userInput: Input,
-            statistics: Statistics,
-            result: Result,
-            corner: Corner,
-        },
         data: function () {
             return {
                 running: false,
@@ -234,7 +230,6 @@
         padding: 0
         font-family: 'Lato', sans-serif
         background: $background
-        margin: 8em 0
 
     h1, h2, h3, h4, h5, h6, p, label
         margin: 0
@@ -254,6 +249,10 @@
         color: $white-text
         font-weight: 400
 
+    #content
+        margin-top: 8em
+        margin-bottom: 6em
+
     /*-- Fonts --*/
 
     @font-face
@@ -277,14 +276,39 @@
         src: local('Montserrat Bold'), local('Montserrat-Bold'), url(./assets/fonts/montserrat-bold.woff2) format('woff2')
         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
 
+    @font-face
+        font-family: 'icomoon'
+        src: url(./assets/fonts/icomoon.woff) format('woff')
+        font-weight: normal
+        font-style: normal
+
+    [class^="icon-"], [class*=" icon-"]
+        font-family: 'icomoon' !important
+        speak: none
+        font-style: normal
+        font-weight: normal
+        font-variant: normal
+        text-transform: none
+        line-height: 1
+        -webkit-font-smoothing: antialiased
+        -moz-osx-font-smoothing: grayscale
+
+    .icon-star:before
+        content: "\e900"
+    .icon-download:before
+        content: "\e901"
+    .icon-ethereum:before
+        content: "\e902"
+
     /*-- Responsive design --
 
     @media screen and (max-width: 1024px)
-        body
+        #content
-            margin: 7em 0 5em 0
+            margin-top: 7em
+            margin-bottom: 5em
 
     @media screen and (max-width: 640px)
-        body
+        #content
-            margin: 5em 0 4em 0
+            margin-top: 5em
-
+            margin-bottom: 4em
 </style>

src/vue/Corner.vue

@@ -1,5 +1,5 @@
 <template>
-    <a href="https://github.com/bokub/vanity-eth" aria-label="View source on Github">
+    <a href="https://github.com/bokub/vanity-eth" target="_blank" aria-label="View source on Github">
         <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"

src/vue/Description.vue

@@ -26,7 +26,7 @@
             Vanity-ETH works perfectly offline! 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">Github</a> and use it
+            <a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">Github</a> and use it
             completely offline.<br>
             Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
             Ethereum addresses.

src/vue/Footer.vue

@@ -0,0 +1,86 @@
+<template>
+    <footer>
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-lg-6 addr">
+                    Tips:
+                    <span class="donation-address" v-text="tipsAddress"></span>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="row">
+                        <div class="col-6 col-sm-4 no-gutter">
+                            <a :href="'https://etherscan.io/address/' + tipsAddress" target="_blank">
+                                <button type="button">
+                                    <i class="icon-ethereum"></i>&nbsp;&nbsp;&nbsp;Donate
+                                </button>
+                            </a>
+                        </div>
+                        <div class="col-6 col-sm-4 no-gutter">
+                            <a href="https://github.com/bokub/vanity-eth/stargazers" target="_blank">
+                                <button type="button" id="btn-star">
+                                    <i class="icon-star"></i>&nbsp;&nbsp;&nbsp;Star&nbsp;me
+                                </button>
+                            </a>
+                        </div>
+                        <div class="col-4 no-mobile no-gutter">
+                            <a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">
+                                <button type="button" id="btn-download">
+                                    <i class="icon-download"></i>&nbsp;&nbsp;&nbsp;Download
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                tipsAddress: '0xAceBabe64807cb045505b268ef253D8fC2FeF5Bc'
+            }
+        }
+    }
+</script>
+
+<style lang="sass" scoped>
+    @import "../css/variables"
+    footer
+        padding: 1.5rem 0
+        background-color: $panel-background
+        color: $white-text
+        .addr
+            margin-bottom: 20px
+        .donation-address
+            font-family: monospace
+            font-size: 1.2em
+            color: $grey-text
+            margin-left: 15px
+            word-break: break-all
+        button
+            border: none
+            outline: none
+            color: $white-text
+            padding: 0 0.8em
+            line-height: 40px
+            font-weight: 500
+            cursor: pointer
+            -webkit-appearance: none
+            background-color: $teal
+            i
+                font-size: 1.3em
+                position: relative
+                top: 2px
+                color: lighten($teal, 40)
+            &:hover
+                background-color: $yellow
+                i
+                    color: lighten($yellow, 40)
+
+    @media screen and (max-width: 576px)
+        .no-mobile
+            display: none
+</style>

webpack.config.js

@@ -35,7 +35,7 @@ module.exports = {
 				exclude: /node_modules/
 			},
 			{
-				test: /\.(png|woff2|ico)/,
+				test: /\.(png|woff|woff2|ico)/,
 				exclude: /node_modules/,
 				loader: 'url-loader'
 			}