You can download front-end HTML file and edit the file after downloading, or order some design on top of it.
Please keep the scripts, IDs and classes otherwise some important functions may not work properly.
Just upload index.html file to your website - and your very own token sale is live!
You can also copy the HTML code to clipboard.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Token sale page">
<title>Token sale</title>
<script>
var test =
false; // False if contracts are on Mainnet
var contractAddressSale = '
';
var contractAddressToken = '
';
</script>
<style>
body {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #FFFFFF; background-color: #000000; font-size: 16px; font-weight: 400;}
h1 { font-size: 24px; font-weight: 700;}
h2 { font-size: 22px; font-weight: 500;}
.small {
font-size: 12px;
}
.err {
color: #fa0707;
}
* {
box-sizing: border-box;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #C0C0C0;
}
.clickable {
cursor: pointer;
}
.clickable:hover {
color: #C0C0C0;
}
button {
background-color: #283747;
border: none;
border-radius: 2px;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: #008000;
}
button[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
hr {
margin: 20px;
border: 0;
border-top: 1px dashed;
}
input {
text-align: center;
font-size: 18px;
background-color: #000000;
color: #FFFFFF;
border:1px solid;
}
</style>
</head>
<body>
<div style="text-align: center">
<div class="network small"><span id="curnet"><span class="err">Please use DApp browser/extension (e.g. <a target="_blank" href="https://metamask.io">Metamask</a>)</span></span> <span id="myAddr"></span></div>
</div>
<div style="text-align: center">
<h2>Token info</h2>
<p><span id="tokenName">
</span> (<span id="tokenSymbol">
</span>)</p>
<p><a target="_blank" href="
" id="tokenAddress">
</a></p>
<!-- Reserved in case you want to show decimals and total supply: <span id="#tokenDecimalsUI"></span> <span id="#tokenSupplyUI"></span>-->
<p><button id="addToken" style="text-align: center">Add to wallet</button></p>
</div>
<hr>
<div style="text-align: center">
<h2>Token sale info</h2>
<p>Total sale quantity: <span id="quantity">
</span></p>
<p>Token price: <span id="price">
</span> <span class='eth'>MATIC</span> (<span id="ratio"></span> tokens per 1 MATIC)</p>
<p>Tokens sold: <span id="sold">
</span></p>
<p>Total raised: <span id="raised">
</span> <span class='eth'>MATIC</span></p>
<p>Unsold tokens: <span id="unsold">
</span></p>
<p>Token sale status: <span id="status">--</span></p>
</div>
<hr>
<div style="text-align: center">
<h2>Buy tokens</h2>
<p><input type="number" id="buyQty" value="1"></p>
<h2><span id="buyAmount"></span> MATIC</h2>
<p><button id="buyBtn" style="text-align: center">Buy</button></p>
<p>My tokens balance: <span id="myTokens"></span></p>
</div>
<hr>
<div style="text-align: center">
<h2>Sale contract</h2>
<p>You can also buy tokens by sending MATIC to this contract (gas limit 200,000+):</p>
<p><a href="
" target="_blank" id="saleAddress"></a>
</p>
<div style="text-align: center" id="refqr"></div>
<p style="text-align: center"><a style="text-decoration: none" id="refd" href="" download> Download QR </a></p>
</div>
<script src='https://dappbuilder.org/js/jquery-3.6.0.min.js' type="text/javascript" charset="utf-8"></script>
<script src='https://dappbuilder.org/js/ethers-5.0.umd.min.js' type="text/javascript" charset="utf-8"></script>
<script src='https://dappbuilder.org/matic/tokensale/js/tokensale.ui.js' type="text/javascript" charset="utf-8"></script>
</body>
</html>
