Create a nice UI
This commit is contained in:
Boris
parent
a2fcb0e686
commit
6a346c405e
5 changed files with 380 additions and 27 deletions
303
css/stylesheet.css
Normal file
303
css/stylesheet.css
Normal file
|
|
@ -0,0 +1,303 @@
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
background: #000;
|
||||||
|
margin: 8em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body a {
|
||||||
|
transition: 0.5s all;
|
||||||
|
-webkit-transition: 0.5s all;
|
||||||
|
-moz-transition: 0.5s all;
|
||||||
|
-o-transition: 0.5s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"], input[type="button"] {
|
||||||
|
transition: 0.5s all;
|
||||||
|
-webkit-transition: 0.5s all;
|
||||||
|
-moz-transition: 0.5s all;
|
||||||
|
-o-transition: 0.5s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: none;
|
||||||
|
font-size: 1.3em;
|
||||||
|
padding: 1em 0;
|
||||||
|
border: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form input[type="button"] {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: #FFF;
|
||||||
|
padding: 0.6em;
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 1.3em 0 0 0;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: #198a88;
|
||||||
|
width: 100%;
|
||||||
|
transition: 0.5s all;
|
||||||
|
-webkit-transition: 0.5s all;
|
||||||
|
-o-transition: 0.5s all;
|
||||||
|
-moz-transition: 0.5s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form input[type="button"]:hover {
|
||||||
|
background: #d78716;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
margin: .5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 27px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
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: none;
|
||||||
|
border: 1px solid #97A2A8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox i.left {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid #97A2A8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox input + i:after {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s;
|
||||||
|
-o-transition: opacity 0.1s;
|
||||||
|
-moz-transition: opacity 0.1s;
|
||||||
|
-webkit-transition: opacity 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox input {
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
/* float: right; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#address, #private-key {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #969696;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-- Responsive design --*/
|
||||||
|
|
||||||
|
@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: 0.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: 0.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
images/tick-mark.png
Normal file
BIN
images/tick-mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
79
index.html
79
index.html
|
|
@ -6,27 +6,72 @@
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Vanity ETH</title>
|
<title>Vanity ETH</title>
|
||||||
|
|
||||||
|
<!--CSS-->
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css"/>
|
||||||
|
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/>
|
||||||
|
|
||||||
|
<!--Fonts-->
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
|
||||||
|
rel='stylesheet' type='text/css'>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div class="container">
|
||||||
<label for="pattern">Pattern</label>
|
<div class="header text-center">
|
||||||
<input type="text" value="ab" id="pattern">
|
<h1><a href="#">VANITY-ETH</a></h1>
|
||||||
|
<p>Vanity ETH address generator</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="row">
|
||||||
<label for="checksum">Case-sensitive</label>
|
<div class="col-md-6">
|
||||||
<input type="checkbox" id="checksum" checked>
|
<div class="panel form">
|
||||||
|
<form>
|
||||||
|
<input type="text" placeholder="Pattern" id="pattern">
|
||||||
|
<div class="check">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="checkbox" id="checksum" checked="">
|
||||||
|
<i class="left"> </i>
|
||||||
|
Case-sensitive
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button id="gen">
|
<div class="row">
|
||||||
Generate
|
<div class="col-lg-6 col-sm-12">
|
||||||
</button>
|
<input type="button" id="gen" value="Generate">
|
||||||
<button id="stop">
|
</div>
|
||||||
Stop
|
<div class="col-lg-6 col-sm-12">
|
||||||
</button>
|
<input type="button" id="stop" value="Stop">
|
||||||
<div id="difficulty"></div>
|
</div>
|
||||||
<div id="counter"></div>
|
</div>
|
||||||
<div id="speed"></div>
|
</form>
|
||||||
<div id="probability"></div>
|
</div>
|
||||||
<div id="result"></div>
|
</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>
|
||||||
|
<!--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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--JS-->
|
||||||
|
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
|
||||||
<script src="js/bundle.js" type="text/javascript"></script>
|
<script src="js/bundle.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
21
js/index.js
21
js/index.js
|
|
@ -7,9 +7,12 @@ let stop = false;
|
||||||
let lastTick = null;
|
let lastTick = null;
|
||||||
let difficulty = 0;
|
let difficulty = 0;
|
||||||
const step = 250;
|
const step = 250;
|
||||||
const counter = document.getElementById('counter');
|
const elements = {
|
||||||
const speed = document.getElementById('speed');
|
counter: document.getElementById('counter'),
|
||||||
const probability = document.getElementById('probability');
|
speed: document.getElementById('speed'),
|
||||||
|
probability: document.getElementById('probability'),
|
||||||
|
probabilityBar: document.getElementById('probability-bar')
|
||||||
|
};
|
||||||
|
|
||||||
const parseInput = () => {
|
const parseInput = () => {
|
||||||
return {
|
return {
|
||||||
|
|
@ -20,22 +23,24 @@ const parseInput = () => {
|
||||||
|
|
||||||
const incrementCounter = incr => {
|
const incrementCounter = incr => {
|
||||||
count += incr;
|
count += incr;
|
||||||
counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses') + ' generated';
|
elements.counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses');
|
||||||
|
|
||||||
const currentTick = performance.now();
|
const currentTick = performance.now();
|
||||||
speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second';
|
elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second';
|
||||||
lastTick = currentTick;
|
lastTick = currentTick;
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateStats = () => {
|
const updateStats = () => {
|
||||||
const prob = Math.round(10000 * vanity.computeProbability(difficulty, count)) / 100;
|
const prob = Math.round(10000 * vanity.computeProbability(difficulty, count)) / 100;
|
||||||
probability.innerText = 'Probability: ' + prob + '%';
|
elements.probability.innerText = prob + '%';
|
||||||
|
elements.probabilityBar.style.width = prob + '%';
|
||||||
};
|
};
|
||||||
|
|
||||||
const displayResult = result => {
|
const displayResult = result => {
|
||||||
incrementCounter(result ? result.attempts : 0);
|
incrementCounter(result ? result.attempts : 0);
|
||||||
updateStats();
|
updateStats();
|
||||||
document.getElementById('result').innerHTML = result ? 'address: ' + result.address + '<br>key: ' + result.privKey : '';
|
document.getElementById('address').innerText = result ? result.address : '';
|
||||||
|
document.getElementById('private-key').innerText = result ? result.privKey : '';
|
||||||
};
|
};
|
||||||
|
|
||||||
const generate = input => {
|
const generate = input => {
|
||||||
|
|
@ -63,7 +68,7 @@ document.getElementById('gen').addEventListener('click', () => {
|
||||||
|
|
||||||
const input = parseInput();
|
const input = parseInput();
|
||||||
difficulty = vanity.computeDifficulty(input.pattern, input.checksum);
|
difficulty = vanity.computeDifficulty(input.pattern, input.checksum);
|
||||||
document.getElementById('difficulty').innerText = 'difficulty: ' + difficulty;
|
document.getElementById('difficulty').innerText = difficulty.toString();
|
||||||
generate(input);
|
generate(input);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue