Huge graphic redesign
This commit is contained in:
Boris Kubiak
parent
fec3e1e5e6
commit
81acdf3d41
13 changed files with 66 additions and 47 deletions
|
|
@ -1,14 +1,14 @@
|
|||
# Vanity-ETH
|
||||
|
||||
[](https://travis-ci.org/bokub/vanity-eth)
|
||||
[](https://raw.githubusercontent.com/bokub/vanity-eth/master/LICENSE)
|
||||
[](https://raw.githubusercontent.com/bokub/vanity-eth/master/LICENSE)
|
||||
[](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 ⚡️
|
||||
|
||||
[](https://git.io/veth)
|
||||
[](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.
|
||||
|
|
|
|||
26
src/App.vue
26
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
|
||||
background: $panel-background-clear
|
||||
color: $text
|
||||
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 --*/
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,10 +1,22 @@
|
|||
$white-text: #fff
|
||||
$grey-text: #888
|
||||
$border-grey: #97A2A8
|
||||
$background: #000
|
||||
$panel-background: #191919
|
||||
$panel-background-clear: #2d2c2c
|
||||
$text: #353535
|
||||
$text-alt: #5d5d5d
|
||||
$text-opposite: #fff
|
||||
$logo: #fff
|
||||
$border-grey: #97a2a8
|
||||
|
||||
$teal: #198a88
|
||||
$yellow: #d78716
|
||||
$red: #ec4a41
|
||||
$panel-background: #fff
|
||||
$panel-background-alt: #e0e0e0
|
||||
$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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue