705 lines
40 KiB
HTML
705 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<title>BarterDEX-Simple - v0.6.4-beta2</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
|
|
<link href="css/fuelux.min.css" type="text/css" rel="stylesheet">
|
|
<link href="css/bootstrap-panelnavtabs.css" type="text/css" rel="stylesheet">
|
|
<link href="css/bootstrap-select.min.css" type="text/css" rel="stylesheet">
|
|
<link href="css/toastr.min.css" type="text/css" rel="stylesheet">
|
|
<link href="js/amcharts/plugins/export/export.css" type="text/css" rel="stylesheet" media="all" />
|
|
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
|
<link href="css/bootstrap-slider.min.css" rel="stylesheet">
|
|
<link href="css/custom.css" type="text/css" rel="stylesheet">
|
|
<link href="css/spinner.css" type="text/css" rel="stylesheet">
|
|
<link href="js/fa/css/font-awesome.min.css" type="text/css" rel="stylesheet">
|
|
|
|
<style type="text/css">
|
|
.table-fixed thead {
|
|
width: 97%;
|
|
}
|
|
.table-fixed tbody {
|
|
height: 230px;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
|
|
display: block;
|
|
}
|
|
.table-fixed tbody td, .table-fixed thead > tr> th {
|
|
float: left;
|
|
border-bottom-width: 0;
|
|
}
|
|
</style>
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script>
|
|
if (typeof module === 'object') {
|
|
window.module = module;
|
|
module = undefined;
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
if (window.module)
|
|
module = window.module;
|
|
const templates = {};
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- LOGIN BODY -->
|
|
<div class="loginbody">
|
|
<div class="container">
|
|
<form class="form-signin">
|
|
<h3 class="form-signin-heading" style="text-align: center;">Welcome to BarterDEX</h3>
|
|
<h4 style="text-align: center;">Please Login</h4>
|
|
|
|
<label for="loginPassphrase" class="sr-only">Passphrase</label>
|
|
<!--<div class="input-group col-sm-12">
|
|
<input type="password" id="loginPassphrase" class="form-control loginPassphrase" placeholder="Passphrase" required>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-grey btn_login_show_passphrase" style="height: 44px; margin-bottom: 10px;"><span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
|
|
</span>
|
|
</div>-->
|
|
<input type="password" id="loginPassphrase" class="form-control loginPassphrase" placeholder="Passphrase" required>
|
|
<button class="btn btn-lg btn-primary btn-block login-btn" type="submit">Login</button>
|
|
<button class="btn btn-lg btn-default btn-block login-genpass-btn">Generate a New Passphrase</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- LOGIN BODY END -->
|
|
|
|
<!-- LOADING BODY -->
|
|
<div class="loadingbody" style="display: none;">
|
|
<div class="spinner">
|
|
<div class="dot1"></div>
|
|
<div class="dot2"></div>
|
|
</div>
|
|
<h3 style="text-align: center;font-weight: lighter;">Starting BarterDEX. Please wait...</h3>
|
|
</div>
|
|
<!-- LOADING BODY END -->
|
|
|
|
|
|
<!-- MAIN BODY -->
|
|
<div class="mainbody" style="display: none;">
|
|
|
|
<!-- Section: Navigation Menu -->
|
|
<nav class="navbar navbar-default" role="navigation">
|
|
<div class="container">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<div class="navbar-brand navbar-brand-centered">BarterDEX</div>
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="navbar-brand-centered">
|
|
<ul class="nav navbar-nav">
|
|
<!--<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>-->
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<!--<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>-->
|
|
<a href="javascript:void(0)" class="btn btn-danger dexlogout-btn" style="margin: 8px 8px 0 0;">Logout</a>
|
|
<a href="javascript:void(0)" class="btn btn-danger dexdebug-close-btn" style="margin: 8px 8px 0 0; display: none">Close</a>
|
|
<a href="javascript:void(0)" class="btn btn-info dexdebug-btn" style="margin: 8px 8px 0 0;">Debug</a>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
<!-- Section: Navigation Menu END -->
|
|
|
|
<div class="dexdebug" style="display: none">
|
|
<h4>Payload</h4>
|
|
<textarea cols="50" rows="5" id="debug-payload" placeholder="Provide payload"></textarea>
|
|
<button class="btn btn-primary" id="debug-exec">Execute</button>
|
|
<hr />
|
|
<h4>Response</h4>
|
|
<div id="debug-payload-response"></div>
|
|
</div>
|
|
|
|
<div class="screen-portfolio">
|
|
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Portfolio Chart</h3>
|
|
<button class="btn btn-xs btn-refreshportfolio portfolio" style="float: right; margin-right: 3px; margin-top: -20px"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
|
|
</div>
|
|
<div class="portfolio portfolio-coinslist"> <!-- panel-body -->
|
|
<div class="col-sm-12" id="portfolio_chart_current" style="height: 300px;"></div>
|
|
<div class="col-sm-12" id="portfolio_chart_target" style="height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Portfolio Coins</h3>
|
|
<button class="btn btn-xs btn-info btn-activatecoins portfolio" style="float: right; margin-right: 3px; margin-top: -20px">ADD COINS <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
|
|
</div>
|
|
<div class="portfolio portfolio-coinslist" style="max-height: 675px;"> <!-- panel-body -->
|
|
<table class="table table-striped porfolio_coins_list" style="margin-bottom: 0;">
|
|
<thead>
|
|
<tr>
|
|
<th>Coin</th>
|
|
<th>Balance</th>
|
|
<th>Price</th>
|
|
<th>KMD Value</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<th><div style="text-align: center;">Loading...</div></th>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--<div class="col-sm-6" style="display: none;">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" style="display: none;">
|
|
<h3 class="panel-title">Bitcoin</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div style="text-align: center;">
|
|
<img src="img/cryptologo/btc.png"/>
|
|
<div><span class="balance pair-one" style="font-size: 55px; font-weight: 100"></span><span class="coin pair-one" style="font-size: 35px; font-weight: 100"></span></div>
|
|
<div class="pair-one pair-address" data-coin="COIN" data-pair="one" style="font-size: 15px;"></div>
|
|
<button type="button" class="btn btn-default pair-one btn-send" data-coin="COIN" data-pair="one" style="text-transform: uppercase; border: 2px solid #eb973d; width: 100px; margin: 5px;">Send</button>
|
|
<button type="button" class="btn btn-default pair-one btn-receive" data-coin="COIN" data-pair="one" style="text-transform: uppercase; border: 2px solid #eb973d; width: 100px; margin: 5px;">Receive</button>
|
|
<button type="button" class="btn btn-default pair-one btn-exchange" data-coin="COIN" data-pair="one" style="text-transform: uppercase; border: 2px solid #eb973d; width: 120px; margin: 5px;">Auto Trade</button>
|
|
<button type="button" class="btn btn-default pair-one btn-inventory" data-coin="COIN" data-pair="one" data-addr="ADDR" style="text-transform: uppercase; border: 2px solid #eb973d; width: 100px; margin: 5px;">Inventory</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<input class="toggle_checkbox mode-option pair-one" id="toggle_pair_one" type="checkbox" checked data-toggle="toggle" data-on="Native" data-off="Electrum" data-onstyle="grey" data-offstyle="info" data-width="100px" data-coin="COIN" disabled>
|
|
<button type="button" class="btn btn-default pair-one btn-enable" data-coin="COIN" data-pair="one" data-method="enable" style="text-transform: uppercase; border: 2px solid #eb973d; width: 100px; margin: 5px;">Enable</button>
|
|
<button type="button" class="btn btn-default pair-one btn-disable" data-coin="COIN" data-pair="one" data-method="disable" style="text-transform: uppercase; border: 2px solid #eb973d; width: 100px; margin: 5px;">Disable</button>
|
|
<div style="float: right; text-align: right;"><b>Height:</b> <span class="pair-one pair-height" data-coin="COIN" data-pair="one">-</span><br><b>KMD Value:</b> <span class="pair-one pair-kmdvalue" data-coin="COIN" data-pair="one">-</span> KMD</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
</div>
|
|
|
|
<div class="screen-addcoins" style="display: none;">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Add Coins</h3>
|
|
<button class="btn btn-xs btn-addcoinsclose addcoins" style="float: right; margin: -20px -5px;">BACK</button>
|
|
<button class="btn btn-xs btn-addcoinsrefresh addcoins" style="float: right; margin: -20px 45px;"><span class="glyphicon glyphicon-refresh"></span></button>
|
|
</div>
|
|
<div class=""> <!-- panel-body -->
|
|
<table class="table table-striped addcoins_tbl" style="margin-bottom: 0;">
|
|
<thead>
|
|
<tr><th>Coin</th><th>Total Balance</th><th>Deposit Address</th><th>Status</th><th>txfee</th><th>Electrum</th><th>Actions</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="7"><div style="text-align: center;">Loading...</div></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen-coindashboard" style="display: none;">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title coindashboard coindashboard-title"></h3>
|
|
<button class="btn btn-xs coindashboard btn_coindashboard_back" data-coin="COIN" style="float: right; margin-right: 3px; margin-top: -20px">BACK</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div style="text-align: center;">
|
|
<img class="coindashboard coindashboard-coinicon" src="img/cryptologo/kmd.png"/>
|
|
<div><span class="coindashboard coindashboard-balance" style="font-size: 55px; font-weight: 100"></span> <span class="coindashboard coindashboard-coin" style="font-size: 35px; font-weight: 100"></span></div>
|
|
<div class="coindashboard coindashboard-address" data-coin="COIN"></div>
|
|
<button type="button" class="btn btn-default btn_coindashboard_send coindashboard" data-coin="COIN" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 100px; margin: 5px;">Send</button>
|
|
<button type="button" class="btn btn-default btn_coindashboard_receive coindashboard" data-coin="COIN" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 100px; margin: 5px;">Receive</button>
|
|
<button type="button" class="btn btn-default btn_coindashboard_exchange coindashboard" data-coin="COIN" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 120px; margin: 5px;">Auto Trade</button>
|
|
<button type="button" class="btn btn-default btn_coindashboard_inventory coindashboard" data-coin="COIN" data-addr="ADDR" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 100px; margin: 5px;">Inventory</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<input class="toggle_checkbox" id="coindashboard-toggle coindashboard" type="checkbox" checked data-toggle="toggle" data-on="Native" data-off="Electrum" data-onstyle="grey" data-offstyle="info" data-width="100px" data-coin="COIN" disabled>
|
|
<button type="button" class="btn btn-default btn_coindashboard_enable coindashboard" data-coin="COIN" data-method="enable" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 100px; margin: 5px;">Enable</button>
|
|
<button type="button" class="btn btn-default btn_coindashboard_disable coindashboard" data-coin="COIN" data-method="disable" style="text-transform: uppercase; border: 2px solid #1b8a6b; width: 100px; margin: 5px;">Disable</button>
|
|
<div style="float: right; text-align: right;"><b>Height:</b> <span class="coindashboard-height coindashboard" data-coin="COIN">-</span><br><b>KMD Value:</b> <span class="coindashboard-kmdvalue coindashboard" data-coin="COIN">-</span> KMD</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen-sendcoin" style="display: none;">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title sendcoin-title" data-coin="COIN">Send</h3><button class="btn btn-xs btn-sendcoinclose" style="float: right; margin-top: -20px;"><span class="glyphicon glyphicon-remove"></span></button>
|
|
</div>
|
|
<div class="panel-body">
|
|
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<label for="send-toaddr" class="col-sm-2 control-label">To</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="send-toaddr" placeholder="Address">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="send-amount" class="col-sm-2 control-label">Amount</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="send-amount" placeholder="e.g. 0.01">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<button type="submit" class="btn btn-default btn-sendcoin">Send</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="panel-footer" style="display: none;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen-inventory" style="display: none;">
|
|
<div class="col-sm-12">
|
|
<p>This screen shows you option to manage your coin's inventory. What is coin inventory?</p>
|
|
<p>Every crypto currency wallet is very much like your regular physical wallet. Just like in your physical wallet if you have different currency notes and coins available, that means they are not spent. You can spend them. If you use the same analogy in crypto currency, these unspent notes and coins can be referred as <b><i>unspent transactions.</i></b> In tiny bit technical term it's called <b>U</b>nspent <b>T</b>ransaction <b>O</b>utput, in short <b>UTXO</b>.</p>
|
|
<p>The decentralised Exchange doesn't run on total balance of your crypto currency wallet. It needs small unspent transactions. So, if you have sent a big transaction to your BarterDEX smart address, you can use this screen to split your balance to number of small UTXOs.</p>
|
|
<p>By clicking <i>Make Inventory</i> button, it will split your smart address balance to number of UTXOs and send them back to your smart address. It will cost regular transaction fee to split your smart address balance.</p>
|
|
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title inventory-title coininventory" data-coin="COIN">Manage Inventory</h3>
|
|
<button class="btn btn-xs btn-inventoryclose coininventory" data-coin="COIN" style="float: right; margin-right: 3px; margin-top: -20px">BACK</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<div class="col-sm-1">
|
|
<span id="inventory-slider1inputlabel">Balance</span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<input type="number" class="form-control" id="inventory_slider_input1">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input id="inventory-slider1" type="text" class="col-sm-8 form-control" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="4"/>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider1CurrentValLabel">No. of deposit: <span id="inventory-slider1Val" style="font-weight: bold;">4</span></span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider1CurrentTotalLabel">Total: <span id="inventory-slider1Total" style="font-weight: bold;"></span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-1">
|
|
<span id="inventory-slider2inputlabel">Balance</span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<input type="number" class="form-control" id="inventory_slider_input2">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input id="inventory-slider2" type="text" class="col-sm-8 form-control" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="8"/>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider2CurrentValLabel">No. of deposit: <span id="inventory-slider2Val" style="font-weight: bold;">8</span></span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider2CurrentTotalLabel">Total: <span id="inventory-slider2Total" style="font-weight: bold;"></span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-1">
|
|
<span id="inventory-slider3inputlabel">Balance</span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<input type="number" class="form-control" id="inventory_slider_input3">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input id="inventory-slider3" type="text" class="col-sm-8 form-control" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="4"/>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider3CurrentValLabel">No. of deposit: <span id="inventory-slider3Val" style="font-weight: bold;">4</span></span>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<span id="inventory-slider3CurrentTotalLabel">Total: <span id="inventory-slider3Total" style="font-weight: bold;"></span></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-9 col-sm-3">
|
|
<span style="font-weight: 300; font-size: 25px;">Total <span class="inventory-sliderTotal" style="font-weight: 300; font-size: 25px;"></span><span class="coininventory inventory-sliderTotalCoin"></span></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="" style="text-align: center;">
|
|
<button class="btn btn-primary coininventory btn-makeinventory" data-coin="COIN" coin-pair="NONE">Make Inventory</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="panel-footer" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<div class="panel with-nav-tabs panel-default">
|
|
<div class="panel-heading">
|
|
<!--<button class="btn btn-default btn-sm backto_dex_balances" style="float: right; font-size: 13px; padding: 8px 8px;">Back</button>-->
|
|
<button class="btn btn-xs btn-inventoryclose coininventory" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;">BACK</button>
|
|
<button class="btn btn-xs btn-inventoryrefresh coininventory" style="float: right; margin: 6px 6px 0px 3px;" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button>
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#AliceInventory" data-toggle="tab">Inventory</a></li>
|
|
<li><a href="#ListUnspents" data-toggle="tab">List Unspents</a></li>
|
|
<li><a href="#RawJSONInventory" data-toggle="tab">Raw JSON</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class=""> <!-- panel-body -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade in active" id="AliceInventory">
|
|
<table class="table table-striped dex_showinv_alice_tbl" style="margin-bottom: 0;">
|
|
<tbody>
|
|
<th><div style="text-align: center;">Loading...</div></th>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="ListUnspents">
|
|
<table class="table table-striped dex_showlist_unspents_tbl" style="margin-bottom: 0;">
|
|
<tbody>
|
|
<th><div style="text-align: center;">Loading...</div></th>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="RawJSONInventory">
|
|
<pre class="RawJSONInventory-output" style="margin: 0px;"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen-exchange" style="display: none;">
|
|
|
|
<div class="col-sm-6">
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
|
<div class="panel with-nav-tabs panel-default">
|
|
<div class="panel-heading">
|
|
<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px; display: none;">BACK</button>
|
|
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#exchange_coin_asks" data-toggle="tab">ASKS: <span class="orderbook_numasks"></span></a></li>
|
|
<li><a href="#exchange_coin_bids" data-toggle="tab">BIDS: <span class="orderbook_numbids"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class=""> <!-- panel-body -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade in active" id="exchange_coin_asks">
|
|
|
|
<table class="table table-striped orderbook_asks fixed_headers" width="100%" style="margin-bottom: 0;">
|
|
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
|
|
<!--<th>Size(Min-Max <span class="orderbook_base_coin"></span>)</th>
|
|
<th>Size(Min-Max <span class="orderbook_rel_coin"></span>)</th>
|
|
<th>Sum(<span class="orderbook_rel_coin"></span>)</th>-->
|
|
<th>Trader Pubkey</th>
|
|
<th>Age</th>
|
|
<!--<th>UTXOs</th>-->
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<svg id="orderbook-asks-spinner">
|
|
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
</svg>
|
|
</div>
|
|
<div class="tab-pane fade" id="exchange_coin_bids">
|
|
|
|
<table class="table table-striped orderbook_bids" width="100%" style="margin-bottom: 0;">
|
|
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
|
|
<!--<th>Min <span class="orderbook_rel_coin"></span></th>
|
|
<th>Max <span class="orderbook_rel_coin"></span></th>-->
|
|
<th>Trader Pubkey</th>
|
|
<th>Age</th>
|
|
<!--<th>UTXOs</th></thead>-->
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title"><strong>Trade Status</strong></h3>
|
|
<button class="btn btn-xs btn-swapstatusrefresh coinexchange" data-coin="COIN" style="float: right; margin: -20px -8px 0px 0px"><span class="glyphicon glyphicon-refresh"></span></button>
|
|
</div>
|
|
<div class="exchange_trade_status_body"> <!-- panel-body -->
|
|
<table class="table table-striped exchange_swap_status_tbl fixed_headers" width="100%" style="margin-bottom: 0;">
|
|
<thead>
|
|
<th>Status</th>
|
|
<th>Quote ID</th>
|
|
<th>Request ID</th>
|
|
<th>Action</th>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<svg id="exchange-swap-status-spinner">
|
|
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title"><strong>Trading Pair</strong></h3>
|
|
<button class="btn btn-xs btn-refreshtrading_pair coinexchange" data-coin="COIN" style="float: right; margin: -20px -8px;"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
|
|
</div>
|
|
<div class="panel-body"> <!-- panel-body -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="form-group" style="display: none;">
|
|
<div class="btn-group btn-group-justified colors" data-toggle="buttons">
|
|
<label class="btn btn-lg btn-info active">
|
|
<input type="radio" name="trading_pair_options" id="trading_pair_options" value="buying" autocomplete="off" checked> BUYING <span class="coin_ticker"></span></label>
|
|
<label class="btn btn-lg btn-info">
|
|
<input type="radio" name="trading_pair_options" id="trading_pair_options" value="selling" autocomplete="off"> SELLING <span class="coin_ticker"></span></label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="display: none;">
|
|
<div class="btn-group btn-group-justified colors" data-toggle="buttons">
|
|
<label class="btn btn-lg btn-warning active">
|
|
<input type="radio" name="trading_mode_options" id="trading_mode_options_tradebot" value="tradebot" autocomplete="off"> TRADE BOT</label>
|
|
<label class="btn btn-lg btn-warning">
|
|
<input type="radio" name="trading_mode_options" id="trading_mode_options_trademanual" value="trademanual" autocomplete="off"> MANUAL TRADING</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<span style="float: left; font-size: 18px;"><span class="trading_pair_lable_text_one">Max</span> Price to <span class="trading_pair_lable_text_two">Buy</span></span>
|
|
</div>
|
|
<div class="input-group col-sm-12">
|
|
<select class="selectpicker trading_pair_coin" data-live-search="true" data-hide-disabled="true" data-width="30%"></select>
|
|
<input type="number" class="form-control trading_pair_coin_price" placeholder="Price e.g. 0.01" style="height: 64px; font-size: 20px;">
|
|
<span class="input-group-addon" id="trading_pair_coin_price_max_min" style="font-size: 20px;">Max</span>
|
|
</div>
|
|
|
|
<div class="form-group trading_selected_trader_label" style="margin-top: 15px; margin-bottom: 0px;">
|
|
<span style="font-size: 18px;">Trade with selected trader only (optional)</span>
|
|
</div>
|
|
<div class="input-group col-sm-12 trading_selected_trader">
|
|
<span class="input-group-addon">
|
|
<input class="big-checkbox trading_pair_destpubkey_yesno" type="checkbox"> Yes
|
|
</span>
|
|
<input type="text" class="form-control trading_pair_destpubkey" placeholder="eg. bab6ad2eebe1e666369cab504d4622b22c1f1ef718ef388e88020f30a1573e01" style="height: 64px; font-size: 20px;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 15px; margin-bottom: 0px;">
|
|
<span style="font-size: 18px;"><span>Max</span> Amount to <span class="trading_pair_lable_text_two">Buy</span></span>
|
|
</div>
|
|
<div class="input-group col-sm-12">
|
|
<span class="input-group-addon coin_ticker" id="trading_pair_coin_ticker" style="font-size: 20px;"></span>
|
|
<input type="number" class="form-control trading_pair_coin_volume" placeholder="Amount e.g. 12.5" style="height: 64px; font-size: 20px;">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary btn-bot_action" data-action="buy" style="height: 64px; font-size: 20px;">BUY</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="input-group col-sm-12">
|
|
<span class="input-group-addon" style="font-size: 30px; font-weight: 200; border: 0; background-color: #fff;">It'll cost you</span>
|
|
<span class="input-group-addon" style="font-size: 40px; font-weight: 100; border: 0; background-color: #fff;"><span class="relvol_basevol">0</span> <span class="relvol_basevol_coin" style="font-size: 25px; background-color: #fff; font-weight: 100;"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title"><strong>Your Balance</strong></h3>
|
|
<!--<button class="btn btn-xs btn-info btn-activatecoins portfolio" style="float: right; margin: -20px -8px;">ADD COINS <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>-->
|
|
<button class="btn btn-xs btn-trading_coin_balance_refresh coinexchange" data-coin="COIN" style="float: right; margin: -20px -8px"><span class="glyphicon glyphicon-refresh"></span></button>
|
|
</div>
|
|
<div> <!-- panel-body -->
|
|
<svg id="balance-spinner">
|
|
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
|
|
</svg>
|
|
<div class="balance-block">
|
|
<div class="input-group col-sm-12 your_coins_balance_info">
|
|
<span class="input-group-addon trading_sellcoin_ticker_name" style="font-size: 20px; text-align: left; background-color: #fff; border-radius: 0px;"></span>
|
|
<span class="input-group-addon trading_sellcoin_balance" style="font-size: 220%; font-weight: 100; text-align: right; background-color: #fff; border-radius: 0px;"></span>
|
|
</div>
|
|
<div class="input-group col-sm-12 your_coins_balance_info">
|
|
<span class="input-group-addon trading_coin_ticker_name" style="font-size: 20px; text-align: left; background-color: #fff; border-radius: 0px;"></span>
|
|
<span class="input-group-addon trading_coin_balance" style="font-size: 220%; font-weight: 100; text-align: right; background-color: #fff; border-radius: 0px;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-12">
|
|
<div class="panel with-nav-tabs panel-default">
|
|
<div class="panel-heading">
|
|
<!--<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;">BACK</button>
|
|
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>-->
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#exchange_myorders" data-toggle="tab">My Orders <button class="btn btn-xs btn-myordersrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
|
|
<li><a href="#exchange_botlist" data-toggle="tab">Auto Traders List <button class="btn btn-xs btn-botlistrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class=""> <!-- panel-body -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade in active" id="exchange_myorders">
|
|
|
|
<table class="table table-striped exchange_my_orders_tbl" style="margin-bottom: 0;">
|
|
<thead>
|
|
<th>Base</th>
|
|
<th>Rel</th>
|
|
<th>Bid</th>
|
|
<th>Ask</th>
|
|
</thead>
|
|
<tbody>
|
|
<th><div style="text-align: center;">Loading...</div></th>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="tab-pane fade" id="exchange_botlist">
|
|
|
|
<table class="table exchange_bot_list_tbl" width="100%" style="margin-bottom: 0;">
|
|
<thead>
|
|
<!--<th>Bot ID</th>-->
|
|
<th>TradeBot Info</th>
|
|
<!--<th>Bot Action</th>-->
|
|
<!--<th>Price</th>
|
|
<th>Max Volume</th>-->
|
|
<th>Progress Info</th>
|
|
<th>Actions</th>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- MAIN BODY END-->
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var ipc = require('electron').ipcRenderer;
|
|
if (typeof module === 'object') {
|
|
window.module = module; module = undefined;
|
|
}
|
|
</script>
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="js/jquery.min.js" type="text/javascript"></script>
|
|
<script src="js/coin_select_options.js" type="text/javascript"></script>
|
|
<script src="js/coin_names.js" type="text/javascript"></script>
|
|
<script src="js/ipc-actions.js" type="text/javascript"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="js/bootstrap.min.js" type="text/javascript"></script>
|
|
<script src="js/fuelux.min.js" type="text/javascript"></script>
|
|
<script src="js/bootstrap-select.min.js" type="text/javascript"></script>
|
|
<script src="js/qrcode.min.js" type="text/javascript"></script>
|
|
<script src="js/toastr.min.js" type="text/javascript"></script>
|
|
<script src="js/bootstrap-toggle.min.js" type="text/javascript"></script>
|
|
<script src="js/bootbox.min.js" type="text/javascript"></script>
|
|
<script src="js/clipboard.min.js" type="text/javascript"></script>
|
|
<script src="js/bootstrap-slider.min.js" type="text/javascript"></script>
|
|
<script src="js/number-polyfill.min.js" type="text/javascript"></script>
|
|
<script src="js/underscore-min.js" type="text/javascript"></script>
|
|
<script src="js/moment.min.js" type="text/javascript"></script>
|
|
<script src="js/countdown.min.js" type="text/javascript"></script>
|
|
<!-- Crypto Dependencies -->
|
|
<script src="js/wordlist.js" type="text/javascript"></script>
|
|
<script src="js/passphrasegenerator.js" type="text/javascript"></script>
|
|
<script src="js/seedrandom.js" type="text/javascript"></script>
|
|
<!-- amcharts libs -->
|
|
<script src="js/amcharts/amcharts.js" type="text/javascript"></script>
|
|
<script src="js/amcharts/pie.js" type="text/javascript"></script>
|
|
<script src="js/amcharts/plugins/animate/animate.min.js" type="text/javascript"></script>
|
|
<script src="js/amcharts/plugins/export/export.min.js" type="text/javascript"></script>
|
|
<script src="js/amcharts/plugins/responsive/responsive.min.js" type="text/javascript"></script>
|
|
<script src="js/amcharts/themes/light.js" type="text/javascript"></script>
|
|
<!-- custom dex actions javascript -->
|
|
<!--<script src="js/dexactions.js" type="text/javascript"></script>-->
|
|
<script src="js/simpledexactions.js" type="text/javascript"></script>
|
|
<script src="js/electrum_list.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |