From d81f0c976fb92d6ac321a51ab538963c13d53833 Mon Sep 17 00:00:00 2001
From: Abhishek Sinha <avishkarabhishek786@gmail.com>
Date: Sun, 17 Feb 2019 20:52:26 +0530
Subject: [PATCH] merged the new template in index.html

---
 supernode/design.html | 347 +++++++++++++++-------------
 supernode/index.html  | 518 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 620 insertions(+), 245 deletions(-)

diff --git a/supernode/design.html b/supernode/design.html
index 8a3ff14..681b18d 100644
--- a/supernode/design.html
+++ b/supernode/design.html
@@ -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> &nbsp
-                    <span> FLO: 1225.8478378 </span> &nbsp
-                    <span> USD: 1125.00 </span> &nbsp
-                    <span> INR: 25000.00 </span> &nbsp
-                </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> &nbsp
+                        <span> FLO: 1225.8478378 </span> &nbsp
+                        <span> USD: 1125.00 </span> &nbsp
+                        <span> INR: 25000.00 </span> &nbsp
+                    </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> 
diff --git a/supernode/index.html b/supernode/index.html
index 1c38314..83c134d 100644
--- a/supernode/index.html
+++ b/supernode/index.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> &nbsp;`;
                 });
                 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) {