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 token lock information will be there!
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 locker / Token vesting">
<title>Token locker. Token vesting.</title>
<script>
var test =
; // False if contracts are on Mainnet
var contractAddress = '
';
</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: 26px; font-weight: 700;}
h2 { font-size: 24px; font-weight: 500;}
.small {font-size: 14px;}
.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;}
</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 id="locker" style="text-align: center;">
<h1>Token locker</h1>
<h2><span id="addressLocker">
</span></h2>
<p></p>
<h2>Balance (locked tokens):</h2>
<h1><span id="balance"></span> <span class="symbol"></span></h1>
<p></p>
<h2>Unlock date:</h2>
<h2><span id="date">
</span></h2>
<h2><span id="status"></span></h2>
<p></p>
<hr>
<h2>Token: <span id="name">
</span> (<span class="symbol">
</span>) <button id="addToken">Add to wallet</button></h2>
<h2>Token address: <span id="addressToken">
</span></h2>
</div>
<div id="admin" style="text-align: center; display: none">
<hr>
<h2>Admin area</h2>
<p>You see this because you are the owner of the tokens.<br>
When the locking time expires you will be available to withdraw tokens back to your wallet.</p>
<p><span id="nothing" style="color: red; display: none">Nothing to withdraw</span></p>
<p><button id="withdraw">Withdraw</button></p>
<div id="adminLock">
<hr>
<p>To lock tokens just send them to the contract address<br>
<span id="adminContract"></span><br>
<button id="copyAddressAdmin" class="btnmodal">Copy address</button></p>
<div style="text-align: center" id="adminqr"></div>
<p style="text-align: center"><a style="text-decoration: none" id="admind" href="" download>Download QR</a></p>
</div>
</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/thundercore/tokenlocker/js/tokenlocker.ui.js' type="text/javascript" charset="utf-8"></script>
</body>
</html>
