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 |
81
index.html
81
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">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<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>
|
||||
<body>
|
||||
<div>
|
||||
<label for="pattern">Pattern</label>
|
||||
<input type="text" value="ab" id="pattern">
|
||||
<div class="container">
|
||||
<div class="header text-center">
|
||||
<h1><a href="#">VANITY-ETH</a></h1>
|
||||
<p>Vanity ETH address generator</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<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 class="row">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<input type="button" id="gen" value="Generate">
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<input type="button" id="stop" value="Stop">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
<div>
|
||||
<label for="checksum">Case-sensitive</label>
|
||||
<input type="checkbox" id="checksum" checked>
|
||||
</div>
|
||||
<button id="gen">
|
||||
Generate
|
||||
</button>
|
||||
<button id="stop">
|
||||
Stop
|
||||
</button>
|
||||
<div id="difficulty"></div>
|
||||
<div id="counter"></div>
|
||||
<div id="speed"></div>
|
||||
<div id="probability"></div>
|
||||
<div id="result"></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>
|
||||
</body>
|
||||
</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 difficulty = 0;
|
||||
const step = 250;
|
||||
const counter = document.getElementById('counter');
|
||||
const speed = document.getElementById('speed');
|
||||
const probability = document.getElementById('probability');
|
||||
const elements = {
|
||||
counter: document.getElementById('counter'),
|
||||
speed: document.getElementById('speed'),
|
||||
probability: document.getElementById('probability'),
|
||||
probabilityBar: document.getElementById('probability-bar')
|
||||
};
|
||||
|
||||
const parseInput = () => {
|
||||
return {
|
||||
|
|
@ -20,22 +23,24 @@ const parseInput = () => {
|
|||
|
||||
const incrementCounter = 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();
|
||||
speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second';
|
||||
elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second';
|
||||
lastTick = currentTick;
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
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 => {
|
||||
incrementCounter(result ? result.attempts : 0);
|
||||
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 => {
|
||||
|
|
@ -63,7 +68,7 @@ document.getElementById('gen').addEventListener('click', () => {
|
|||
|
||||
const input = parseInput();
|
||||
difficulty = vanity.computeDifficulty(input.pattern, input.checksum);
|
||||
document.getElementById('difficulty').innerText = 'difficulty: ' + difficulty;
|
||||
document.getElementById('difficulty').innerText = difficulty.toString();
|
||||
generate(input);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue