hsc-creator/index.html

466 lines
15 KiB
HTML

<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="./img/graphics/logo_hush_arrakis_chain.svg" />
<!-- <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?v=5" />
</head>
<body>
<header class="header">
<input type="checkbox" id="nav-check" style="display: none" />
<div class="nav-logo">
<a class="header-logo hover-scale hover-glow" href="https://hush.is">
</a>
</div>
<div class="nav-center"></div>
<nav class="nav-buttons">
<a href="https://hush.is" class="component-button hover-scale"
><small>HUSH</small></a
>
<a href="https://dragonx.is" class="component-button hover-scale"
><small>DragonX</small></a
>
<a href="https://videos.hush.is" class="component-button hover-scale"
><small>Videos</small></a
>
<a href="https://blog.hush.is" class="component-button hover-scale"
><small>Blog</small></a
>
</nav>
<div class="nav-bg"></div>
<label for="nav-check" class="nav-menu-btn"></label>
</header>
<div class="bg-overlay"></div>
<div class="page-bg"></div>
<div id="app">
<section class="hero flex-center flex-col">
<img src="./img/graphics/HAC_creator_logo.svg" />
<a href="#options" class="component-button">Create A Chain</a>
</section>
<div
class="bg-blur bg-dark-50 pos-rel box-shadow-dark flex-center flex-col"
>
<form class="center" id="options">
<fieldset>
<h3 class="my-4 flex-center my-2 text-center font-w-800">
Customize Your Chain
</h3>
<div class="content-container">
<div>
<div class="toggles">
<div class="w-full">
<div class="p-1 my-4 br-25">
<div
class="animated fadeInRight flex-center flex-col input-wrapper"
id="nameInput"
>
<label>Coin Name</label>
<input class="input" type="text" v-model="optionName" />
<p class="popup-info">
<strong>-ac_name</strong> <br />
The name of your coin (ALL CAPS)
</p>
</div>
<div class="flex-center w-full pos-rel mt-4">
<input
type="checkbox"
name="info-mining"
id="info-z2z"
style="display: none"
/>
<h3 class="flex-center">Fully Shielded z2z</h3>
<label for="info-z2z"
><img
class="info-btn"
src="./img/graphics/icon_question.svg"
alt=""
/></label>
<label for="info-z2z" class="popup-text">
<p class="p-1 br-25 my-1 popup-info-2">
<strong>-ac_private</strong> <br />
All p2p transactions will be shielded
</p>
</label>
</div>
<div class="flex-center">
<label class="switch">
<input type="checkbox" v-model="optionz2z" />
<div class="slider round"></div>
</label>
</div>
</div>
</div>
<div class="w-full p-1 mb-8 br-25">
<li
class="animated fadeInRight pos-rel input-wrapper"
id="algoInput"
>
<div class="flex-center w-full pos-rel">
<input
type="checkbox"
name="info-mining"
id="info-mining"
style="display: none"
/>
<h3 class="flex-center">Mining Algorithm</h3>
<label for="info-mining" style="width: unset"
><img
class="info-btn"
src="./img/graphics/icon_question.svg"
alt=""
/></label>
<label for="info-mining" class="popup-text">
<p class="p-1 br-25 my-2 popup-info-2">
<strong>-ac_algo</strong>
The proof of work algorithm used to mine blocks.
<br />
<br />
<b>RandomX</b> uses the CPU. <br />
<b>Equihash</b> uses ASICs
</p>
</label>
</div>
<select name="algo" v-model="optionAlgo" id="dropdown">
<option value=" -ac_algo=randomx ">RandomX</option>
<option value=" -ac_algo=equihash -ac_nk=200,9 ">
Equihash (200,9)
</option>
<option value=" -ac_algo=equihash -ac_nk=210,9 ">
Equihash (210,9)
</option>
<option value=" -ac_algo=equihash -ac_nk=48,5 ">
Equihash (48,5)
</option>
<option value=" -ac_algo=equihash -ac_nk=96,5 ">
Equihash (96,5)
</option>
<option value=" -ac_algo=equihash -ac_nk=144,5 ">
Equihash (144,5)
</option>
<option value=" -ac_algo=equihash -ac_nk=150,5 ">
Equihash (150,5)
</option>
</select>
</li>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="supplyInput"
>
<label>Initial Supply</label>
<input class="input" type="text" v-model="optionSupply" />
<p class="popup-info">
<strong>-ac_supply</strong> <br />
The premine, denominated in coins
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="rewardInput"
>
<label>Initial Block Reward </label>
<input class="input" type="text" v-model="optionReward" />
<p class="popup-info">
<strong>-ac_reward</strong> <br />
The reward for finding a block, denominated in satoshis (1
coin = 100000000 sats)
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="blocktimeInput"
>
<label>Block time </label>
<input class="input" type="text" v-model="optionBlocktime" />
<p class="popup-info">
<strong>-ac_blocktime</strong> <br />
The time it will take to mine a block in seconds.
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="halvingInput"
>
<label>Block Halving Period </label>
<input class="input" type="text" v-model="optionHalving" />
<p class="popup-info">
<strong>-ac_halving</strong> <br />
After how many blocks the block reward will be reduced by
half.
</p>
</div>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 addnodes"
>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="pubkeyInput"
>
<h3 class>Addnodes</h3>
<input
type="text"
placeholder="Enter hostname or IP address and hit enter"
v-model="tempAllowlist"
@keyup.enter="addAllowList(tempAllowlist)"
class="text-white-80 input mx-auto"
/>
<p class="popup-info">
<strong>-addnode</strong> <br />
Add trusted nodes to start syncing your chain from.
</p>
</div>
</div>
<ul
class="allowlist"
v-for="item in optionAllowList"
v-bind:item="item"
>
<li>
<div
v-on:click="removeAllowListItem(item)"
class="li-delete"
></div>
{{ item }}
</li>
</ul>
<div class="flex-center w-full pos-rel mt-4">
<input
type="checkbox"
name="info-enable-mining"
id="infoEnableMining"
style="display: none"
class="input-label"
/>
<h3 class="flex-center">Enable Mining</h3>
<label for="infoEnableMining"
><img
class="info-btn"
src="./img/graphics/icon_question.svg"
alt=""
/></label>
<label for="infoEnableMining" class="popup-text">
<p class="p-1 br-25 my-1 popup-info-2 w-90 mx-auto">
<strong>-gen=1</strong> <br />
Enable mining for the node that will be running this command.
</p>
</label>
</div>
<div class="flex-center mb-4">
<label class="switch">
<input type="checkbox" v-model="optionGen" />
<div class="slider round"></div>
</label>
</div>
</div>
<div>
<input
type="checkbox"
id="optionalParams"
style="position: absolute; display: none"
/>
<div class="optional-params pos-rel mt-12 w-90 mx-auto">
<label for="optionalParams" id="optionalLabel"
>Advanced Options</label
>
<div class="py-2">
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="pubkeyInput"
>
<label>Founder's Reward (Percentage)</label>
<input
class="input"
type="text"
width="40"
v-model="optionFoundersPerc"
/>
<p class="popup-info">
<strong>-ac_founders</strong> <br />
This parameter creates a "founder's reward." and requires
<strong>-ac_perc</strong>. If the
<strong>-ac_perc</strong> value is not declared, the
<strong>-ac_founders</strong> value defaults to 35%. Also,
either <strong>-ac_pubkey</strong> OR
<strong>-ac_script</strong> must be set.
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="pubkeyInput"
>
<label>Founder's Reward (Satoshis)</label>
<input
class="input"
type="text"
width="40"
v-model="optionFoundersSats"
/>
<p class="popup-info">
<strong>-ac_founders_reward</strong> <br />
This parameter functions in a manner that is similar to a
combination of the ac_perc and ac_founders parameters.
However, the value specified in the ac_founders_reward
parameter is given in satoshis, as opposed to a percentage
of the block reward. Also, the founder's reward does not
accumulate over several blocks.
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="pubkeyInput"
>
<label>Percentage Inflation</label>
<input
class="input"
type="text"
width="40"
v-model="optionPerc"
/>
<p class="popup-info">
<strong>-ac_perc</strong> <br />
When used without <strong>-ac_founders</strong> the chain
will follow an inflation-tax model in which the
<strong>-ac_perc</strong> parameter is the percentage added
to the block reward, and the transactions that allocate
these rewards are sent to the
<strong>-ac_pubkey</strong> address.<br />
<br />
For example, if <strong>-ac_reward=100000000</strong> and
<strong>-ac_perc=10000000</strong>, for each block mined the
miner receives 100000000 satoshis (1 coin), and the owner of
the <strong>-ac_pubkey</strong> address receives 10000000
satoshis (0.1 coin, which is 10% of the miner's reward)
</p>
</div>
<div
class="animated fadeInRight flex-center flex-col my-2 input-wrapper"
id="pubkeyInput"
>
<label>Public Key</label>
<input
class="input"
type="text"
width="40"
v-model="optionPubkey"
/>
<p class="popup-info">
<strong>-ac_pubkey</strong> <br />
Designate a public key address for recieving funds from the
network such as a with devtax. This parameter must only be
used if <strong>-ac_perc</strong>,
<strong>-ac_founders</strong>, or
<strong>-ac_import=PUBKEY</strong> is used.
</p>
</div>
<div class="flex-center w-full pos-rel mt-4">
<input
type="checkbox"
name="info-test-chain"
id="infoTestChain"
style="display: none"
class="input-label"
/>
<h3 class="flex-center text-center">Test Mode</h3>
<label for="infoTestChain"
><img
class="info-btn"
src="./img/graphics/icon_question.svg"
alt=""
/></label>
<label for="infoTestChain" class="popup-text">
<p class="p-1 br-25 my-1 popup-info-2 w-90 mx-auto">
<strong>-testnode=1</strong>
Use this for testing. Requires only a single node to start
a chain.
</p>
</label>
</div>
<label class="switch mx-auto flex-center">
<input type="checkbox" v-model="optionTestNode" />
<div class="slider round"></div>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<button class="compile component-button" v-on:click="compile">
Compile
</button>
<div class="content text-center my-4 mb-8">
<div
id="profile"
class="profile animated fadeInDown"
v-html="command"
></div>
<div class="flex-center">
<button
id="copyCommandBtn"
class="component-button mx-auto"
onclick="copyText()"
>
Copy To Clipboard
</button>
<a
class="component-button btn-sm"
href="how-to-run"
>How To Run</a
>
</div>
<div class="flex-center flex-col mt-12">
<h4 class="tet-center">Detailed Documentation and background</h4>
<a
class="component-button m-1"
href="https://git.hush.is/hush/hsc-creator/src/branch/master/docs.md"
>Chain Creator Code</a
>
<a
class="component-button m-1"
href="https://git.hush.is/hush/hush-arrakis-chains"
>Hush Arrakis Chains</a
>
<a
class="component-button m-1"
href="https://git.hush.is/hush/hsc-creator/src/branch/master/hsc-options-explained.md"
>All HAC options</a
>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="main.js?v=8"></script>
</div>
</body>
</html>