merged the new template in index.html
This commit is contained in:
Abhishek Sinha
parent
58f37465ed
commit
d81f0c976f
@ -9,6 +9,7 @@
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
@ -24,9 +25,15 @@
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
p, span, h1, h2, h3, h4, h5 {
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
@ -37,7 +44,6 @@
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -65,11 +71,9 @@
|
||||
font-family: 'Montserrat';
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
/* background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; */
|
||||
}
|
||||
|
||||
/* CAUTION: IE hackery ahead */
|
||||
|
||||
select::-ms-expand {
|
||||
display: none; /* remove default arrow in IE 10 and 11 */
|
||||
}
|
||||
@ -78,7 +82,6 @@
|
||||
color: #6b8e23;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
/* border-color: #1f8ffc transparent rgba(0, 0, 0, 0.1) transparent; */
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
@ -94,10 +97,11 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
max-width: 220px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
@ -143,9 +147,9 @@
|
||||
.mg-top-5 {margin-top: 5rem;}
|
||||
.mg-5 {margin: 5px 5px}
|
||||
|
||||
.ptext-div {
|
||||
.center {
|
||||
text-align:center;
|
||||
margin-bottom: 3rem;
|
||||
margin: 2rem 3rem;
|
||||
}
|
||||
.ptext {
|
||||
color: #ffffff;
|
||||
@ -160,7 +164,9 @@
|
||||
}
|
||||
|
||||
.circles {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.circle-with-text {
|
||||
justify-content: center;
|
||||
@ -183,7 +189,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#talkbubble {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
@ -231,14 +236,7 @@
|
||||
border-bottom: 13px solid transparent;
|
||||
}
|
||||
|
||||
.action-keys-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
}
|
||||
.action-keys-right {
|
||||
.action-keys-right, .action-keys-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
@ -246,8 +244,15 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.action-keys-left {
|
||||
flex-basis: 350px;
|
||||
}
|
||||
.action-keys-right {
|
||||
flex-basis: 500px;
|
||||
}
|
||||
|
||||
.flo_gen_keys_div, .messages_div {
|
||||
height: 75%;
|
||||
min-height: 400px;
|
||||
width: auto;
|
||||
background-color: rgb(199, 219, 226);
|
||||
color: #e7e7e7;
|
||||
@ -256,79 +261,134 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.send_crypto_form {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
margin: 20px 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.center-div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box bg-purple">
|
||||
<div class="center-div">
|
||||
<em><h1 class="h1text">Local Bitcoin Plus Plus P2P EXCHANGE </h1></em>
|
||||
|
||||
<div class="circles">
|
||||
<div class="circle-with-text bg-white">DEPOSIT WITHDRAW SECTION</div>
|
||||
<div class="circle-with-text bg-white">TRADE ASSETS SECTION</div>
|
||||
<div class="circle-with-text bg-white">MANAGE ACTIONS SECTION</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mg-top-5">FLO ID: oJK2grERGPMD6i2TDVTfTh6NXwH99gcMKm</h2>
|
||||
<h4 class="center">
|
||||
<span> BTC: 25.00020123 </span>  
|
||||
<span> FLO: 1225.8478378 </span>  
|
||||
<span> USD: 1125.00 </span>  
|
||||
<span> INR: 25000.00 </span>  
|
||||
</h4>
|
||||
</div>
|
||||
<div class="center-div">
|
||||
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Aliquam, ipsum recusandae voluptatibus mollitia quidem.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box bg-olive">
|
||||
<div class="center-div">
|
||||
<div class="ptext-div">
|
||||
<span class="ptext">DEPOSIT WITHDRAW ASSET</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<select>
|
||||
<option value="0">Select Asset:</option>
|
||||
<option value="1">Bitcoin</option>
|
||||
<option value="2">FLO</option>
|
||||
<option value="3">Bitcoin Testnet</option>
|
||||
<option value="4">FLO Testnet</option>
|
||||
<option value="4">INR</option>
|
||||
<option value="4">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Fiat:</option>
|
||||
<option value="1">INR</option>
|
||||
<option value="2">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Amount (in Fiat):</option>
|
||||
<option value="1">10000</option>
|
||||
<option value="2">50000</option>
|
||||
<option value="3">100000</option>
|
||||
</select>
|
||||
|
||||
<div class="box bg-purple">
|
||||
<div class="center-div">
|
||||
<div class="foo">
|
||||
<em><h1 class="h1text">Local Bitcoin Plus Plus P2P EXCHANGE </h1></em>
|
||||
</div>
|
||||
|
||||
<div class="circles">
|
||||
<a href="#deposit_withdraw_div"><div class="circle-with-text bg-white">DEPOSIT WITHDRAW SECTION</div></a>
|
||||
<a href="#buy_sell_div"><div class="circle-with-text bg-white">TRADE ASSETS SECTION</div></a>
|
||||
<a href="#manage_keys_div"><div class="circle-with-text bg-white">MANAGE ACTIONS SECTION</div></a>
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<button class="button bg-transparent fs-16">Deposit</button>
|
||||
<button class="button bg-transparent fs-16">Confirm Deposit</button>
|
||||
<button class="button bg-transparent fs-16">Withdraw</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-pink">
|
||||
<div class="center-div">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">BUY SELL ASSET</span>
|
||||
|
||||
<h2 class="mg-top-5">FLO ID: oJK2grERGPMD6i2TDVTfTh6NXwH99gcMKm</h2>
|
||||
<h4 class="center">
|
||||
<span> BTC: 25.00020123 </span>  
|
||||
<span> FLO: 1225.8478378 </span>  
|
||||
<span> USD: 1125.00 </span>  
|
||||
<span> INR: 25000.00 </span>  
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<div class="center-div">
|
||||
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Aliquam, ipsum recusandae voluptatibus mollitia quidem.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box bg-olive" id="deposit_withdraw_div">
|
||||
<div class="center-div">
|
||||
<div class="center">
|
||||
<span class="ptext">DEPOSIT WITHDRAW ASSET</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<select>
|
||||
<option value="0">Select Asset:</option>
|
||||
<option value="1">Bitcoin</option>
|
||||
<option value="2">FLO</option>
|
||||
<option value="3">Bitcoin Testnet</option>
|
||||
<option value="4">FLO Testnet</option>
|
||||
<option value="4">INR</option>
|
||||
<option value="4">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Fiat:</option>
|
||||
<option value="1">INR</option>
|
||||
<option value="2">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Amount (in Fiat):</option>
|
||||
<option value="1">10000</option>
|
||||
<option value="2">50000</option>
|
||||
<option value="3">100000</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="center">
|
||||
<button class="button bg-transparent fs-16 mg-5">Deposit</button>
|
||||
<button class="button bg-transparent fs-16 mg-5">Confirm Deposit</button>
|
||||
<button class="button bg-transparent fs-16 mg-5">Withdraw</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-pink" id="buy_sell_div">
|
||||
<div class="center-div">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">BUY SELL ASSET</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<select>
|
||||
<option value="0">Select Crypto:</option>
|
||||
<option value="1">Bitcoin</option>
|
||||
<option value="2">FLO</option>
|
||||
<option value="3">Bitcoin Testnet</option>
|
||||
<option value="4">FLO Testnet</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Fiat:</option>
|
||||
<option value="1">INR</option>
|
||||
<option value="2">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Amount:</option>
|
||||
<option value="1">10000</option>
|
||||
<option value="2">50000</option>
|
||||
<option value="3">100000</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="center">
|
||||
<button class="button bg-transparent fs-16">BUY</button>
|
||||
<button class="button bg-transparent fs-16">SELL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-lightblue">
|
||||
<div class="center-div">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">SEND CRYPTO</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<select>
|
||||
<option value="0">Select Crypto:</option>
|
||||
<option value="1">Bitcoin</option>
|
||||
@ -336,87 +396,56 @@
|
||||
<option value="3">Bitcoin Testnet</option>
|
||||
<option value="4">FLO Testnet</option>
|
||||
</select>
|
||||
|
||||
|
||||
<select>
|
||||
<option value="0">Select Fiat:</option>
|
||||
<option value="1">INR</option>
|
||||
<option value="2">USD</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Amount:</option>
|
||||
<option value="1">10000</option>
|
||||
<option value="2">50000</option>
|
||||
<option value="3">100000</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<button class="button bg-transparent fs-16">BUY</button>
|
||||
<button class="button bg-transparent fs-16">SELL</button>
|
||||
|
||||
<div class="send_crypto_form">
|
||||
<input type="text" placeholder="UTXO Address of Crypto">
|
||||
<input type="text" placeholder="Private Key of Crypto">
|
||||
<input type="text" placeholder="Receiver Address">
|
||||
<input type="text" placeholder="Amount To Send">
|
||||
<input type="text" placeholder="Change Address">
|
||||
<button class="button bg-blue fs-16">SEND TRANSACTION</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-lightblue">
|
||||
<div class="center-div">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">SEND CRYPTO</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select">
|
||||
<select>
|
||||
<option value="0">Select Crypto:</option>
|
||||
<option value="1">Bitcoin</option>
|
||||
<option value="2">FLO</option>
|
||||
<option value="3">Bitcoin Testnet</option>
|
||||
<option value="4">FLO Testnet</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option value="0">Select Fiat:</option>
|
||||
<option value="1">INR</option>
|
||||
<option value="2">USD</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input type="text" placeholder="UTXO Address of Crypto">
|
||||
<input type="text" placeholder="Private Key of Crypto">
|
||||
<input type="text" placeholder="Receiver Address">
|
||||
<input type="text" placeholder="Amount To Send">
|
||||
<input type="text" placeholder="Change Address">
|
||||
|
||||
<div style="text-align:center">
|
||||
<button class="button bg-blue fs-16">SEND TRANSACTION</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-yellow">
|
||||
<div id="talkbubble">
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-lightblue2">
|
||||
<div class="push-left action-keys-left">
|
||||
<div class="flo_gen_keys_div"></div>
|
||||
<input type="file" class="button bg-purple"></button>
|
||||
<button class="button bg-purple">Upload D3 JS</button>
|
||||
<div class="box bg-yellow">
|
||||
<div id="talkbubble">
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="push-right action-keys-right">
|
||||
<div class="messages_div"></div>
|
||||
<button class="button bg-purple mg-5">Generate FLO Keys</button>
|
||||
<div class="box bg-lightblue2" id="manage_keys_div">
|
||||
<div class="push-left action-keys-left">
|
||||
<div class="flo_gen_keys_div"></div>
|
||||
<label class="button bg-purple">
|
||||
Choose File
|
||||
<input type="file" class="hidden"></button>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div class="push-right action-keys-right">
|
||||
<div class="messages_div"></div>
|
||||
<button class="button bg-purple mg-5">Generate FLO Keys</button>
|
||||
<button class="button bg-purple mg-5">Reset FLO Keys</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,73 +5,394 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>P2P Exchange</title>
|
||||
|
||||
<title>P2P CRYPTO TRADING SOFTWARE</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
|
||||
<style>
|
||||
.tradebox {
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
border: 1px solid #F4F4F4;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
h1 { font-size: 5.9vw; }
|
||||
h2 { font-size: 4.0vh; }
|
||||
h3 { font-size: 3.0vh; }
|
||||
h4 { font-size: 5.0vh; }
|
||||
h5 { font-size: 1.0vh; }
|
||||
p { font-size: 4vmin; }
|
||||
|
||||
p, span, h1, h2, h3, h4, h5 {
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
ul, li { list-style: none; }
|
||||
a, u { text-decoration: none; }
|
||||
a:hover{
|
||||
/* color: initial; */
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
||||
.box {
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
ul.panel-box > li {
|
||||
.center-div {
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
select {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 20px 20px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 10px 10px;
|
||||
margin: 10px 10px;
|
||||
padding: 10px 10px 10px 10px;
|
||||
font-size: 16px;
|
||||
height: 47px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: rgba(0, 0, 0, 0.1); /*#1f8ffc*/
|
||||
color: #ffffff;
|
||||
font-family: 'Montserrat';
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
.buybox > ul.panel-box > li {
|
||||
background-color: chocolate;
|
||||
|
||||
/* CAUTION: IE hackery ahead */
|
||||
select::-ms-expand {
|
||||
display: none; /* remove default arrow in IE 10 and 11 */
|
||||
}
|
||||
.sellbox > ul.panel-box > li {
|
||||
background-color: cornflowerblue;
|
||||
|
||||
option {
|
||||
color: #6b8e23;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* target Internet Explorer 9 to undo the custom arrow */
|
||||
@media screen and (min-width:0\0) {
|
||||
select {
|
||||
background:none\9;
|
||||
padding: 5px\9;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 220px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
text-align: center;
|
||||
flex-grow: inherit;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #4CAF50; /* Green */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bg-green {background-color: #4CAF50;} /* Green */
|
||||
.bg-blue {background-color: #008CBA;} /* Blue */
|
||||
.bg-lightblue {background-color: #7acfd6}
|
||||
.bg-lightblue2 {background-color: #93b7ec}
|
||||
.bg-red {background-color: #f44336;} /* Red */
|
||||
.bg-grey {background-color: #e7e7e7; color: black;} /* Gray */
|
||||
.bg-black {background-color: #555555;}
|
||||
.bg-white {background-color: #ffffff;}
|
||||
.bg-purple {background-color: #9f93ec}
|
||||
.bg-olive {background-color: olivedrab}
|
||||
.bg-pink {background-color: #e0474c}
|
||||
.bg-lightpink {background-color: #ec93d3}
|
||||
.bg-gold {background-color: #DCAE1D}
|
||||
.bg-darkred {background-color: #b11a21}
|
||||
.bg-transparent {background-color: rgba(0, 0, 0, 0.1)}
|
||||
.bg-yellow {background-color: #e2ec93}
|
||||
|
||||
.fs-10 {font-size: 10px;}
|
||||
.fs-12 {font-size: 12px;}
|
||||
.fs-16 {font-size: 16px;}
|
||||
.fs-20 {font-size: 20px;}
|
||||
.fs-24 {font-size: 24px;}
|
||||
|
||||
.pd1 {padding: 10px 24px;}
|
||||
.pd2 {padding: 12px 28px;}
|
||||
.pd3 {padding: 14px 40px;}
|
||||
.pd4 {padding: 32px 16px;}
|
||||
.pd5 {padding: 16px;}
|
||||
|
||||
.mg-top-5 {margin-top: 5rem;}
|
||||
.mg-5 {margin: 5px 5px}
|
||||
|
||||
.center {
|
||||
text-align:center;
|
||||
margin: 2rem 3rem;
|
||||
}
|
||||
.ptext {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 5.4vw;;
|
||||
}
|
||||
|
||||
.h1text {
|
||||
color: #ffffff; /*008CBA*/
|
||||
font-weight: bolder;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.circles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.circle-with-text {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
margin: 5px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
height: 125px;
|
||||
width: 125px;
|
||||
color: #9f93ec;
|
||||
}
|
||||
.multi-line-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#talkbubble {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
background: #ec9393;
|
||||
position: relative;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#talkbubble:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 26px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 13px solid transparent;
|
||||
border-right: 26px solid #ec9393;
|
||||
border-bottom: 13px solid transparent;
|
||||
}
|
||||
.push-left {
|
||||
float: left;
|
||||
}
|
||||
.push-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#talkbubble {
|
||||
width: 80%;
|
||||
height: 75%;
|
||||
position: relative;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#talkbubble:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 26px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 13px solid transparent;
|
||||
border-right: 26px solid #ec9293;
|
||||
border-bottom: 13px solid transparent;
|
||||
}
|
||||
|
||||
.action-keys-right, .action-keys-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.flo_gen_keys_div, .messages_div {
|
||||
word-break: break-word;
|
||||
min-height: 400px;
|
||||
width: auto;
|
||||
background-color: rgb(199, 219, 226);
|
||||
color: #e7e7e7;
|
||||
padding: 20px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.action-keys-left {
|
||||
flex-basis: 350px;
|
||||
}
|
||||
.action-keys-right {
|
||||
flex-basis: 500px;
|
||||
}
|
||||
|
||||
.send_crypto_form {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
margin: 20px 20px;
|
||||
justify-content: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.center-div { width: 100%; }
|
||||
.flo_gen_keys_div, .messages_div { margin: 0 0; }
|
||||
.button { width: 100%; }
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box bg-purple">
|
||||
<div class="center-div">
|
||||
<em><h1 class="h1text">Local Bitcoin Plus Plus P2P EXCHANGE </h1></em>
|
||||
|
||||
<div class="circles">
|
||||
<a href="#deposit_withdraw_div"><div class="circle-with-text bg-white">DEPOSIT WITHDRAW SECTION</div></a>
|
||||
<a href="#buy_sell_div"><div class="circle-with-text bg-white">TRADE ASSETS SECTION</div></a>
|
||||
<a href="#manage_keys_div"><div class="circle-with-text bg-white">MANAGE ACTIONS SECTION</div></a>
|
||||
</div>
|
||||
|
||||
<h3 class="mg-top-5">FLO ID: <span id="localbitcoinuserdiv"></span></h3>
|
||||
<h4 class="center" id="balances_div"></h4>
|
||||
</div>
|
||||
<div class="center-div">
|
||||
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Aliquam, ipsum recusandae voluptatibus mollitia quidem.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="box bg-olive" id="deposit_withdraw_div">
|
||||
<div class="center-div">
|
||||
<div class="center">
|
||||
<span class="ptext">DEPOSIT WITHDRAW ASSET</span>
|
||||
</div>
|
||||
|
||||
<div class="custom-select" id="asset_box"></div>
|
||||
<div class="center" id="asset_button_box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-pink" id="buy_sell_div">
|
||||
<div class="center-div" id="tradebox">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">BUY SELL ASSET</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-grey">
|
||||
<div class="center-div" id="my_trades_div"></div>
|
||||
</div>
|
||||
<div class="box bg-lightblue">
|
||||
<div class="center-div">
|
||||
<div style="text-align:center; margin-bottom: 3rem">
|
||||
<span class="ptext">SEND CRYPTO</span>
|
||||
</div>
|
||||
|
||||
<div id="withdraw_deposit_table"></div>
|
||||
<div class="custom-select" id="send_crypto_select_div"></div>
|
||||
|
||||
<h5>Indexed DB</h5>
|
||||
<div class="box">
|
||||
<div id="reset_flo_keys_div"></div>
|
||||
<div id="localbitcoinuserdiv"></div>
|
||||
<div class="send_crypto_form" id="send_crypto_form_ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-yellow">
|
||||
<div id="talkbubble">
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box bg-lightblue2" id="manage_keys_div">
|
||||
<div class="push-right action-keys-right">
|
||||
<div class="flex messages_div">
|
||||
<ul id="new_flo_keys_ul"></ul>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<input type='button' class="button bg-purple mg-5" id="new_flo_keys" value="Generate FLO Keys">
|
||||
<input type='button' class="button bg-purple mg-5" id="reset_flo_keys_div" value="Reset FLO Keys">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="generate_new_keys_div">
|
||||
<h5>Generate New FLO Keys here:</h5>
|
||||
<button id="new_flo_keys">Generate FLO Keys</button>
|
||||
<ul id="new_flo_keys_ul"></ul>
|
||||
<div class="push-left action-keys-left">
|
||||
<div class="flex flo_gen_keys_div" id="output_div"></div>
|
||||
<div id="d3div" class="flex"></div>
|
||||
</div>
|
||||
|
||||
<div class="box" id="balances_div"></div>
|
||||
<div class="box" id="checkCryptoStatusDiv"></div>
|
||||
|
||||
<h5>Asset Box</h5>
|
||||
<div class="box">
|
||||
<div id="asset_box"></div>
|
||||
</div>
|
||||
|
||||
<h5>Send Crypto</h5>
|
||||
<div class="box" id="send_crypto_div"></div>
|
||||
|
||||
<h5>Buy--Sell</h5>
|
||||
<div class="box tradebox" id="tradebox"></div>
|
||||
<div class="box" id="my_trades_div"></div>
|
||||
|
||||
<h5>D3 file upload</h5>
|
||||
<div class="box">
|
||||
<div id="d3div"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h5>Websocket Chat</h5>
|
||||
<div id="output_div"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
@ -37887,7 +38208,9 @@ exports.createContext = Script.createContext = function (context) {
|
||||
var pre = document.createElement("p");
|
||||
pre.style.wordWrap = "break-word";
|
||||
pre.innerHTML = message;
|
||||
output.appendChild(pre);
|
||||
//output.appendChild(pre);
|
||||
console.log(pre);
|
||||
|
||||
}
|
||||
|
||||
/* Websocket Code Ends Here*/
|
||||
@ -38487,7 +38810,7 @@ exports.createContext = Script.createContext = function (context) {
|
||||
let mySellOrders = (typeof sellOrders=="object") ? Promise.resolve(sellOrders) : readDBbyIndex('sellOrders', 'trader_flo_address', myFloId);
|
||||
let my_trades_div = document.getElementById('my_trades_div');
|
||||
const RM_TRADE = new localbitcoinplusplus.trade;
|
||||
let t = `<h4>Your Trade Orders: </h4>`;
|
||||
let t = `<span class='ptext'>Your Trade Orders: </span>`;
|
||||
t += `<ul>`;
|
||||
Promise.all([myBuyOrders, mySellOrders]).then((myOrders)=>{
|
||||
myOrders[0].concat(myOrders[1]).map((myOrdersData)=>{
|
||||
@ -38520,12 +38843,12 @@ exports.createContext = Script.createContext = function (context) {
|
||||
const balances_div = document.getElementById("balances_div");
|
||||
const user_crypto_balances = readDBbyIndex("crypto_balances", "trader_flo_address", flo_id);
|
||||
const user_fiat_balances = readDBbyIndex("cash_balances", "trader_flo_address", flo_id);
|
||||
let t = `<h4>Balances: </h4>`;
|
||||
let t = ``;
|
||||
Promise.all([user_crypto_balances, user_fiat_balances]).then((balances)=>{
|
||||
balances[0].concat(balances[1]).map((user_balance_data)=>{
|
||||
let code = user_balance_data.crypto_currency || user_balance_data.currency;
|
||||
let value = user_balance_data.crypto_balance || user_balance_data.cash_balance;
|
||||
t += `<h5>${code}:${value}</h5>`;
|
||||
t += `<span>${code}:${value}</span> `;
|
||||
});
|
||||
balances_div.innerHTML = t;
|
||||
});
|
||||
@ -38540,18 +38863,6 @@ exports.createContext = Script.createContext = function (context) {
|
||||
|
||||
const RM_RPC = new localbitcoinplusplus.rpc;
|
||||
|
||||
// NOTIFY DEPOSITED CRYPTO CONFIRMATION
|
||||
const checkCryptoStatusDiv = document.getElementById("checkCryptoStatusDiv");
|
||||
const refresh_crypto_status_btn = document.createElement('button');
|
||||
const refresh_crypto_status_btn_text = document.createTextNode('Refresh Deposited Crypto Status');
|
||||
refresh_crypto_status_btn.appendChild(refresh_crypto_status_btn_text);
|
||||
checkCryptoStatusDiv.appendChild(refresh_crypto_status_btn);
|
||||
refresh_crypto_status_btn.addEventListener('click', function() {
|
||||
let refresh_deposit_status = RM_RPC.send_rpc.call(this,
|
||||
"refresh_deposit_status_request", null);
|
||||
doSend(refresh_deposit_status);
|
||||
});
|
||||
|
||||
// RESET KEYS
|
||||
const reset_flo_keys_div = document.getElementById('reset_flo_keys_div');
|
||||
const reset_flo_keys_btn = document.createElement('button');
|
||||
@ -38572,37 +38883,42 @@ exports.createContext = Script.createContext = function (context) {
|
||||
}
|
||||
|
||||
//localbitcoinuserdiv
|
||||
document.getElementById("localbitcoinuserdiv").innerHTML = `<p>Address: ${idbData.myLocalFLOAddress}<p>`;
|
||||
document.getElementById("localbitcoinuserdiv").innerHTML = `${idbData.myLocalFLOAddress}`;
|
||||
|
||||
// TRADE BOX
|
||||
|
||||
const tradebox = document.getElementById("tradebox");
|
||||
const trade_select_div = document.createElement('div');
|
||||
trade_select_div.className += ` custom-select `;
|
||||
const trade_buttons_div = document.createElement('div');
|
||||
trade_buttons_div.className += ` center `;
|
||||
|
||||
const selectListCrypto = document.createElement("select");
|
||||
selectListCrypto.id = "selectListCrypto";
|
||||
tradebox.appendChild(selectListCrypto);
|
||||
trade_select_div.appendChild(selectListCrypto);
|
||||
|
||||
const selectListFiat = document.createElement("select");
|
||||
selectListFiat.id = "selectListFiat";
|
||||
tradebox.appendChild(selectListFiat);
|
||||
trade_select_div.appendChild(selectListFiat);
|
||||
|
||||
const selectListAmount = document.createElement('select');
|
||||
selectListAmount.id = "selectListAmount";
|
||||
tradebox.appendChild(selectListAmount);
|
||||
trade_select_div.appendChild(selectListAmount);
|
||||
|
||||
const trade_buy_button = document.createElement('button');
|
||||
trade_buy_button.className += ` button bg-transparent fs-16 mg-5`;
|
||||
const trade_buy_button_text = document.createTextNode("BUY");
|
||||
trade_buy_button.appendChild(trade_buy_button_text);
|
||||
|
||||
const trade_sell_button = document.createElement('button');
|
||||
trade_sell_button.className += ` button bg-transparent fs-16 mg-5`;
|
||||
const trade_sell_button_text = document.createTextNode("SELL");
|
||||
trade_sell_button.appendChild(trade_sell_button_text);
|
||||
|
||||
tradebox.appendChild(selectListCrypto);
|
||||
tradebox.appendChild(selectListFiat);
|
||||
tradebox.appendChild(selectListAmount);
|
||||
tradebox.appendChild(trade_buy_button);
|
||||
tradebox.appendChild(trade_sell_button);
|
||||
trade_buttons_div.appendChild(trade_buy_button);
|
||||
trade_buttons_div.appendChild(trade_sell_button);
|
||||
tradebox.appendChild(trade_select_div);
|
||||
tradebox.appendChild(trade_buttons_div);
|
||||
|
||||
localbitcoinplusplus.master_configurations.tradableAsset1.map(cryptos=>{
|
||||
let option = document.createElement("option");
|
||||
@ -38657,6 +38973,7 @@ exports.createContext = Script.createContext = function (context) {
|
||||
const RM_TRADE = new localbitcoinplusplus.trade;
|
||||
|
||||
let asset_box = document.getElementById("asset_box");
|
||||
let asset_button_box = document.getElementById("asset_button_box");
|
||||
|
||||
// Create a select input for asset type
|
||||
let assetTypeInput = document.createElement('select');
|
||||
@ -38713,13 +39030,15 @@ exports.createContext = Script.createContext = function (context) {
|
||||
|
||||
// Create a deposit and withdraw button
|
||||
let depositAssetButton = document.createElement('button');
|
||||
depositAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
|
||||
let depositAssetButtonText = document.createTextNode('Deposit');
|
||||
depositAssetButton.appendChild(depositAssetButtonText);
|
||||
let withdrawAssetButton = document.createElement('button');
|
||||
withdrawAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
|
||||
let withdrawAssetButtonText = document.createTextNode('Withdraw');
|
||||
withdrawAssetButton.appendChild(withdrawAssetButtonText);
|
||||
asset_box.appendChild(depositAssetButton);
|
||||
asset_box.appendChild(withdrawAssetButton);
|
||||
asset_button_box.appendChild(depositAssetButton);
|
||||
asset_button_box.appendChild(withdrawAssetButton);
|
||||
|
||||
depositAssetButton.addEventListener('click', function () {
|
||||
let asset_type = assetTypeInput.value;
|
||||
@ -38768,6 +39087,19 @@ exports.createContext = Script.createContext = function (context) {
|
||||
throw new Error("Error while depositing your address.");
|
||||
}
|
||||
});
|
||||
|
||||
// NOTIFY DEPOSITED CRYPTO CONFIRMATION
|
||||
const refresh_crypto_status_btn = document.createElement('button');
|
||||
refresh_crypto_status_btn.className += ` button bg-transparent fs-16 mg-5 `;
|
||||
const refresh_crypto_status_btn_text = document.createTextNode('Confirm Deposit');
|
||||
refresh_crypto_status_btn.appendChild(refresh_crypto_status_btn_text);
|
||||
asset_button_box.appendChild(refresh_crypto_status_btn);
|
||||
refresh_crypto_status_btn.addEventListener('click', function() {
|
||||
let refresh_deposit_status = RM_RPC.send_rpc.call(this,
|
||||
"refresh_deposit_status_request", null);
|
||||
doSend(refresh_deposit_status);
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -38775,7 +39107,8 @@ exports.createContext = Script.createContext = function (context) {
|
||||
<script>
|
||||
function buildBroadcastTxUI() {
|
||||
|
||||
const broadcast_tx_ui = document.getElementById('send_crypto_div');
|
||||
const broadcast_tx_ui = document.getElementById('send_crypto_select_div');
|
||||
const broadcast_tx_ui_form = document.getElementById('send_crypto_form_ui');
|
||||
|
||||
const send_crypto_type = document.createElement('select');
|
||||
send_crypto_type.id = "send_crypto_type";
|
||||
@ -38811,32 +39144,37 @@ exports.createContext = Script.createContext = function (context) {
|
||||
}
|
||||
|
||||
const utxo_addr_input = document.createElement('input');
|
||||
utxo_addr_input.type = "text";
|
||||
utxo_addr_input.placeholder = `UTXO Address of Crypto`;
|
||||
|
||||
const utxo_addr_wif_input = document.createElement('input');
|
||||
utxo_addr_wif_input.type = "text";
|
||||
utxo_addr_wif_input.placeholder = `Private Key of Crypto Being Used`;
|
||||
|
||||
const receiver_address_input = document.createElement('input');
|
||||
receiver_address_input.type = "text";
|
||||
receiver_address_input.placeholder = `Receiver Address`;
|
||||
|
||||
const receiving_crypto_amount_input = document.createElement('input');
|
||||
receiving_crypto_amount_input.type = "text";
|
||||
receiving_crypto_amount_input.placeholder = `Amount to Send`;
|
||||
|
||||
const change_adress_input = document.createElement('input');
|
||||
change_adress_input.type = "text";
|
||||
change_adress_input.placeholder = `Change Address`;
|
||||
|
||||
const tx_send_button = document.createElement('button');
|
||||
tx_send_button.className += ' button bg-blue fs-16 ';
|
||||
|
||||
const tx_send_button_text = document.createTextNode('Send Transaction');
|
||||
tx_send_button.appendChild(tx_send_button_text);
|
||||
|
||||
broadcast_tx_ui.appendChild(utxo_addr_input);
|
||||
broadcast_tx_ui.appendChild(utxo_addr_wif_input);
|
||||
broadcast_tx_ui.appendChild(receiver_address_input);
|
||||
broadcast_tx_ui.appendChild(receiving_crypto_amount_input);
|
||||
broadcast_tx_ui.appendChild(change_adress_input);
|
||||
broadcast_tx_ui.appendChild(receiving_amount_currency_input);
|
||||
broadcast_tx_ui.appendChild(tx_send_button);
|
||||
broadcast_tx_ui_form.appendChild(utxo_addr_input);
|
||||
broadcast_tx_ui_form.appendChild(utxo_addr_wif_input);
|
||||
broadcast_tx_ui_form.appendChild(receiver_address_input);
|
||||
broadcast_tx_ui_form.appendChild(receiving_crypto_amount_input);
|
||||
broadcast_tx_ui_form.appendChild(change_adress_input);
|
||||
broadcast_tx_ui_form.appendChild(tx_send_button);
|
||||
|
||||
tx_send_button.onclick = function() {
|
||||
if (utxo_addr_input.value.length<1) throw new Error("Empty UTXO Address.");
|
||||
@ -38962,15 +39300,23 @@ exports.createContext = Script.createContext = function (context) {
|
||||
|
||||
const d3div = document.getElementById('d3div');
|
||||
const fileUploadDiv = document.createElement('div');
|
||||
const dbFileLabel = document.createElement('label');
|
||||
const dbFileDivText = document.createTextNode('Choose File');
|
||||
dbFileLabel.appendChild(dbFileDivText);
|
||||
dbFileLabel.className += ` button bg-purple mg-5 `;
|
||||
const dbFile = document.createElement('input');
|
||||
dbFile.className += ` hidden `;
|
||||
dbFile.setAttribute("type", "file");
|
||||
dbFile.setAttribute("id", "upload_file_db");
|
||||
const readBytesButtons = document.createElement("button");
|
||||
const readBytesButtons = document.createElement("input");
|
||||
readBytesButtons.type = 'button';
|
||||
readBytesButtons.className += ` button bg-purple mg-5 `;
|
||||
readBytesButtons.setAttribute("id", "uploadFileButton");
|
||||
readBytesButtons.innerHTML = "Upload File";
|
||||
readBytesButtons.value = "Upload File";
|
||||
|
||||
fileUploadDiv.appendChild(dbFile);
|
||||
fileUploadDiv.appendChild(readBytesButtons);
|
||||
dbFileLabel.appendChild(dbFile);
|
||||
d3div.appendChild(dbFileLabel);
|
||||
d3div.appendChild(readBytesButtons);
|
||||
d3div.appendChild(fileUploadDiv);
|
||||
|
||||
document.querySelector('#uploadFileButton').addEventListener('click', function(evt) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user