452 lines
16 KiB
HTML
452 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>Local BTC ++</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
|
|
<style>
|
|
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;
|
|
}
|
|
|
|
p, span, h1, h2, h3, h4, h5 {
|
|
white-space: pre-line;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.box {
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
/* CAUTION: IE hackery ahead */
|
|
select::-ms-expand {
|
|
display: none; /* remove default arrow in IE 10 and 11 */
|
|
}
|
|
|
|
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 {
|
|
max-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;
|
|
}
|
|
|
|
.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: 600;
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.action-keys-left {
|
|
flex-basis: 350px;
|
|
}
|
|
.action-keys-right {
|
|
flex-basis: 500px;
|
|
}
|
|
|
|
.flo_gen_keys_div, .messages_div {
|
|
min-height: 400px;
|
|
width: auto;
|
|
background-color: rgb(199, 219, 226);
|
|
color: #e7e7e7;
|
|
margin: 25px 10px;
|
|
padding: 20px 20px;
|
|
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">
|
|
<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>
|
|
|
|
<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" 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>
|
|
<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>
|
|
|
|
<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-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-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>
|
|
|
|
</body>
|
|
</html>
|