mirror of
https://github.com/basicswap/basicswap.git
synced 2025-11-06 10:48:11 +01:00
ui: GUI update (#14)
This commit is contained in:
Gerlof van Ek
GitHub
@@ -24,13 +24,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-4">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
|
||||
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
|
||||
<div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
|
||||
<div class="relative z-20 flex flex-wrap items-center -m-3">
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
|
||||
@@ -40,53 +36,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white">
|
||||
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
|
||||
<div class="pb-6 border-coolGray-100">
|
||||
<div class="flex flex-wrap items-center justify-between -m-2">
|
||||
<div class="w-full p-2">
|
||||
|
||||
{% include 'inc_messages.html' %}
|
||||
|
||||
{% include 'inc_messages.html' %}
|
||||
<div class="p-5 mb-10">
|
||||
<div class="mx-4 p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center text-teal-600 relative">
|
||||
<div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
|
||||
</div>
|
||||
<div class="flex-auto border-t-2 border-teal-600"></div>
|
||||
<div class="flex items-center text-teal-600 relative">
|
||||
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6">
|
||||
<path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
|
||||
</div>
|
||||
<div class="flex-auto border-t-2 border-teal-600"></div>
|
||||
<div class="flex items-center text-gray-500 relative">
|
||||
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6" >
|
||||
<polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
|
||||
</div>
|
||||
<div class="mx-4 p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center text-teal-600 relative">
|
||||
<div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6">
|
||||
<polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
|
||||
</div>
|
||||
<div class="flex-auto border-t-2 border-teal-600"></div>
|
||||
<div class="flex items-center text-teal-600 relative">
|
||||
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6">
|
||||
<path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
|
||||
</div>
|
||||
<div class="flex-auto border-t-2 border-teal-600"></div>
|
||||
<div class="flex items-center text-gray-500 relative">
|
||||
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6">
|
||||
<polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" autocomplete="off">
|
||||
<div class="py-6 border-b border-t border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
@@ -101,7 +94,7 @@
|
||||
</svg>
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
|
||||
<line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
|
||||
<line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
|
||||
<circle cx="5" cy="12" r="3"></circle>
|
||||
@@ -114,14 +107,13 @@
|
||||
<option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
|
||||
{% for a in addrs_to %}
|
||||
<option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-b border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
@@ -135,7 +127,7 @@
|
||||
</svg>
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
|
||||
<path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
|
||||
<rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
|
||||
<path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
|
||||
@@ -146,7 +138,7 @@
|
||||
<select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from">
|
||||
{% for a in addrs %}
|
||||
<option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -154,7 +146,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-b border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
@@ -171,8 +162,8 @@
|
||||
<select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
|
||||
<option value="-1" data-image="/static/images/other/placeholder-line.png">You Send</option>
|
||||
{% for c in coins_from %}
|
||||
<option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
<option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +171,7 @@
|
||||
<div class="relative">
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
|
||||
<path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
|
||||
<polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
|
||||
<path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
|
||||
@@ -189,26 +180,21 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}">
|
||||
|
||||
</div>
|
||||
<input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}"> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-b border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
<div class="w-full md:w-1/3 p-3">
|
||||
<p class="text-sm text-coolGray-800 font-semibold">You Get</p>
|
||||
<p class="text-sm text-coolGray-800 font-semibold">You Get</p>
|
||||
</div>
|
||||
<div class="w-full md:flex-1 p-3">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -218,7 +204,7 @@
|
||||
<option value="-1" data-image="/static/images/other/placeholder-line.png">You Get</option>
|
||||
{% for c in coins %}
|
||||
<option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,7 +212,7 @@
|
||||
<div class="relative">
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
|
||||
<path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
|
||||
<polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
|
||||
<path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
|
||||
@@ -235,16 +221,13 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');">
|
||||
</div>
|
||||
<input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-b border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
@@ -253,14 +236,13 @@
|
||||
</div>
|
||||
<div class="w-full md:flex-1 p-3">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
|
||||
<div class="relative">
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<title>law</title>
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
|
||||
<rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
|
||||
<polyline points="3,23 3,19 15,19 15,23 "></polyline>
|
||||
<line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
|
||||
@@ -270,15 +252,14 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded">
|
||||
</div>
|
||||
<input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> </div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
|
||||
<div class="relative">
|
||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g fill="#3b82f6" >
|
||||
<g fill="#3b82f6">
|
||||
<path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
|
||||
<path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
|
||||
<path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
|
||||
@@ -286,15 +267,13 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
|
||||
</div>
|
||||
<input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
@@ -318,7 +297,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-b border-t border-coolGray-100">
|
||||
<div class="w-full md:w-10/12">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
@@ -326,14 +304,11 @@
|
||||
<p class="text-sm text-coolGray-800 font-semibold">Rates</p>
|
||||
</div>
|
||||
<div class="w-full md:flex-1 p-3">
|
||||
<p id="rates_display">
|
||||
|
||||
</p>
|
||||
<p id="rates_display"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-10 bg-white bg-opacity-60 mb-10 rounded-b-md mb-20">
|
||||
<div class="w-full md:w-0/12">
|
||||
<div class="flex flex-wrap justify-end -m-1.5">
|
||||
@@ -367,161 +342,141 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="formid" value="{{ form_id }}">
|
||||
<input type="hidden" name="step1" value="a">
|
||||
</form>
|
||||
|
||||
<input type="hidden" name="step1" value="a"> </form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const xhr_rates = new XMLHttpRequest();
|
||||
xhr_rates.onload = () => {
|
||||
if (xhr_rates.status == 200) {
|
||||
const obj = JSON.parse(xhr_rates.response);
|
||||
|
||||
inner_html = '<pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
}
|
||||
if (xhr_rates.status == 200) {
|
||||
const obj = JSON.parse(xhr_rates.response);
|
||||
inner_html = '<pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
}
|
||||
}
|
||||
|
||||
const xhr_rate = new XMLHttpRequest();
|
||||
xhr_rate.onload = () => {
|
||||
if (xhr_rate.status == 200) {
|
||||
const obj = JSON.parse(xhr_rate.response);
|
||||
|
||||
if (obj.hasOwnProperty('rate')) {
|
||||
document.getElementById('rate').value = obj['rate'];
|
||||
} else
|
||||
if (obj.hasOwnProperty('amount_to')) {
|
||||
document.getElementById('amt_to').value = obj['amount_to'];
|
||||
} else
|
||||
if (obj.hasOwnProperty('amount_from')) {
|
||||
document.getElementById('amt_from').value = obj['amount_from'];
|
||||
}
|
||||
if (xhr_rate.status == 200) {
|
||||
const obj = JSON.parse(xhr_rate.response);
|
||||
if (obj.hasOwnProperty('rate')) {
|
||||
document.getElementById('rate').value = obj['rate'];
|
||||
}
|
||||
else
|
||||
if (obj.hasOwnProperty('amount_to')) {
|
||||
document.getElementById('amt_to').value = obj['amount_to'];
|
||||
}
|
||||
else
|
||||
if (obj.hasOwnProperty('amount_from')) {
|
||||
document.getElementById('amt_from').value = obj['amount_from'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const xhr_rates_table = new XMLHttpRequest();
|
||||
xhr_rates_table.onload = () => {
|
||||
if (xhr_rates_table.status == 200) {
|
||||
const list = JSON.parse(xhr_rates_table.response);
|
||||
headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate'];
|
||||
table = document.createElement('table');
|
||||
table.setAttribute("class", "");
|
||||
|
||||
heading_head = document.createElement('thead');
|
||||
|
||||
headings_row = document.createElement('tr');
|
||||
data_row.setAttribute("class", "");
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
column = document.createElement('th');
|
||||
column.textContent = headings[i];
|
||||
headings_row.appendChild(column);
|
||||
}
|
||||
table.appendChild(headings_row);
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
data_row = document.createElement('tr');
|
||||
for (let j = 0; j < list[i].length; j++) {
|
||||
column = document.createElement('td');
|
||||
column.textContent = list[i][j];
|
||||
data_row.appendChild(column);
|
||||
}
|
||||
table.appendChild(data_row);
|
||||
}
|
||||
// Clear existing
|
||||
const display_node = document.getElementById("rates_display");
|
||||
while (display_node.lastElementChild) {
|
||||
display_node.removeChild(display_node.lastElementChild);
|
||||
}
|
||||
|
||||
heading = document.createElement('h4');
|
||||
heading.textContent = ''
|
||||
display_node.appendChild(heading);
|
||||
display_node.appendChild(table);
|
||||
if (xhr_rates_table.status == 200) {
|
||||
const list = JSON.parse(xhr_rates_table.response);
|
||||
headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate'];
|
||||
table = document.createElement('table');
|
||||
table.setAttribute("class", "");
|
||||
heading_head = document.createElement('thead');
|
||||
headings_row = document.createElement('tr');
|
||||
data_row.setAttribute("class", "");
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
column = document.createElement('th');
|
||||
column.textContent = headings[i];
|
||||
headings_row.appendChild(column);
|
||||
}
|
||||
table.appendChild(headings_row);
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
data_row = document.createElement('tr');
|
||||
for (let j = 0; j < list[i].length; j++) {
|
||||
column = document.createElement('td');
|
||||
column.textContent = list[i][j];
|
||||
data_row.appendChild(column);
|
||||
}
|
||||
table.appendChild(data_row);
|
||||
}
|
||||
// Clear existing
|
||||
const display_node = document.getElementById("rates_display");
|
||||
while (display_node.lastElementChild) {
|
||||
display_node.removeChild(display_node.lastElementChild);
|
||||
}
|
||||
heading = document.createElement('h4');
|
||||
heading.textContent = ''
|
||||
display_node.appendChild(heading);
|
||||
display_node.appendChild(table);
|
||||
}
|
||||
}
|
||||
|
||||
function lookup_rates() {
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
alert('Coins from and to must be set first.');
|
||||
return;
|
||||
}
|
||||
|
||||
inner_html = '<p>Updating...</p>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
|
||||
xhr_rates.open('POST', '/json/rates');
|
||||
xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to);
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
alert('Coins from and to must be set first.');
|
||||
return;
|
||||
}
|
||||
inner_html = '<p>Updating...</p>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
xhr_rates.open('POST', '/json/rates');
|
||||
xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to);
|
||||
}
|
||||
|
||||
function lookup_rates_table() {
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
alert('Coins from and to must be set first.');
|
||||
return;
|
||||
}
|
||||
|
||||
inner_html = 'Updating...</p>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
|
||||
xhr_rates_table.open('GET', '/json/rateslist?from='+coin_from+'&to='+coin_to);
|
||||
xhr_rates_table.send();
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
alert('Coins from and to must be set first.');
|
||||
return;
|
||||
}
|
||||
inner_html = 'Updating...</p>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
xhr_rates_table.open('GET', '/json/rateslist?from=' + coin_from + '&to=' + coin_to);
|
||||
xhr_rates_table.send();
|
||||
}
|
||||
|
||||
function set_rate(value_changed) {
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
const amt_from = document.getElementById('amt_from').value;
|
||||
const amt_to = document.getElementById('amt_to').value;
|
||||
const rate = document.getElementById('rate').value;
|
||||
const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;
|
||||
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
return;
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
const amt_from = document.getElementById('amt_from').value;
|
||||
const amt_to = document.getElementById('amt_to').value;
|
||||
const rate = document.getElementById('rate').value;
|
||||
const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;
|
||||
if (coin_from == '-1' || coin_to == '-1') {
|
||||
return;
|
||||
}
|
||||
params = 'coin_from=' + coin_from + '&coin_to=' + coin_to;
|
||||
if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
|
||||
if (amt_from == '' || rate == '') {
|
||||
return;
|
||||
}
|
||||
|
||||
params = 'coin_from='+coin_from+'&coin_to='+coin_to;
|
||||
if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
|
||||
if (amt_from == '' || rate == '') {
|
||||
return;
|
||||
}
|
||||
params += '&rate='+rate+'&amt_from='+amt_from;
|
||||
} else
|
||||
if (lock_rate && value_changed == 'amt_to') {
|
||||
if (amt_to == '' || rate == '') {
|
||||
return;
|
||||
}
|
||||
params += '&amt_to='+amt_to+'&rate='+rate;
|
||||
} else {
|
||||
if (amt_from == '' || amt_to == '') {
|
||||
return;
|
||||
}
|
||||
params += '&amt_from='+amt_from+'&amt_to='+amt_to;
|
||||
params += '&rate=' + rate + '&amt_from=' + amt_from;
|
||||
}
|
||||
else
|
||||
if (lock_rate && value_changed == 'amt_to') {
|
||||
if (amt_to == '' || rate == '') {
|
||||
return;
|
||||
}
|
||||
|
||||
xhr_rate.open('POST', '/json/rate');
|
||||
xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_rate.send(params);
|
||||
params += '&amt_to=' + amt_to + '&rate=' + rate;
|
||||
}
|
||||
else {
|
||||
if (amt_from == '' || amt_to == '') {
|
||||
return;
|
||||
}
|
||||
params += '&amt_from=' + amt_from + '&amt_to=' + amt_to;
|
||||
}
|
||||
xhr_rate.open('POST', '/json/rate');
|
||||
xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_rate.send(params);
|
||||
}
|
||||
</script>
|
||||
<script src="static/js/new_offer.js"></script>
|
||||
</div>
|
||||
{% include 'footer.html' %}
|
||||
{% include 'footer.html' %}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user