Improve UX
This commit is contained in:
Boris
parent
6b13785d50
commit
f79b616044
6 changed files with 175 additions and 92 deletions
|
|
@ -1 +1 @@
|
|||
body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}body a{-webkit-transition:.5s all;transition:.5s all}input[type=button]{-webkit-transition:.5s all;transition:.5s all}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em}.header h1{color:#fff;font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px;font-family:Montserrat,sans-serif}.header h1 a{color:#fff;text-decoration:none;display:block}.header p{color:#fff;font-size:1.5em;letter-spacing:2px;font-weight:400;font-family:Montserrat,sans-serif;margin-top:1em}.panel{padding:1.5em 3em;background:#191919;margin-top:3em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#191919;outline:0;font-size:1.3em;padding:1em 0;border:none;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;-webkit-appearance:none;background:#198a88;width:100%;-webkit-transition:.5s all;transition:.5s all}.form input[type=button]:hover{background:#d78716}.check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0;-webkit-transition:opacity .1s;transition:opacity .1s}.checkbox input:checked+i:after{opacity:1}.statistics{padding-bottom:3.2em}.statistics>div{margin-bottom:15px}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#191919;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%}.percentage h5{color:#fff;margin:2px 0 0 14px;font-weight:500}#address,#private-key{font-family:monospace;font-size:1.2em;color:#969696;margin-left:15px}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:32%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:57%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}
|
||||
body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em;color:#fff;font-family:Montserrat,sans-serif}.header h1{font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px}.header p{font-size:1.5em;letter-spacing:2px;font-weight:400;margin-top:1em}.description{margin:15px 0 20px;color:#888}.panel{padding:1.5em 3em;background:#191919;margin-top:2em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#2d2c2c;outline:0;font-size:1.3em;padding:.5em;border:none;margin-bottom:10px;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;cursor:pointer;-webkit-appearance:none;background:#198a88;width:100%}.form input[type=button]:hover{background:#d78716}.form input[type=button]:disabled{background:#2d2c2c;cursor:auto}.form .error-text{display:none;font-size:.85em;color:#ec4a41}.form .error input[type=text]{border:1px solid #ec4a41}.form .error .error-text{display:block}.form .check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0}.checkbox input:checked+i:after{opacity:1}.result>div:not(:last-child),.statistics>div:not(:last-child){margin-bottom:15px}.statistics{padding-bottom:3.2em}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#2d2c2c;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%;text-align:center;position:relative;top:-10px;left:15px}.percentage div{font-size:.75em}.percentage h5{color:#fff;font-weight:500}.output{font-family:monospace;font-size:1.2em;color:#888;margin-left:15px;word-break:break-all}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:35%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:65%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}
|
||||
|
|
@ -1,73 +1,92 @@
|
|||
$white-text: #fff
|
||||
$grey-text: #888
|
||||
$border-grey: #97A2A8
|
||||
$background: #000
|
||||
$panel-background: #191919
|
||||
$panel-background-clear: #2d2c2c
|
||||
|
||||
$teal: #198a88
|
||||
$yellow: #d78716
|
||||
$red: #ec4a41
|
||||
|
||||
body
|
||||
padding: 0
|
||||
font-family: 'Lato', sans-serif
|
||||
background: #000
|
||||
background: $background
|
||||
margin: 8em 0
|
||||
a
|
||||
transition: 0.5s all
|
||||
|
||||
input[type="button"]
|
||||
transition: 0.5s all
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, label
|
||||
margin: 0
|
||||
|
||||
.header
|
||||
margin-bottom: 8em
|
||||
color: $white-text
|
||||
font-family: 'Montserrat', sans-serif
|
||||
|
||||
h1
|
||||
color: #fff
|
||||
font-size: 3em
|
||||
font-weight: 700
|
||||
border: 4px solid #fff
|
||||
border: 4px solid $white-text
|
||||
width: 33%
|
||||
margin: 0 auto
|
||||
padding: 10px
|
||||
font-family: 'Montserrat', sans-serif
|
||||
a
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
display: block
|
||||
|
||||
p
|
||||
color: #fff
|
||||
font-size: 1.5em
|
||||
letter-spacing: 2px
|
||||
font-weight: 400
|
||||
font-family: 'Montserrat', sans-serif
|
||||
margin-top: 1em
|
||||
margin-bottom: 8em
|
||||
|
||||
.description
|
||||
margin: 15px 0 20px
|
||||
color: $grey-text
|
||||
|
||||
.panel
|
||||
padding: 1.5em 3em
|
||||
background: #191919
|
||||
margin-top: 3em
|
||||
color: #fff
|
||||
background: $panel-background
|
||||
margin-top: 2em
|
||||
color: $white-text
|
||||
font-weight: 400
|
||||
|
||||
.form input
|
||||
.form
|
||||
input
|
||||
&[type="text"]
|
||||
width: 100%
|
||||
color: #fff
|
||||
background: #191919
|
||||
color: $white-text
|
||||
background: $panel-background-clear
|
||||
outline: none
|
||||
font-size: 1.3em
|
||||
padding: 1em 0
|
||||
padding: 0.5em
|
||||
border: none
|
||||
margin-bottom: 10px
|
||||
-webkit-appearance: none
|
||||
&[type="button"]
|
||||
border: none
|
||||
outline: none
|
||||
color: #FFF
|
||||
color: $white-text
|
||||
padding: 0.6em
|
||||
font-size: 1.3em
|
||||
font-weight: 500
|
||||
margin: 1.3em 0 0 0
|
||||
cursor: pointer
|
||||
-webkit-appearance: none
|
||||
background: #198a88
|
||||
background: $teal
|
||||
width: 100%
|
||||
transition: 0.5s all
|
||||
&:hover
|
||||
background: #d78716
|
||||
|
||||
.check
|
||||
background: $yellow
|
||||
&:disabled
|
||||
background: $panel-background-clear
|
||||
cursor: auto
|
||||
.error-text
|
||||
display: none
|
||||
font-size: 0.85em
|
||||
color: $red
|
||||
.error
|
||||
input[type="text"]
|
||||
border: 1px solid $red
|
||||
.error-text
|
||||
display: block
|
||||
.check
|
||||
margin: .5em 0
|
||||
|
||||
.checkbox
|
||||
|
|
@ -77,7 +96,7 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
cursor: pointer
|
||||
position: relative
|
||||
font-size: 1.2em
|
||||
color: #fff
|
||||
color: $white-text
|
||||
font-weight: 400
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
|
@ -89,7 +108,7 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
width: 19px
|
||||
height: 19px
|
||||
outline: none
|
||||
border: 1px solid #97A2A8
|
||||
border: 1px solid $border-grey
|
||||
&.left
|
||||
position: absolute
|
||||
bottom: 4px
|
||||
|
|
@ -98,7 +117,7 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
width: 19px
|
||||
height: 19px
|
||||
outline: none
|
||||
border: 1px solid #97A2A8
|
||||
border: 1px solid $border-grey
|
||||
input
|
||||
+ i:after
|
||||
content: ''
|
||||
|
|
@ -111,24 +130,24 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
text-align: center
|
||||
position: absolute
|
||||
opacity: 0
|
||||
transition: opacity 0.1s
|
||||
position: absolute
|
||||
left: -9999px
|
||||
&:checked + i:after
|
||||
opacity: 1
|
||||
|
||||
.statistics > div:not(:last-child), .result > div:not(:last-child)
|
||||
margin-bottom: 15px
|
||||
|
||||
.statistics
|
||||
padding-bottom: 3.2em
|
||||
> div
|
||||
margin-bottom: 15px
|
||||
&:not(.percentage)
|
||||
> div:not(.percentage)
|
||||
clear: both
|
||||
|
||||
.probability
|
||||
width: 85%
|
||||
margin: 5px 0
|
||||
height: 18px
|
||||
background: #191919
|
||||
background: $panel-background-clear
|
||||
float: left
|
||||
|
||||
.probability-bar
|
||||
|
|
@ -139,29 +158,35 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
.percentage
|
||||
float: right
|
||||
width: 15%
|
||||
text-align: center
|
||||
position: relative
|
||||
top: -10px
|
||||
left: 15px
|
||||
div
|
||||
font-size: 0.75em
|
||||
h5
|
||||
color: #fff
|
||||
margin: 2px 0 0 14px
|
||||
color: $white-text
|
||||
font-weight: 500
|
||||
|
||||
#address, #private-key
|
||||
.output
|
||||
font-family: monospace
|
||||
font-size: 1.2em
|
||||
color: #969696
|
||||
color: $grey-text
|
||||
margin-left: 15px
|
||||
word-break: break-all
|
||||
|
||||
/*-- Responsive design --
|
||||
|
||||
@media screen and (max-width: 1280px)
|
||||
.header h1
|
||||
font-size: 2.8em
|
||||
width: 32%
|
||||
width: 35%
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
.header
|
||||
h1
|
||||
font-size: 2.5em
|
||||
border: 3px solid #fff
|
||||
border: 3px solid $white-text
|
||||
width: 34%
|
||||
p
|
||||
font-size: 1.4em
|
||||
|
|
@ -192,10 +217,10 @@ h1, h2, h3, h4, h5, h6, p, label
|
|||
@media screen and (max-width: 480px)
|
||||
.header
|
||||
h1
|
||||
width: 57%
|
||||
width: 65%
|
||||
font-size: 2em
|
||||
padding: 7px
|
||||
border: 2px solid #fff
|
||||
border: 2px solid $white-text
|
||||
p
|
||||
font-size: 1.2em
|
||||
|
||||
|
|
|
|||
48
index.html
48
index.html
|
|
@ -20,14 +20,35 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div class="header text-center">
|
||||
<h1><a href="#">VANITY-ETH</a></h1>
|
||||
<h1>VANITY-ETH</h1>
|
||||
<p>Vanity ETH address generator</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel">
|
||||
<h4>Usage</h4>
|
||||
<p class="description">
|
||||
Vanity-ETH is a browser-based tool to generate an vanity Ethereum address.<br>
|
||||
Enter the prefix of your choice below, then click 'generate' to start.<br>
|
||||
Ethereum addresses are hexadecimal, which means your prefix can only contain numbers and letters
|
||||
from A to F.
|
||||
</p>
|
||||
<h4>How it works</h4>
|
||||
<p class="description">
|
||||
You browser will generate a ton of random addresses until one of them starts with your prefix.<br>
|
||||
Everything is computed by your browser, so you should notice a better speed on a powerful
|
||||
computer.<br>
|
||||
Nothing ever leaves your machine, or even your browser tab.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel form">
|
||||
<form>
|
||||
<input type="text" placeholder="Pattern" id="pattern">
|
||||
<form id="form">
|
||||
<div class="error-text">Numbers and letters from A to F only</div>
|
||||
<input type="text" placeholder="Prefix" id="prefix">
|
||||
<div class="check">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="checkbox" id="checksum" checked="">
|
||||
|
|
@ -40,7 +61,7 @@
|
|||
<input type="button" id="gen" value="Generate">
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<input type="button" id="stop" value="Stop">
|
||||
<input type="button" id="stop" value="Stop" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -48,26 +69,29 @@
|
|||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel statistics">
|
||||
<div>Difficulty: <span id="difficulty"></span></div>
|
||||
<div>Generated: <span id="counter"></span></div>
|
||||
<div>Speed: <span id="speed"></span></div>
|
||||
<div>Difficulty: <span id="difficulty" class="output">1</span></div>
|
||||
<div>Generated: <span id="counter" class="output">0 addresses</span></div>
|
||||
<div>Speed: <span id="speed" class="output">0 addr/s</span></div>
|
||||
<div>Status: <span id="status" class="output">Waiting</span></div>
|
||||
<!--Probability:-->
|
||||
<div class="probability">
|
||||
<div class="probability-bar" id="probability-bar" style="width:0"></div>
|
||||
</div>
|
||||
<div class="percentage"><h5 id="probability"></h5></div>
|
||||
<div class="percentage">
|
||||
<h5 id="probability">0%</h5>
|
||||
<div>Probability</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel">
|
||||
<div>Address: <span id="address"></span></div>
|
||||
<div>Private key: <span id="private-key"></span></div>
|
||||
<div class="panel result">
|
||||
<div>Address: <span id="address" class="output"></span></div>
|
||||
<div>Private key: <span id="private-key" class="output"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--JS-->
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
61
js/index.js
61
js/index.js
|
|
@ -7,18 +7,33 @@ let stop = false;
|
|||
let lastTick = null;
|
||||
let difficulty = 0;
|
||||
const step = 250;
|
||||
const elements = {
|
||||
counter: document.getElementById('counter'),
|
||||
speed: document.getElementById('speed'),
|
||||
probability: document.getElementById('probability'),
|
||||
probabilityBar: document.getElementById('probability-bar')
|
||||
const elements = {};
|
||||
const ids = {
|
||||
counter: 'counter',
|
||||
speed: 'speed',
|
||||
probability: 'probability',
|
||||
probabilityBar: 'probability-bar',
|
||||
status: 'status',
|
||||
genBtn: 'gen',
|
||||
stopBtn: 'stop',
|
||||
form: 'form'
|
||||
};
|
||||
|
||||
const parseInput = () => {
|
||||
return {
|
||||
pattern: document.getElementById('pattern').value,
|
||||
const input = {
|
||||
prefix: document.getElementById('prefix').value,
|
||||
checksum: document.getElementById('checksum').checked
|
||||
};
|
||||
|
||||
if (!vanity.isValidHex(input.prefix)) {
|
||||
elements.form.className = 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
elements.form.className = '';
|
||||
difficulty = vanity.computeDifficulty(input.prefix, input.checksum);
|
||||
document.getElementById('difficulty').innerText = difficulty.toString();
|
||||
return input;
|
||||
};
|
||||
|
||||
const incrementCounter = incr => {
|
||||
|
|
@ -26,7 +41,7 @@ const incrementCounter = incr => {
|
|||
elements.counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses');
|
||||
|
||||
const currentTick = performance.now();
|
||||
elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second';
|
||||
elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addr/s';
|
||||
lastTick = currentTick;
|
||||
};
|
||||
|
||||
|
|
@ -41,11 +56,20 @@ const displayResult = result => {
|
|||
updateStats();
|
||||
document.getElementById('address').innerText = result ? result.address : '';
|
||||
document.getElementById('private-key').innerText = result ? result.privKey : '';
|
||||
elements.status.innerText = result ? 'Address found' : 'Running';
|
||||
};
|
||||
|
||||
const toggleButtons = genBtn => {
|
||||
const enabled = genBtn ? elements.genBtn : elements.stopBtn;
|
||||
const disabled = genBtn ? elements.stopBtn : elements.genBtn;
|
||||
enabled.removeAttribute('disabled');
|
||||
disabled.setAttribute('disabled', '');
|
||||
};
|
||||
|
||||
const generate = input => {
|
||||
const add = vanity.getVanityWallet(input.pattern, input.checksum, step);
|
||||
const add = vanity.getVanityWallet(input.prefix, input.checksum, step);
|
||||
if (add !== null) {
|
||||
toggleButtons(true);
|
||||
return displayResult(add);
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +77,7 @@ const generate = input => {
|
|||
updateStats();
|
||||
|
||||
if (stop) {
|
||||
elements.status.innerText = 'Stopped';
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -60,18 +85,26 @@ const generate = input => {
|
|||
setTimeout(() => generate(input), 0);
|
||||
};
|
||||
|
||||
for (const e in ids) { // eslint-disable-line guard-for-in
|
||||
elements[e] = document.getElementById(ids[e]);
|
||||
}
|
||||
|
||||
// Add event listeners on buttons
|
||||
document.getElementById('gen').addEventListener('click', () => {
|
||||
elements.genBtn.addEventListener('click', () => {
|
||||
incrementCounter(-count);
|
||||
displayResult(null);
|
||||
stop = false;
|
||||
|
||||
const input = parseInput();
|
||||
difficulty = vanity.computeDifficulty(input.pattern, input.checksum);
|
||||
document.getElementById('difficulty').innerText = difficulty.toString();
|
||||
generate(input);
|
||||
toggleButtons(false);
|
||||
|
||||
setTimeout(() => generate(input), 0);
|
||||
});
|
||||
|
||||
document.getElementById('stop').addEventListener('click', () => {
|
||||
elements.stopBtn.addEventListener('click', () => {
|
||||
toggleButtons(true);
|
||||
stop = true;
|
||||
});
|
||||
|
||||
elements.form.addEventListener('change', () => parseInput());
|
||||
elements.form.addEventListener('keyup', () => parseInput());
|
||||
|
|
|
|||
|
|
@ -77,5 +77,6 @@ const getVanityWallet = (input, isChecksum, max) => {
|
|||
module.exports = {
|
||||
getVanityWallet,
|
||||
computeDifficulty,
|
||||
computeProbability
|
||||
computeProbability,
|
||||
isValidHex
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue