I saw this cool http://www.royalforkblog.com/2014/08/11/graphical-address-generator/
Asuming here that only the networkVersion=37 and ECKey.privateKeyPrefix=80 differs in Peercoin,
porting it shouldn’t be a problem.
Please find htm page attached and review/revise…
[code]
@font-face {
font-family: ‘Droid Sans Mono’;
font-style: normal;
font-weight: 400;
src: local(‘Droid Sans Mono’), local(‘DroidSansMono’), url(’/assets/fonts/droid_sans.ttf’) format(‘truetype’);
}
/* Private Key */
.private {
background-color: #b7c9e1;
padding: 0 0 25px 0;
margin-bottom: 0px;
}
.private-key {
margin-left: 54px;
}
.private-key .pk::after, .public-key .ripe160::after {
content: “”;
position: absolute;
height: 90px;
width: 10px;
background-image: url(/assets/imgs/wallet-gen/dash-down.svg);
background-repeat: no-repeat;
left: 50%;
top: 75px;
}
.private-key .pk::before {
content: “”;
position: absolute;
height: 304px;
width: 304px;
background-image: url(/assets/imgs/wallet-gen/pk-pub.svg);
background-repeat: no-repeat;
top: 60px;
left: -40px;
}
#passphrase {
width: 350px;
/* 520px = width of 64 hex chars /
/ (520 - 350) / 2 = 85 */
margin: 0 0 0 85px;
}
.wif-container {
margin-top: 85px;
margin-left: 38px;
}
.private-wif {
margin-left: 96px;
}
/* Public Key */
.public {
background-color: #f4f7fa;
margin-top: 0px;
}
.public-equation {
display: inline-block;
position: relative;
}
.public-equation img {
width: 100px;
vertical-align: middle;
}
/kpub/
.pub-key-label {
display: inline-block;
font-size: 30px;
margin-right: 25px;
font-style: italic;
position: relative;
}
.pub-key-label::after {
content: “pub”;
display: inline-block;
font-size: 15px;
position: absolute;
bottom: -2px;
}
.public-key-split {
position: absolute;
top: -32px;
left: 15px;
}
.public-key-x {
width: 512px;
}
.public-key-container {
width: 534px;
}
.public-coords {
font-size: 10pt;
margin-left: 50px;
}
.public-coords .hex-container {
width: 512px;
}
.public-coord-x {
display: inline-block;
position: relative;
}
.public-coord-x:after {
content: “”;
position: absolute;
height: 150px;
width: 80px;
right: -82px;
top: 15px;
background-image: url("/assets/imgs/wallet-gen/pub-x.svg");
background-repeat: no-repeat;
}
.public-coord-y {
margin-top: 10px;
}
.public-key {
position: relative;
margin-left: 54px;
}
.public-y-even-odd {
margin-left: 10px;
}
.public-key svg {
margin-left: 5px;
}
#parity-arrow {
margin: -7px 0 -4px 7px;
visibility: hidden;
}
svg.red line {
stroke: firebrick;
}
svg.red polygon {
fill: firebrick;
stroke: firebrick;
}
svg.green line {
stroke: forestgreen;
}
svg.green polygon {
fill: forestgreen;
stroke: forestgreen;
}
/* Public Address */
.public-address-container {
margin-top: 80px;
margin-left: 141px;
}
.ripe-hash {
margin-left: 104px;
}
.ripe160 {
width: 320px;
}
.public-address {
text-transform: initial !important;
margin-left: 62px;
}
.address-checksum {
width: 64px;
}
.public-address {
width: 272px;
}
/* information label things */
.information {
position: absolute;
width: 100px;
background-color: bisque;
font-size: 10pt;
padding: 5px;
box-sizing: border-box;
}
.information .title {
font-weight: bolder;
font-size: 16px;
}
.step1 {
right: -150px;
width: 125px;
bottom: 0;
}
.step2 {
width: 125px;
top: -75px;
}
.step3 {
width: 125px;
top: -75px;
right: 70px;
}
.step4 {
width: 370px;
top: -75px;
right: -305px;
}
.step5 {
top: 5px;
right: -225px;
width: 225px;
}
.step6 {
top: 35px;
right: -425px;
width: 300px;
}
.step7 {
top: 10px;
width: 515px;
left: -50px;
}
.step8 {
top: 0;
right: -225px;
width: 200px;
}
.step9 {
top: -75px;
width: 230px;
left: -95px;
}
.step10 {
top: -75px;
width: 175px;
right: -60px;
}
.step11 {
top: 0;
width: 200px;
right: -210px;
}
/*
- /| -|
- / | | border-top
- / | -|
- \ | -|
- \ | | border-bottom
- | -|
- |___|
- | border-right
- Make sure height + width are 0
*/
.information::after {
content: “”;
position: absolute;
font-size: 10pt;
}
.information-arrow-left-bottom::after {
bottom: 5px;
left: -20px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid bisque;
}
.information-arrow-left-middle::after {
bottom: 20px;
left: -20px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid bisque;
}
.information-arrow-left-top::after {
top: 5px;
left: -20px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid bisque;
}
.information-arrow-bottom-left::after {
left: 0px;
bottom: -20px;
border-top: 20px solid bisque;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.information-arrow-bottom-right::after {
right: 0px;
bottom: -20px;
border-top: 20px solid bisque;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.information-arrow-bottom-middle::after {
right: 50%;
bottom: -20px;
border-top: 20px solid bisque;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/Utilities/
.public, .private {
min-width: 980px;
}
.section-header {
font-size: 18px !important;
letter-spacing: 0px !important;
margin-bottom: 10px;
padding: 5px;
}
.container {
display: inline-block;
font-size: 0;
position: relative;
}
.container + .container {
margin-top: 20px;
}
.center {
text-align: center;
}
/Hex Part Things/
.version {
background-color: lightcoral;
}
.checksum {
background-color: gold;
}
.compression-flag {
background-color: lightpink;
}
.hex-container {
font-family: “Droid Sans Mono”;
text-transform: uppercase;
font-size: 0px;
border: 1px solid #000;
display: inline-flex;
padding: 0;
background-color: #ffffff;
}
.hex-container > div, .hex-padding {
display: inline-block;
padding: 3px;
font-size: 10pt;
}
.hex-container > .hex-left {
font-size: 10pt;
padding: 3px 0 3px 3px;
}
.hex-container > .hex-middle {
font-size: 10pt;
padding: 3px 0;
}
.hex-container > .hex-right {
font-size: 10pt;
padding: 3px 3px 3px 0;
}
<body>
<header class="site-header">
<div class="header-description">- Peercoin.</div>
<div class="wrap">
<div class="sidebar">
<div class="sidebar-content">
</div>
<div class="page-content">
Step by step Address Generator (Peercoin)
Generate Private Key
<div class="version hex-left">B7</div>
<div class="pk hex-middle"></div>
<div class="compression-flag hex-middle">01</div>
<div class="checksum-pk checksum hex-right"></div>
</div>
<div class="information step2 information-arrow-bottom-left"><span class="title">2.</span> Prepend version number.</div>
<div class="information step3 information-arrow-bottom-right"><span class="title">3.</span> Append compression flag.</div>
<div class="information step4 information-arrow-bottom-left"><span class="title">4.</span> Append checksum. Checksum is the first 4 bytes of double sha256 hash of whatever is being checkedsum'ed.</div>
</div>
<div>
<div class="private-wif hex-container hex-padding"></div>
</div>
<div class="information information-arrow-left-top step5"><span class="title">5.</span> Base58 encoded data is easier to read and manage. The "double-arrows" indicate this is reversible.</div>
</div>
Generate Public Key (compressed)
<div class="public-coords">
<div class="public-coord-x">
x = <span class="hex-container hex-padding public-x"></span>
</div>
<div class="public-coord-y">
y = <span class="hex-container hex-padding public-y"></span><span class="public-y-even-odd"></span>
</div>
</div>
<div class="ripe-hash">
<div class="ripe160 hex-container hex-padding">N/A</div>
</div>
<div class="information step8 information-arrow-left-top"><span class="title">8.</span> Hash public key twice. This obfuscates the public key and shortens it.</div>
<div>
<div class="hex-container hex-padding public-address">N/A</div>
</div>
<div class="information information-arrow-left-top step11"><span class="title">11.</span> After another base58 encoding, we have our public address :)</div>
</div>
</div>
</div>
<footer class="site-footer">
<h2 class="footer-heading">copied from The Royal Fork</h2>
<div class="footer-col-1 column">
</div>
<div class="footer-col-2 column">
</div>
<div class="footer-col-3 column">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
[/code]
