Contractless-Faucet/index.html

140 lines
5.9 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Request Contractless testnet currency from the public faucet.">
<title>Contractless Testnet Faucet</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-shell">
<header class="site-header">
<a class="brand" href="#" aria-label="Contractless faucet home">
<img src="contractless-logo.png" alt="">
<span>CONTRACTLESS</span>
<small id="brand-network">TESTNET FAUCET</small>
</a>
<button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav">
<span></span><span></span>
<span class="sr-only">Toggle navigation</span>
</button>
<nav id="site-nav" class="site-nav" aria-label="Project links">
<a href="https://contractless.community/contractless_whitepaper.pdf">Whitepaper</a>
<a href="https://contractless.community/">Community</a>
<a href="https://contractless.dev/contractless/Contractless">Node source</a>
<a href="https://contractless.dev/contractless/Contractless/releases">Node binaries</a>
<a href="https://contractless.dev/contractless/Contractless-GUI-Wallet">Wallet source</a>
<a href="https://contractless.dev/contractless/Contractless-Faucet">Faucet source</a>
<a class="download-wallet" href="https://contractless.dev/contractless/Contractless-GUI-Wallet/releases">Download wallet</a>
</nav>
</header>
<main>
<section class="faucet-stage">
<div class="signal-field" aria-hidden="true">
<div class="signal signal-a"></div>
<div class="signal signal-b"></div>
<div class="signal signal-c"></div>
<div class="signal-core">
<img src="contractless-logo.png" alt="">
</div>
<span class="coordinate coordinate-a">40.7128 / -74.0060</span>
<span id="network-coordinate" class="coordinate coordinate-b">TESTNET / 25 CLTC</span>
</div>
<div class="faucet-copy">
<p class="eyebrow"><span></span> Public <b id="eyebrow-network">testnet</b> utility</p>
<h1>Put the network<br>in your wallet.</h1>
<p class="intro">
Request <span id="intro-amount">25 CLTC</span> <span id="intro-network">testnet</span>
coins for transactions, storage, swaps,
loans, NFTs, and everything else worth testing.
</p>
</div>
<div class="request-panel">
<div class="panel-index" aria-hidden="true">01</div>
<div class="panel-heading">
<p>Faucet request</p>
<div id="faucet-status" class="status"><i></i> Checking</div>
</div>
<form id="faucet-form">
<label for="wallet-address">Registered wallet or vanity address</label>
<div class="address-control">
<input
id="wallet-address"
name="wallet-address"
type="text"
autocomplete="off"
spellcheck="false"
placeholder="0000000000000000000000000000000000000000.cltc"
aria-describedby="address-note"
>
<span id="input-symbol" class="input-marker" aria-hidden="true">CLTC</span>
</div>
<p id="address-note" class="field-note">The wallet or vanity address must already be registered on testnet.</p>
<button type="submit" class="request-button">
<span id="request-label">Request 25 CLTC</span>
<b aria-hidden="true">&rarr;</b>
</button>
</form>
<div id="form-message" class="form-message" role="status" aria-live="polite"></div>
<div class="request-rules">
<div><strong id="rule-amount">25</strong><span id="rule-symbol">CLTC per request</span></div>
<div><strong>24H</strong><span>between claims</span></div>
<div><strong>0</strong><span>real-world value</span></div>
</div>
</div>
</section>
<section class="faucet-support" aria-label="Support the faucet">
<div>
<span>Keep the faucet alive</span>
<strong id="tip-label">Send CLTC tips to:</strong>
</div>
<code id="faucet-address">0000000000000000000000000000000000000000.cltc</code>
<button id="copy-address" type="button">Copy address</button>
</section>
<section class="network-strip" aria-label="Faucet statistics">
<p><span>Total coins in faucet address</span><strong id="faucet-balance">-- CLTC</strong></p>
<p><span>Total coins claimed</span><strong id="total-claimed">0.00000000 CLTC</strong></p>
<p><span>Total addresses claimed</span><strong id="total-addresses">0</strong></p>
</section>
<section class="lower-band">
<div>
<p class="section-number">02 / USE IT</p>
<h2>Test freely.<br>Break things carefully.</h2>
</div>
<p>
<span id="lower-network">Testnet</span> coins are made for experimentation. Create transactions,
explore the wallet, run a node, and help expose problems before
Contractless reaches mainnet.
</p>
<a href="https://contractless.dev/contractless/Contractless/releases">
Run a testnet node <span>&nearr;</span>
</a>
</section>
</main>
<footer>
<span>CONTRACTLESS / FAIR PROOF OF WORK</span>
<span id="footer-network">TESTNET COINS HAVE NO MONETARY VALUE</span>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>