forked from hush/hsc-creator
Duke Leto
3 years ago
4 changed files with 494 additions and 0 deletions
@ -0,0 +1,98 @@ |
|||
<html lang="en"> |
|||
<head> |
|||
<title>HUSH Smart Chain Creator</title> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|||
<link rel="shortcut icon" href="https://hush.is/favicon.ico"> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> |
|||
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css'> |
|||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,700'> |
|||
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> |
|||
<link rel="stylesheet" href="style.css"> |
|||
</head> |
|||
<body> |
|||
<div id="app"> |
|||
<div class="jumbo text-center"> |
|||
<div class="logo"> |
|||
<img src="logo.jpg" /> |
|||
</div> |
|||
<h1>Hush Smart Chain Creator</h1> |
|||
<h4>Select your flavor</h4> |
|||
<ul id="flavor"> |
|||
<li><button class="button-white button-outline" v-on:click="setFlavor('z2z')">Full Privacy (z2z)</button></li> |
|||
<li><button class="button-white button-outline" v-on:click="setFlavor('hybrid')">Hybrid Privacy (Smart contracts)</button></li> |
|||
</ul> |
|||
</div> |
|||
<div id="build" class="content text-center"> |
|||
<h3>Let's build your HSC CLI command</h3> |
|||
<h5>Update your settings, your command will update on the right.</h5> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<form class="center"> |
|||
|
|||
<fieldset> |
|||
<h4>Options</h4> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h5>General</h5> |
|||
<p>Customize general Hush settings</p> |
|||
<ul class="toggles"> |
|||
<li class="animated fadeInRight" id="minerAddress" v-on:click="showMinerAddress"> |
|||
<label>Specific Address</label> |
|||
<label class="switch"> |
|||
<input type="checkbox" v-model="customMinerToAddress" v-on:click="showMinerAddress"> |
|||
<div class="slider round"></div> |
|||
</label> |
|||
</li> |
|||
<li> |
|||
<label>Fully Shielded (z2z)</label> |
|||
<label class="switch"> |
|||
<input type="checkbox" v-model="optionz2z"> |
|||
<div class="slider round"></div> |
|||
</label> |
|||
</li> |
|||
<li class="animated fadeInRight" id="nameInput" style="border-color: #2d2d2d;"> |
|||
<label>Name</label> |
|||
<input class="input" type="text" v-model="optionName" style="border-color: #2d2d2d;"> |
|||
</li> |
|||
<li class="animated fadeInRight" id="supplyInput" style="border-color: #2d2d2d;"> |
|||
<label>Initial Supply</label> |
|||
<input class="input" type="text" v-model="optionSupply" style="border-color: #2d2d2d;"> |
|||
</li> |
|||
<li class="animated fadeInRight" id="blocktimeInput" style="border-color: #2d2d2d;"> |
|||
<label>Block time</label> |
|||
<input class="input" type="text" v-model="optionBlocktime" style="border-color: #2d2d2d;"> |
|||
</li> |
|||
</ul> |
|||
<h5 style="margin-top: 15px;">Addnodes</h5> |
|||
<p>Add trusted bootstrap nodes. Remove by clicking.</p> |
|||
<input style="border-color: #2d2d2d;" type="text" placeholder="Enter hostname or IP address and hit enter" v-model="tempAllowlist" @keyup.enter="addAllowList(tempAllowlist)"> |
|||
<ul class="allowlist" v-for="item in optionAllowList" v-bind:item="item"> |
|||
<li v-on:click="removeAllowListItem(item)">{{ item }}</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
</form> |
|||
<button class="compile button-dark" v-on:click="compile">Compile</button> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="flavor-banner animated fadeInDown"> |
|||
You have selected <span class="bold">{{ flavor }}</span> as your flavor. A wise decision. |
|||
</div> |
|||
|
|||
<div id="profile" class="profile animated fadeInDown" v-html="command"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row donate"> |
|||
<div class="column"> |
|||
Developed by <b>Duke Fucking Leto</b><br/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src='https://unpkg.com/vue'></script> |
|||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> |
|||
<script src='main.js?v=2'></script> |
|||
</body> |
|||
</html> |
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,105 @@ |
|||
new Vue({ |
|||
el: '#app', |
|||
data: { |
|||
name: 'TUSH', |
|||
flavor: '', |
|||
path: '', |
|||
command: '', |
|||
peersList: [ |
|||
], |
|||
optionz2z: 1, |
|||
optionServer: 1, |
|||
optionTor: 0, |
|||
optionGen: 0, |
|||
optionGenProcLimit: 2, |
|||
optionEquihashSolver: 'tromp', |
|||
optionAllowList: [], |
|||
tempAllowlist: '', |
|||
customPath: 0, |
|||
customMinerToAddress: 0, |
|||
optionName: 'TUSH', |
|||
optionSupply: '21000000', |
|||
optionBlocktime: 60, |
|||
optionRpcAllowIp: '127.0.0.1', |
|||
optionRpcUser: 'rpcuser', |
|||
optionRpcPassword: Math.random().toString(36).slice(2), |
|||
optionShowMetrics: 0, |
|||
optionDataDir: '', |
|||
optionZIndex: 0, |
|||
optionAddrIndex: 0, |
|||
optionSpentIndex: 0, |
|||
optionTimestampIndex: 0 |
|||
}, |
|||
methods: { |
|||
setFlavor: function (option) { |
|||
this.flavor = option |
|||
if (this.flavor == 'Linux') { |
|||
this.path = '/home/user/.komodo/HUSH3.conf' |
|||
} else if (this.flavor == "Mac OS") { |
|||
this.path = '~/Library/Application Support/Komodo/HUSH3.conf' |
|||
} else { |
|||
this.path = 'C:\\Users\\your_username\\AppData\\Roaming\\Komodo\\HUSH3.conf' |
|||
} |
|||
$('.flavor-banner').show() |
|||
$(document.body).animate({ |
|||
'scrollTop': $('#build').offset().top |
|||
}, 1200); |
|||
}, |
|||
showPathInput: function () { |
|||
$('#paths').toggle() |
|||
}, |
|||
pickPath: function () { |
|||
|
|||
}, |
|||
showMinerInfo: function () { |
|||
$('#threads').toggle() |
|||
$('#minerAddress').toggle() |
|||
|
|||
if (this.customMinerToAddress == 1) { |
|||
$('#minerInput').toggle() |
|||
} |
|||
}, |
|||
showMinerAddress: function () { |
|||
$('#minerInput').toggle() |
|||
}, |
|||
decreaseThreads: function () { |
|||
if (this.optionGenProcLimit != 0) { |
|||
this.optionGenProcLimit-- |
|||
} |
|||
}, |
|||
increaseThreads: function () { |
|||
this.optionGenProcLimit++ |
|||
}, |
|||
addAllowList: function (value) { |
|||
this.optionAllowList.push(value) |
|||
this.tempAllowlist = '' |
|||
}, |
|||
removeAllowListItem: function (item) { |
|||
console.log(item) |
|||
var index = this.optionAllowList.indexOf(item) |
|||
this.optionAllowList.splice(index, 1) |
|||
}, |
|||
compile: function () { |
|||
var currentdate = new Date(); |
|||
var compileTime = currentdate.getDate() + "/" |
|||
+ (currentdate.getMonth()+1) + "/" |
|||
+ currentdate.getFullYear() + " @ " |
|||
+ currentdate.getHours() + ":" |
|||
+ currentdate.getMinutes() + ":" |
|||
+ currentdate.getSeconds() |
|||
this.command = "<br/>hush-smart-chain -ac_name=" + this.name; |
|||
/* |
|||
if (this.optionAllowList.length != 0) { |
|||
this.command = this.conf + "<br /><br />whitelist=" + this.optionAllowList |
|||
} |
|||
for (var i = 0; i< this.peersList.length; i++) { |
|||
if (i == 0) { |
|||
this.command = this.conf + "<br />" |
|||
} |
|||
this.command = this.conf + "<br />addnode=" + this.peersList[i] |
|||
} |
|||
*/ |
|||
$('#profile').show() |
|||
} |
|||
} |
|||
}); |
@ -0,0 +1,291 @@ |
|||
body { |
|||
font-family: 'Poppins', sans-serif; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.center { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.button-white { |
|||
background-color: white; |
|||
border-color: white; |
|||
} |
|||
|
|||
.button-dark { |
|||
background-color: #2d2d2d; |
|||
border-color: #2d2d2d; |
|||
} |
|||
|
|||
.button-white.button-clear, |
|||
.button-white.button-outline { |
|||
background-color: transparent; |
|||
color: white; |
|||
} |
|||
|
|||
.button-white.button-outline:hover { |
|||
background-color: transparent; |
|||
color: white; |
|||
} |
|||
|
|||
.button-white.button-clear { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
code.dark { |
|||
background-color: #2d2d2d; |
|||
color: #fff; |
|||
} |
|||
|
|||
code.light { |
|||
color: #2d2d2d; |
|||
} |
|||
|
|||
.jumbo { |
|||
padding: 20px 20px 75px 20px; |
|||
background-color: #2d2d2d; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.jumbo .logo { |
|||
max-width: 1024px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.jumbo .logo img { |
|||
height: 30%; |
|||
max-width: 80%; |
|||
} |
|||
|
|||
.jumbo #flavor { |
|||
margin: 40px 0px 0px 0px; |
|||
text-align: center; |
|||
} |
|||
.jumbo #flavor li { |
|||
display: inline; |
|||
margin: 0px 5px 0px 5px; |
|||
} |
|||
|
|||
.content { |
|||
max-width: 1024px; |
|||
margin: 0 auto; |
|||
padding: 50px 50px 50px 50px; |
|||
} |
|||
.content form { |
|||
text-align: left; |
|||
} |
|||
.content form h4 { |
|||
margin-top: 25px; |
|||
text-align: center; |
|||
} |
|||
.content form h5 { |
|||
clear: both; |
|||
margin-bottom: 0px; |
|||
} |
|||
|
|||
.content form p { |
|||
margin: 0px 0px 15px 0px; |
|||
} |
|||
.content .toggles li { |
|||
float: left; |
|||
display: inline; |
|||
margin: 0px 10px 20px 0px; |
|||
} |
|||
.content .toggles #threads { |
|||
display: none; |
|||
float: left; |
|||
list-style-type: none; |
|||
} |
|||
.content .toggles .thread-count { |
|||
position: relative; |
|||
font-size: 150%; |
|||
top: 4px; |
|||
cursor: pointer; |
|||
cursor: hand; |
|||
-webkit-touch-callout: none; |
|||
/* iOS Safari */ |
|||
-webkit-user-select: none; |
|||
/* Safari */ |
|||
-khtml-user-select: none; |
|||
/* Konqueror HTML */ |
|||
-moz-user-select: none; |
|||
/* Firefox */ |
|||
-ms-user-select: none; |
|||
/* Internet Explorer/Edge */ |
|||
user-select: none; |
|||
} |
|||
.content .profile { |
|||
display: none; |
|||
margin-top: 50px; |
|||
text-align: left; |
|||
border: 1px solid #cccccc; |
|||
border-radius: 5px; |
|||
padding: 5px 10px 5px 10px; |
|||
word-wrap: none; |
|||
} |
|||
.content .flavor-banner { |
|||
display: none; |
|||
width: 75%; |
|||
margin: 25px auto; |
|||
padding: 10px; |
|||
background: #333; |
|||
color: #fff; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.content .flavor-banner .path { |
|||
margin: 5px 0px 0px 0px; |
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/* The switch - the box around the slider */ |
|||
.switch { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 60px; |
|||
height: 34px; |
|||
} |
|||
|
|||
/* Hide default HTML checkbox */ |
|||
.switch input { |
|||
display: none; |
|||
} |
|||
|
|||
/* The slider */ |
|||
.slider { |
|||
position: absolute; |
|||
clear: left; |
|||
cursor: pointer; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: #ccc; |
|||
-webkit-transition: .4s; |
|||
transition: .4s; |
|||
} |
|||
|
|||
.slider:before { |
|||
position: absolute; |
|||
content: ""; |
|||
height: 26px; |
|||
width: 26px; |
|||
left: 4px; |
|||
bottom: 4px; |
|||
background-color: white; |
|||
-webkit-transition: .4s; |
|||
transition: .4s; |
|||
} |
|||
|
|||
input:checked + .slider { |
|||
background-color: #2d2d2d; |
|||
} |
|||
|
|||
input:focus + .slider { |
|||
box-shadow: 0 0 1px #2d2d2d; |
|||
} |
|||
|
|||
input:checked + .slider:before { |
|||
-webkit-transform: translateX(26px); |
|||
-ms-transform: translateX(26px); |
|||
transform: translateX(26px); |
|||
} |
|||
|
|||
/* Rounded sliders */ |
|||
.slider.round { |
|||
border-radius: 34px; |
|||
} |
|||
|
|||
.slider.round:before { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.whitelist { |
|||
position: relative; |
|||
list-style-type: none; |
|||
float: left; |
|||
left: -5px; |
|||
right: -5px; |
|||
} |
|||
.whitelist li { |
|||
position: relative; |
|||
float: left; |
|||
font-size: 125%; |
|||
top: 0px; |
|||
margin: 0px 5px -15px 5px; |
|||
padding: 3px 10px 3px 10px; |
|||
border-radius: 5px; |
|||
background: #2d2d2d; |
|||
color: #FFF; |
|||
} |
|||
|
|||
#paths { |
|||
display: none; |
|||
} |
|||
|
|||
#miner, #minerAddress, #minerInput { |
|||
display: none; |
|||
list-style-type: none; |
|||
} |
|||
|
|||
input { |
|||
color: #606060; |
|||
} |
|||
|
|||
.compile { |
|||
width: 50%; |
|||
margin: 20px auto; |
|||
} |
|||
|
|||
.donate { |
|||
position: relative; |
|||
margin: 50 auto; |
|||
margin-bottom: 0px; |
|||
word-wrap: break-word; |
|||
font-weight: lighter; |
|||
} |
|||
|
|||
.donate span { |
|||
position: relative; |
|||
top: 5px; |
|||
} |
|||
|
|||
.tooltip { |
|||
position: relative; |
|||
display: inline; |
|||
} |
|||
.tooltip span { |
|||
position: absolute; |
|||
width:140px; |
|||
color: #2D2D2D; |
|||
background: #FFF; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
visibility: hidden; |
|||
border-radius: 6px; |
|||
} |
|||
.tooltip span:after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 100%; |
|||
left: 50%; |
|||
margin-left: -8px; |
|||
width: 0; height: 0; |
|||
border-bottom: 8px solid #FFF; |
|||
border-right: 8px solid transparent; |
|||
border-left: 8px solid transparent; |
|||
} |
|||
#tooltip1:hover.tooltip span { |
|||
visibility: visible; |
|||
opacity: 0.8; |
|||
top: 50px; |
|||
left: 50%; |
|||
margin-left: -76px; |
|||
z-index: 999; |
|||
} |
Loading…
Reference in new issue