neroswap/app/templates/index.html

120 lines
4.3 KiB
HTML

<!DOCTYPE HTML>
<html>
{% include 'includes/head.html' %}
<body class="is-preload landing">
<div id="page-wrapper">
<header id="header">
<h1 id="logo"><a href="/">{{ config.SITE_NAME }}</a></h1>
<nav id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/#search" class="button primary">Search</a></li>
</ul>
</nav>
</header>
<section id="banner">
<div class="content">
<header>
<h2>*nero Swap</h2>
<p>Swap between Wownero and Monero<br />
anonymously, quickly, and hassle-free.</p>
</header>
<span class="image"><img src="/static/images/monero-logo.png" alt="" id="logos"/></span>
</div>
<a href="#swap" class="goto-next scrolly">Next</a>
</section>
<section id="swap" class="wrapper style2 special fade">
<div class="container">
<header>
<h2>Start a Swap</h2>
<p></p>
<p class="small">
{{ config.SWAP_FEE_PERCENT }}% fee,
${{ config.SWAP_MIN_USD }} minimum,
${{ config.SWAP_MAX_USD }} maximum.
</p>
<p class="smalls">
Swaps may take some time to complete if wallet balances are low as I will need to refill them.
<br />Please use with caution and only provide wallet addresses you own.
</p>
</header>
<!-- todo - secure forms with csrf protection -->
<form method="get" action="/swap" class="cta" id="swapform">
<div class="row gtr-uniform gtr-50">
<div class="col-5 col-5-xsmall">
<label for="amount"><img src="/static/images/wownero-logo.png" width=100 id="swap_source_logo"><br />Enter amount to swap</label>
<input type="text" name="send_amount" id="send_amount" placeholder="..." />
</div>
<div class="col-2 col-2-xsmall">
<i class="fa fa-exchange-alt fa-4x white swap-arrows" id="switch_source_dest"></i>
<i class="fa fa-circle-notch fa-2x fa-spin loading hidden"></i>
</div>
<div class="col-5 col-5-xsmall">
<label for="amount"><img src="/static/images/monero-logo.png" width=100 id="swap_destination_logo"><br />View amount to receive</label>
<input type="text" name="receive_amount" disabled id="receive_amount" />
</div>
<div class="col-12 col-12-xsmall">
<input type="text" name="wow_address" placeholder="WOW Wallet Address" />
</div>
<div class="col-12 col-12-xsmall">
<input type="text" name="xmr_address" placeholder="XMR Wallet Address" />
</div>
<div class="col-12 col-12-xsmall">
<input type="submit" value="Start Swap" class="fit primary" />
</div>
<input type="hidden" name="wow_to_xmr" id="wow_to_xmr" value="true" />
<div class="col-12 col-12-xsmall">
<p>
Need a wallet?
<a href="https://wownero.org/#wallets" target=_blank class="white">WOW</a> -
<a href="https://www.getmonero.org/downloads/" target=_blank class="white">XMR</a>
</p>
</div>
</div>
</form>
<div class="col-12 col-12-xsmall">
<p class="small" id="total">Swap value: ?</p>
<p class="small" id="service_fee">Service fee: ?</p>
<p class="small" id="wow_price">WOW price: ?</p>
<p class="small" id="xmr_price">XMR price: ?</p>
</div>
</div>
</section>
<section id="search" class="wrapper style1 special fade-down">
<div class="container">
<header class="major">
<h2>Search a Swap</h2>
<p>Already started a swap and want to check on it?<br /> Look it up using the form below.</p>
</header>
<div class="box alt">
<div class="row gtr-uniform">
<form method="get" action="/search" class="cta">
<div class="row gtr-uniform gtr-50">
<div class="col-8 col-8-xsmall">
<input type="text" name="swap_id" placeholder="Swap ID" />
</div>
<div class="col-4 col-4-xsmall">
<input type="submit" value="Search" class="fit primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</section>
{% include 'includes/footer.html' %}
</div>
{% include 'includes/scripts.html' %}
</body>
</html>