zervo/bitaddress.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a skip button for the seeding and a progress bar, to be styled

Browse source
This commit is contained in:
Michael Muré 2014-04-28 23:05:51 +02:00
parent 7d594df524
commit 42e9855a08
4 changed files with 226 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -5781,6 +5781,14 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
#seedpoolarea { display: none; }
#seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; }
.seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; }
#seedSkipper { font-size: 11px; text-align: center; line-height: 14px;}
#generate #mousemovelimit { font-size: 16px; color: #FFF; }
#rightArea { float: right; width: 170px; }
#progress-bar { width: 170px; background:#99c31b; position: relative; margin-bottom: 20px; }
#progress-bar-percentage { background:#ff952d; padding: 3px 0px; text-align: center; height: 18px; }
#progress-bar-percentage span { display: inline-block; position: absolute; width: 100%; left: 0; }
#generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#generate span { padding: 5px 5px 0 5px; }
#generatekeyinput { position: relative; z-index: 20; }
@ -6099,6 +6107,17 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
<span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br />
<div id="seedpooldisplay"></div>
<div id="rightArea">
<div id="progress-bar" class="fullyRounded">
<div id="progress-bar-percentage" class="fullyRounded" style="width: 1%"><span id="mousemovelimit"> &nbsp; </span></div>
</div>
<div id="seedSkipper">
<a href="#" class="nicerButton" style="width: 100px;" onClick="ninja.seeder.seedCount = ninja.seeder.seedLimit; ninja.seeder.seed();">Skip &raquo;</a><br />
<p>You may skip this step if you do not plan to use the random key generator.</p>
</div>
</div>
<hr />
<div class="frontPageText">
@ -7011,7 +7030,7 @@ ninja.publicKey = {
};
</script>
<script type="text/javascript">
ninja.seeder = {
ninja.seeder = {
init: (function () {
document.getElementById("generatekeyinput").value = "";
})(),
@ -7094,7 +7113,15 @@ ninja.seeder = {
div.setAttribute("class", "seedpoint");
div.style.top = y + "px";
div.style.left = x + "px";
// let's make the entropy 'points' grow and change color!
percentageComplete = ninja.seeder.seedCount / ninja.seeder.seedLimit;
document.getElementById("progress-bar-percentage").style.width=Math.ceil(percentageComplete*100)+"%";
// for some reason, appending these divs to an IOS device breaks clicking altogether (?)
if (navigator.platform != 'iPad' && navigator.platform != 'iPhone' && navigator.platform != 'iPod') {
document.body.appendChild(div);
}
ninja.seeder.seedPoints.push(div);
},
@ -7104,7 +7131,7 @@ ninja.seeder = {
}
ninja.seeder.seedPoints = [];
}
};
};
ninja.qrCode = {
// determine which type number is big enough for the input text length

11
src/index.html
View file

@ -157,6 +157,17 @@
<span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br />
<div id="seedpooldisplay"></div>
<div id="rightArea">
<div id="progress-bar" class="fullyRounded">
<div id="progress-bar-percentage" class="fullyRounded" style="width: 1%"><span id="mousemovelimit"> &nbsp; </span></div>
</div>
<div id="seedSkipper">
<a href="#" class="nicerButton" style="width: 100px;" onClick="ninja.seeder.seedCount = ninja.seeder.seedLimit; ninja.seeder.seed();">Skip &raquo;</a><br />
<p>You may skip this step if you do not plan to use the random key generator.</p>
</div>
</div>
<hr />
<div class="frontPageText">

8
src/main.css
View file

@ -28,6 +28,14 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
#seedpoolarea { display: none; }
#seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; }
.seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; }
#seedSkipper { font-size: 11px; text-align: center; line-height: 14px;}
#generate #mousemovelimit { font-size: 16px; color: #FFF; }
#rightArea { float: right; width: 170px; }
#progress-bar { width: 170px; background:#99c31b; position: relative; margin-bottom: 20px; }
#progress-bar-percentage { background:#ff952d; padding: 3px 0px; text-align: center; height: 18px; }
#progress-bar-percentage span { display: inline-block; position: absolute; width: 100%; left: 0; }
#generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#generate span { padding: 5px 5px 0 5px; }
#generatekeyinput { position: relative; z-index: 20; }

12
src/ninja.misc.js
View file

@ -1,4 +1,4 @@
ninja.seeder = {
ninja.seeder = {
init: (function () {
document.getElementById("generatekeyinput").value = "";
})(),
@ -81,7 +81,15 @@ ninja.seeder = {
div.setAttribute("class", "seedpoint");
div.style.top = y + "px";
div.style.left = x + "px";
// let's make the entropy 'points' grow and change color!
percentageComplete = ninja.seeder.seedCount / ninja.seeder.seedLimit;
document.getElementById("progress-bar-percentage").style.width=Math.ceil(percentageComplete*100)+"%";
// for some reason, appending these divs to an IOS device breaks clicking altogether (?)
if (navigator.platform != 'iPad' && navigator.platform != 'iPhone' && navigator.platform != 'iPod') {
document.body.appendChild(div);
}
ninja.seeder.seedPoints.push(div);
},
@ -91,7 +99,7 @@ ninja.seeder = {
}
ninja.seeder.seedPoints = [];
}
};
};
ninja.qrCode = {
// determine which type number is big enough for the input text length