BarterDEX/gui/index.html

1107 lines
55 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 GUI</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">
<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">
<h2 class="form-signin-heading" style="text-align: center;">Welcome to BarterDEX</h2>
<h4 style="text-align: center;">Please Login</h4>
<label for="loginPassphrase" class="sr-only">Passphrase</label>
<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>
</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>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Section: Navigation Menu END -->
<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" data-coin="COIN" 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-activatecoins portfolio" data-coin="COIN" style="float: right; margin-right: 3px; margin-top: -20px"><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-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>Evey crypto currency wallet is very much like your regular phisical 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 transctions. So, if you have sent a big transction 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 UTOXs: <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 UTOXs: <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 UTOXs: <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;">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" width="100%" style="margin-bottom: 0;">
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
<th>Min <span class="orderbook_base_coin"></span></th>
<th>Max <span class="orderbook_base_coin"></span></th>
<th>Age</th>
<th>UTXOs</th></thead>
<tbody></tbody>
</table>
</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_base_coin"></span></th>
<th>Max <span class="orderbook_base_coin"></span></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" width="100%" style="margin-bottom: 0;">
<thead>
<th>Status</th>
<th>Quote ID</th>
<th>Request ID</th>
<th>Action</th>
</thead>
<tbody>
<th><div style="text-align: center;">Loading...</div></th>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<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">
<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">
<span style="float: right; 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" 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>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Your Balance</strong></h3>
<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 class=""> <!-- panel-body -->
<div class="input-group col-sm-12">
<span class="input-group-addon trading_coin_ticker_name" style="font-size: 30px;"></span>
<span class="input-group-addon trading_coin_balance" style="font-size: 55px; font-weight: 100;"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<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 table-striped exchange_bot_list_tbl" width="100%" style="margin-bottom: 0;">
<thead>
<!--<th>Bot ID</th>-->
<th>Name</th>
<th>Bot Action</th>
<th>Price</th>
<th>Max Volume</th>
<th>Trades Done</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MAIN BODY END-->
<!-- MAIN BODY OLD-->
<div class="mainbody-old" style="display: none;">
<!-- Section: Navigation Menu -->
<nav class="navbar navbar-default navbar-fixed-top navmenu_top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">BarterDEX</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dexnav-collapse">
<ul class="nav navbar-nav dexnav_top_l">
<li class="active"><a href="javascript:void(0)" class="dexnav_exchange">Exchange</a></li>
<li><a href="javascript:void(0)" class="dexnav_portfolio">Portfolio</a></li>
<li><a href="javascript:void(0)" class="dexnav_balances">Balances</a></li>
<li><a href="javascript:void(0)" class="dexnav_myprices">My Prices</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a href="javascript:void(0)" class="btn btn-danger dexlogout-btn" style="margin: 8px 8px 0 0;">Logout</a>
<!--<li><span style="padding: 15px; position: relative; display: block;">BarterDEX - Ugly GUI</span></li>-->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Section: Navigation Menu END -->
<h3 style="text-align: center; margin-top: 60px;">BarterDEX - Ugly GUI</h3>
<!-- Section: Exchange -->
<div class="container-fluid section section-exchange">
<div class="row"><h1 style="text-align: center; font-weight: 200">EXCHANGE</h1></div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading"><strong>Trading Pair</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-5">
<h3 style="margin-top: 0; text-align: center;">Deposit</h3>
<select class="selectpicker sell_coin" data-live-search="true" data-hide-disabled="true" data-width="100%">
</select>
</div>
<div class="col-sm-2" style="margin-top: 50px; text-align: center;">
<!--<a role="button" class="switch_buy_sell_pairs">-->
<span class="glyphicon glyphicon-transfer" style="font-size: 40px;"></span>
<!--</a>-->
</div>
<div class="col-sm-5">
<h3 style="margin-top: 0; text-align: center;">Receive</h3>
<select class="selectpicker buy_coin" data-live-search="true" data-hide-disabled="true" data-width="100%">
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading"><strong>Esitmate Swap Price Calculation</strong><button class="btn btn-default btn-sm refresh_estimate_price" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="">
<table class="table table-striped" style="margin-bottom: 0;">
<tr><td class="coin_swap_rate_info" style="font-size: 22px; text-align: center;"><div class="coin_swap_rate_info1"></div><div class="coin_swap_rate_info2"></div></td></tr>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">BUY <span class="autotrade_buy_coin"></span><!--<button class="btn btn-sm btn-default">Refresh Coins List</button>--><button class="btn btn-default btn-sm refresh_inv_table" style="float: right; font-size: 13px; padding: 0 5px;" data-coin="COIN" disabled>Refresh Inventory</button> <span style="float: right; font-size: 13px; padding: 0 5px;">Max Amount: <b><span class="autotrade_max_amount"></span> <span class="autotrade_max_amount_coin"></span></b></span></div>
<div class="panel-body">
<div class="form-group">
<label for="buy_amount">Amount</label>
<input type="text" class="form-control" id="buy_amount" placeholder="Amount">
</div>
<div class="form-group">
<label for="buy_price">Price</label>
<input type="text" class="form-control" id="buy_price" placeholder="Price">
</div>
<button class="btn btn-default buy_coin_btn">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">SELL <span class="lp_sell_coin"></span><!--<button class="btn btn-sm btn-default">Refresh Coins List</button>--></div>
<div class="panel-body">
<div class="form-group">
<label for="sell_amount">Amount</label>
<input type="text" class="form-control" id="sell_amount" placeholder="Amount">
</div>
<div class="form-group">
<label for="sell_price">Price</label>
<input type="text" class="form-control" id="sell_price" placeholder="Price">
</div>
<button class="btn btn-default sell_coin_btn">Submit</button>
</div>
<!--<div class="panel-body">
<div class="form-group">
<label for="lp_set_price">Set Price</label>
<input type="text" class="form-control" id="lp_set_price" placeholder="Set Price">
</div>
<button class="btn btn-default lp_set_price_btn">Submit</button>
</div>-->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row" style="padding-top: 10px;">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading"><strong>Sell Orders</strong><span style="float: right;">Total Aks: <span class="orderbook_numasks"></span></span></div>
<div class="">
<table class="table table-fixed orderbook_asks" style="margin-bottom: 0;">
<thead><th class="col-xs-3">Price in <span class="orderbook_rel_coin"></span></th>
<th class="col-xs-3">Min <span class="orderbook_base_coin"></span></th>
<th class="col-xs-3">Max <span class="orderbook_base_coin"></span></th>
<th class="col-xs-3">Age</th></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading"><strong>Buy Orders</strong><span style="float: right;">Total Bids: <span class="orderbook_numbids"></span></span></div>
<div class="">
<table class="table table-fixed orderbook_bids" style="margin-bottom: 0;">
<thead><th class="col-xs-3">Price in <span class="orderbook_rel_coin"></span></th>
<th class="col-xs-3">Min <span class="orderbook_base_coin"></span></th>
<th class="col-xs-3">Max <span class="orderbook_base_coin"></span></th>
<th class="col-xs-3">Age</th></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Show Swap Status</strong></div>
<div class="panel-body">
<div class="col-sm-6">
<p>This section will show you information when coin swap is activated and is in process. Use the refrehs swap list button to get updated information.<br>
You'll need to press this refresh button again to get latest updates.</p>
<button class="btn btn-default refresh_swap_list_btn">Refresh Swap List</button>
<form class="form-inline" style="padding-top: 12px;">
<div class="form-group">
<label for="swap_request_id">Request ID</label>
<input type="text" class="form-control" id="swap_request_id" placeholder="requestid">
</div>
<div class="form-group">
<label for="swap_quote_id">Quote ID</label>
<input type="email" class="form-control" id="swap_quote_id" placeholder="quoteid">
</div>
<button class="btn btn-default check_swap_status_btn">Check Swap Status</button>
</form>
</div>
<div class="col-md-6">
<pre class="checkswaplist-output"></pre>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 12px;">
<div class="col-md-12">
<pre class="initcoinswap-output"></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Section: Exchange END -->
<!-- Section: Portfolio -->
<div class="container-fluid section section-portfolio" style="display: none;">
<div class="row"><h1 style="text-align: center; font-weight: 200">YOUR PORTFOLIO</h1></div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Portfolio Charts</strong> <button class="btn btn-default btn-sm refresh_dex_potfolio_charts" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="panel-body">
<div class="col-sm-6" id="portfolio_chart_current" style="height: 300px;"></div>
<div class="col-sm-6" id="portfolio_chart_target" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading"><strong>Portfolio Status</strong> <button class="btn btn-default btn-sm refresh_dex_potfolio" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="">
<table class="table table-striped dex_portfolio_tbl" style="margin-bottom: 0;">
<thead>
<tr><th>Key</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td>KMD Equivalent</td><td class="portfolio_kmd_equiv"></td></tr>
<tr><td>Buy Coin</td><td class="portfolio_buycoin"></td></tr>
<tr><td>Buy Force</td><td class="portfolio_buyforce"></td></tr>
<tr><td>Sell Coin</td><td class="portfolio_sellcoin"></td></tr>
<tr><td>Sell Force</td><td class="portfolio_sellforce"></td></tr>
<tr><td>Base</td><td class="portfolio_base"></td></tr>
<tr><td>Rel</td><td class="portfolio_rel"></td></tr>
<tr><td>Rel Volume</td><td class="portfolio_relvolume"></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading"><strong>Trading Pair</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-5">
<h3 style="margin-top: 0; text-align: center;">Deposit</h3>
<select class="selectpicker sell_coin_p" data-live-search="true" data-hide-disabled="true" data-width="100%">
</select>
</div>
<div class="col-sm-2" style="margin-top: 50px; text-align: center;">
<span class="glyphicon glyphicon-transfer" style="font-size: 40px;"></span>
</div>
<div class="col-sm-5">
<h3 style="margin-top: 0; text-align: center;">Receive</h3>
<select class="selectpicker buy_coin_p" data-live-search="true" data-hide-disabled="true" data-width="100%">
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#PortfolioSetPriceTab" data-toggle="tab">Set Price Manually</a></li>
<li><a href="#PortfolioAutoPriceTab" data-toggle="tab">Set Auto Price</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="PortfolioSetPriceTab">
<div class="form-group">
<label for="portfolio_set_price">Set Price</label>
<input type="text" class="form-control" id="portfolio_set_price" placeholder="Set Price">
</div>
<button class="btn btn-default portfolio_set_price_btn">Submit</button>
</div>
<div class="tab-pane fade" id="PortfolioAutoPriceTab">
<div class="form-group">
<label for="portfolio_set_autoprice">Margin</label>
<input type="text" class="form-control" id="portfolio_set_autoprice" placeholder="e.g 0.01">
</div>
<button class="btn btn-default portfolio_set_autoprice_btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#PortfolioSetGoalsTab" data-toggle="tab">Set Goals Manually</a></li>
<li><a href="#PortfolioAutoGoalsTab" data-toggle="tab">Set Automatic Goals</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="PortfolioSetGoalsTab">
<div class="form-group">
<label for="portfolio_set_goal">Set Goal for <span class="set_goal_label_portfolio"></span></label>
<input type="text" class="form-control" id="portfolio_set_goal" placeholder="e.g. 48">
</div>
<button class="btn btn-default portfolio_set_goal_btn">Submit</button>
</div>
<div class="tab-pane fade" id="PortfolioAutoGoalsTab">
<div class="form-group">
<label>Push the button to set eqal goal for all active coins</label>
</div>
<button class="btn btn-default portfolio_set_autogoals_btn">Auto Goals</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Portfolio Coins Info</strong> <button class="btn btn-default btn-sm refresh_dex_potfolio_coins" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="">
<table class="table table-striped dex_portfolio_coins_tbl" style="margin-bottom: 0;">
<thead>
<tr>
<th>Coin</th>
<th>Address</th>
<th>Amount</th>
<th>Price</th>
<th>KMD Equivalent</th>
<th>%</th>
<th>Goal</th>
<th>Goal %</th>
<th>Rel Volume</th>
<th>Force</th>
<th>balanceA</th>
<th>valuesumA</th>
<th>aliceutil</th>
<th>balanceB</th>
<th>valuesumB</th>
<th>balance</th>
<th>bobutil</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Section: Portfolio END -->
<!-- Section: Balances -->
<div class="container-fluid section section-balances" style="display: none;">
<div class="row"><h1 style="text-align: center; font-weight: 200">BALANCES, DEPOSITS &amp; WITHDRAWALS</h1></div>
<div class="row">
<div class="col-sm-12 coins_balance_panel">
<div class="panel panel-default">
<div class="panel-heading"><strong>DEX Coins Status</strong> <button class="btn btn-default btn-sm refresh_dex_balances" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="">
<table class="table table-striped dex_balances_tbl" style="margin-bottom: 0;">
<thead>
<tr><th>Coin</th><!--<th>Name</th><th>Total Balance</th>--><th>Deposit Address</th><th>Status</th><th>txfee</th><th>Electrum</th><th>Actions</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-12 inventory_panel" style="display: none;">
<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>
<ul class="nav nav-tabs">
<li class="active"><a href="#AliceInventory" data-toggle="tab">Alice Inventory (<span data-inventorycoin="COIN"></span>)</a></li>
<li><a href="#BobInventory" data-toggle="tab">Bob Inventory (<span data-inventorycoin="COIN"></span>)</a></li>
<li><a href="#RawJSONInventory" data-toggle="tab">Raw JSON (<span data-inventorycoin="COIN"></span>)</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>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="BobInventory">
<table class="table table-striped dex_showinv_bob_tbl" style="margin-bottom: 0;">
<tbody>
</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>
<!-- Section: Balances END -->
<!-- Section: My Prices -->
<div class="container-fluid section section-myprices" style="display: none;">
<div class="row"><h1 style="text-align: center; font-weight: 200">MY PRICES</h1></div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>My DEX Coins Prices</strong> <button class="btn btn-default btn-sm refresh_dex_myprices" style="float: right; font-size: 13px; padding: 0 5px;">Refresh</button></div>
<div class="">
<table class="table table-striped dex_myprices_tbl" style="margin-bottom: 0;">
<thead>
<tr><th>Base</th><th>Rel</th><th>Bid</th><th>Ask</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Section: My Prices END -->
</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>
<!-- 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>
</body>
</html>