· 4 years ago · Aug 27, 2021, 10:08 PM
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Crypo</title>
9 <link rel="icon" href="assets/img/favicon.png" type="image/x-icon">
10 <link rel="stylesheet" href="assets/css/style.css">
11</head>
12
13<body id="dark">
14 <header class="dark-bb">
15 <nav class="navbar navbar-expand-lg">
16 <a class="navbar-brand" href="exchange-dark.html"><img src="assets/img/logo-light.svg" alt="logo"></a>
17 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
18 aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation">
19 <i class="icon ion-md-menu"></i>
20 </button>
21
22 <div class="collapse navbar-collapse" id="headerMenu">
23 <ul class="navbar-nav mr-auto">
24 <li class="nav-item dropdown">
25 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
26 aria-expanded="false">
27 Landing Page
28 </a>
29 <div class="dropdown-menu">
30 <a class="dropdown-item" href="landing-page-dark.html">Landing One</a>
31 <a class="dropdown-item" href="landing-page-dark-two.html">Landing Two</a>
32 </div>
33 </li>
34 <li class="nav-item dropdown">
35 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
36 aria-expanded="false">
37 Exchange
38 </a>
39 <div class="dropdown-menu">
40 <a class="dropdown-item" href="exchange-dark.html">Exchange</a>
41 <a class="dropdown-item" href="exchange-dark-live-price.html">Exchange Live Price</a>
42 <a class="dropdown-item" href="exchange-dark-ticker.html">Exchange Ticker</a>
43 <a class="dropdown-item" href="exchange-dark-fluid.html">Exchange Fluid</a>
44 </div>
45 </li>
46 <li class="nav-item dropdown">
47 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
48 aria-expanded="false">
49 Markets
50 </a>
51 <div class="dropdown-menu">
52 <a class="dropdown-item" href="markets-dark.html">Markets</a>
53 <a class="dropdown-item" href="market-capital-dark.html">Markets Line</a>
54 <a class="dropdown-item" href="market-capital-bar-dark.html">Markets Bar</a>
55 <a class="dropdown-item" href="market-overview-dark.html">Market Overview</a>
56 <a class="dropdown-item" href="market-screener-dark.html">Market Screener</a>
57 <a class="dropdown-item" href="market-crypto-dark.html">Market Crypto</a>
58 </div>
59 </li>
60 <li class="nav-item dropdown">
61 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
62 aria-expanded="false">
63 Dashboard
64 </a>
65 <div class="dropdown-menu">
66 <a class="dropdown-item" href="settings-profile-dark.html">Profile</a>
67 <a class="dropdown-item" href="settings-wallet-dark.html">Wallet</a>
68 <a class="dropdown-item" href="settings-dark.html">Settings</a>
69 </div>
70 </li>
71 <li class="nav-item dropdown">
72 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
73 aria-expanded="false">
74 Others
75 </a>
76 <div class="dropdown-menu">
77 <a class="dropdown-item" href="technical-analysis-dark.html">Technical Analysis</a>
78 <a class="dropdown-item" href="cross-rates-dark.html">Cross Rates</a>
79 <a class="dropdown-item" href="symbol-info-dark.html">Symbol Info</a>
80 <a class="dropdown-item" href="heat-map-dark.html">Heat Map</a>
81 <a class="dropdown-item" href="signin-dark.html">Sign in</a>
82 <a class="dropdown-item" href="signup-dark.html">Sign up</a>
83 <a class="dropdown-item" href="404-dark.html">404</a>
84 </div>
85 </li>
86 </ul>
87 <ul class="navbar-nav ml-auto">
88 <li class="nav-item header-custom-icon">
89 <a class="nav-link" href="#" id="clickFullscreen">
90 <i class="icon ion-md-expand"></i>
91 </a>
92 </li>
93 <li class="nav-item dropdown header-custom-icon">
94 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
95 aria-expanded="false">
96 <i class="icon ion-md-notifications"></i>
97 <span class="circle-pulse"></span>
98 </a>
99 <div class="dropdown-menu">
100 <div class="dropdown-header d-flex align-items-center justify-content-between">
101 <p class="mb-0 font-weight-medium">6 New Notifications</p>
102 <a href="#!" class="text-muted">Clear all</a>
103 </div>
104 <div class="dropdown-body">
105 <a href="#!" class="dropdown-item">
106 <div class="icon">
107 <i class="icon ion-md-lock"></i>
108 </div>
109 <div class="content">
110 <p>Account password change</p>
111 <p class="sub-text text-muted">5 sec ago</p>
112 </div>
113 </a>
114 <a href="#!" class="dropdown-item">
115 <div class="icon">
116 <i class="icon ion-md-alert"></i>
117 </div>
118 <div class="content">
119 <p>Solve the security issue</p>
120 <p class="sub-text text-muted">10 min ago</p>
121 </div>
122 </a>
123 <a href="#!" class="dropdown-item">
124 <div class="icon">
125 <i class="icon ion-logo-android"></i>
126 </div>
127 <div class="content">
128 <p>Download android app</p>
129 <p class="sub-text text-muted">1 hrs ago</p>
130 </div>
131 </a>
132 <a href="#!" class="dropdown-item">
133 <div class="icon">
134 <i class="icon ion-logo-bitcoin"></i>
135 </div>
136 <div class="content">
137 <p>Bitcoin price is high now</p>
138 <p class="sub-text text-muted">2 hrs ago</p>
139 </div>
140 </a>
141 <a href="#!" class="dropdown-item">
142 <div class="icon">
143 <i class="icon ion-logo-usd"></i>
144 </div>
145 <div class="content">
146 <p>Payment completed</p>
147 <p class="sub-text text-muted">4 hrs ago</p>
148 </div>
149 </a>
150 </div>
151 <div class="dropdown-footer d-flex align-items-center justify-content-center">
152 <a href="#!">View all</a>
153 </div>
154 </div>
155 </li>
156 <li class="nav-item dropdown header-img-icon">
157 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
158 aria-expanded="false">
159 <img src="assets/img/avatar.svg" alt="avatar">
160 </a>
161 <div class="dropdown-menu">
162 <div class="dropdown-header d-flex flex-column align-items-center">
163 <div class="figure mb-3">
164 <img src="assets/img/avatar.svg" alt="">
165 </div>
166 <div class="info text-center">
167 <p class="name font-weight-bold mb-0">Tony Stark</p>
168 <p class="email text-muted mb-3">tonystark@gmail.com</p>
169 </div>
170 </div>
171 <div class="dropdown-body">
172 <ul class="profile-nav">
173 <li class="nav-item">
174 <a href="settings-profile-dark.html" class="nav-link">
175 <i class="icon ion-md-person"></i>
176 <span>Profile</span>
177 </a>
178 </li>
179 <li class="nav-item">
180 <a href="settings-wallet-dark.html" class="nav-link">
181 <i class="icon ion-md-wallet"></i>
182 <span>My Wallet</span>
183 </a>
184 </li>
185 <li class="nav-item">
186 <a href="settings-dark.html" class="nav-link">
187 <i class="icon ion-md-settings"></i>
188 <span>Settings</span>
189 </a>
190 </li>
191 <li class="nav-item" id="changeThemeDark">
192 <a href="#!" class="nav-link">
193 <i class="icon ion-md-moon"></i>
194 <span>Theme</span>
195 </a>
196 </li>
197 <li class="nav-item">
198 <a href="exchange-dark.html" class="nav-link red">
199 <i class="icon ion-md-power"></i>
200 <span>Log Out</span>
201 </a>
202 </li>
203 </ul>
204 </div>
205 </div>
206 </li>
207 </ul>
208 </div>
209 </nav>
210 </header>
211 <div class="settings mtb15">
212 <div class="container-fluid">
213 <div class="row">
214 <div class="col-md-12 col-lg-3">
215 <div class="nav flex-column nav-pills settings-nav" id="v-pills-tab" role="tablist"
216 aria-orientation="vertical">
217 <a class="nav-link" id="settings-profile-tab" data-toggle="pill" href="#settings-profile" role="tab"
218 aria-controls="settings-profile" aria-selected="true"><i class="icon ion-md-person"></i> Profile</a>
219 <a class="nav-link active" id="settings-wallet-tab" data-toggle="pill" href="#settings-wallet" role="tab"
220 aria-controls="settings-wallet" aria-selected="false"><i class="icon ion-md-wallet"></i> Wallet</a>
221 <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab"
222 aria-controls="settings" aria-selected="false"><i class="icon ion-md-settings"></i> Settings</a>
223 </div>
224 </div>
225 <div class="col-md-12 col-lg-9">
226 <div class="tab-content" id="v-pills-tabContent">
227 <div class="tab-pane fade" id="settings-profile" role="tabpanel" aria-labelledby="settings-profile-tab">
228 <div class="card">
229 <div class="card-body">
230 <h5 class="card-title">General Information</h5>
231 <div class="settings-profile">
232 <form>
233 <img src="assets/img/avatar.svg" alt="avatar">
234 <div class="custom-file">
235 <input type="file" class="custom-file-input" id="fileUpload">
236 <label class="custom-file-label" for="fileUpload">Choose avatar</label>
237 </div>
238 <div class="form-row mt-4">
239 <div class="col-md-6">
240 <label for="formFirst">First name</label>
241 <input id="formFirst" type="text" class="form-control" placeholder="First name">
242 </div>
243 <div class="col-md-6">
244 <label for="formLast">Last name</label>
245 <input id="formLast" type="text" class="form-control" placeholder="Last name">
246 </div>
247 <div class="col-md-6">
248 <label for="emailAddress">Email</label>
249 <input id="emailAddress" type="text" class="form-control" placeholder="Enter your email">
250 </div>
251 <div class="col-md-6">
252 <label for="phoneNumber">Phone</label>
253 <input id="phoneNumber" type="text" class="form-control" placeholder="Enter phone number">
254 </div>
255 <div class="col-md-6">
256 <label for="selectLanguage">Language</label>
257 <select id="selectLanguage" class="custom-select">
258 <option selected>English</option>
259 <option>Mandarin Chinese</option>
260 <option>Spanish</option>
261 <option>Arabic</option>
262 <option>Russian</option>
263 </select>
264 </div>
265 <div class="col-md-6">
266 <label for="selectCurrency">Currency</label>
267 <select id="selectCurrency" class="custom-select">
268 <option selected>USD</option>
269 <option>EUR</option>
270 <option>GBP</option>
271 <option>CHF</option>
272 </select>
273 </div>
274 <div class="col-md-12">
275 <input type="submit" value="Update">
276 </div>
277 </div>
278 </form>
279 </div>
280 </div>
281 </div>
282 <div class="card">
283 <div class="card-body">
284 <h5 class="card-title">Security Information</h5>
285 <div class="settings-profile">
286 <form>
287 <div class="form-row">
288 <div class="col-md-6">
289 <label for="currentPass">Current password</label>
290 <input id="currentPass" type="text" class="form-control" placeholder="Enter your password">
291 </div>
292 <div class="col-md-6">
293 <label for="newPass">New password</label>
294 <input id="newPass" type="text" class="form-control" placeholder="Enter new password">
295 </div>
296 <div class="col-md-6">
297 <label for="securityOne">Security questions #1</label>
298 <select id="securityOne" class="custom-select">
299 <option selected>What was the name of your first pet?</option>
300 <option>What's your Mother's middle name?</option>
301 <option>What was the name of your first school?</option>
302 <option>Where did you travel for the first time?</option>
303 </select>
304 </div>
305 <div class="col-md-6">
306 <label for="securityAnsOne">Answer</label>
307 <input id="securityAnsOne" type="text" class="form-control" placeholder="Enter your answer">
308 </div>
309 <div class="col-md-6">
310 <label for="securityTwo">Security questions #2</label>
311 <select id="securityTwo" class="custom-select">
312 <option selected>Choose...</option>
313 <option>What was the name of your first pet?</option>
314 <option>What's your Mother's middle name?</option>
315 <option>What was the name of your first school?</option>
316 <option>Where did you travel for the first time?</option>
317 </select>
318 </div>
319 <div class="col-md-6">
320 <label for="securityAnsTwo">Answer</label>
321 <input id="securityAnsTwo" type="text" class="form-control" placeholder="Enter your answer">
322 </div>
323 <div class="col-md-6">
324 <label for="securityThree">Security questions #3</label>
325 <select id="securityThree" class="custom-select">
326 <option selected>Choose...</option>
327 <option>What was the name of your first pet?</option>
328 <option>What's your Mother's middle name?</option>
329 <option>What was the name of your first school?</option>
330 <option>Where did you travel for the first time?</option>
331 </select>
332 </div>
333 <div class="col-md-6">
334 <label for="securityFore">Answer</label>
335 <input id="securityFore" type="text" class="form-control" placeholder="Enter your answer">
336 </div>
337 <div class="col-md-12">
338 <input type="submit" value="Update">
339 </div>
340 </div>
341 </form>
342 </div>
343 </div>
344 </div>
345 </div>
346 <div class="tab-pane fade show active" id="settings-wallet" role="tabpanel"
347 aria-labelledby="settings-wallet-tab">
348 <div class="wallet">
349 <div class="row">
350 <div class="col-md-12 col-lg-4">
351
352
353
354
355
356 <!-- ================================================================= NEW CODE ================================================================= -->
357
358
359
360
361
362
363
364
365 <div class="market-pairs">
366
367
368
369 <div class="input-group autocomplete">
370 <div class="input-group-prepend">
371 <span class="input-group-text" id="inputGroup-sizing-sm"><i class="icon ion-md-search"></i></span>
372 </div>
373
374 <input id="settings-wallet-searchbox" type="text" class="form-control" placeholder="Search stocks" aria-describedby="inputGroup-sizing-sm">
375 <button id='calc' class="btn btn-outline-secondary" type="button" style="margin-left: 10px;"
376 onclick="addStockToWatchList()">Add</button>
377
378 </div>
379
380
381 <div class="nav flex-column nav-pills px-3" role="tablist" aria-orientation="vertical">
382 <a class="nav-link d-flex justify-content-between align-items-center active" data-toggle="pill"
383 href="#coinBTC" role="tab" aria-selected="true">
384 <div class="d-flex">
385 <img src="assets/img/icon/18.png" alt="btc">
386 <div>
387 <h2>BTC</h2>
388 <p>Bitcoin</p>
389 </div>
390 </div>
391 <div>
392 <h3>4.5484254</h3>
393 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
394 </div>
395 </a>
396 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
397 href="#coinETH" role="tab" aria-selected="true">
398 <div class="d-flex">
399 <img src="assets/img/icon/1.png" alt="btc">
400 <div>
401 <h2>ETH</h2>
402 <p>Ethereum</p>
403 </div>
404 </div>
405 <div>
406 <h3>13.454845</h3>
407 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
408 </div>
409 </a>
410 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
411 href="#coinBNB" role="tab" aria-selected="true">
412 <div class="d-flex">
413 <img src="assets/img/icon/9.png" alt="btc">
414 <div>
415 <h2>BNB</h2>
416 <p>Binance</p>
417 </div>
418 </div>
419 <div>
420 <h3>35.4842458</h3>
421 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
422 </div>
423 </a>
424 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
425 href="#coinTRX" role="tab" aria-selected="true">
426 <div class="d-flex">
427 <img src="assets/img/icon/6.png" alt="btc">
428 <div>
429 <h2>TRX</h2>
430 <p>Tron</p>
431 </div>
432 </div>
433 <div>
434 <h3>4.458941</h3>
435 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
436 </div>
437 </a>
438 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
439 href="#coinEOS" role="tab" aria-selected="true">
440 <div class="d-flex">
441 <img src="assets/img/icon/2.png" alt="btc">
442 <div>
443 <h2>EOS</h2>
444 <p>Eosio</p>
445 </div>
446 </div>
447 <div>
448 <h3>33.478951</h3>
449 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
450 </div>
451 </a>
452 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
453 href="#coinXMR" role="tab" aria-selected="true">
454 <div class="d-flex">
455 <img src="assets/img/icon/7.png" alt="btc">
456 <div>
457 <h2>XMR</h2>
458 <p>Monero</p>
459 </div>
460 </div>
461 <div>
462 <h3>99.465975</h3>
463 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
464 </div>
465 </a>
466 <a class="nav-link d-flex justify-content-between align-items-center" data-toggle="pill"
467 href="#coinKCS" role="tab" aria-selected="true">
468 <div class="d-flex">
469 <img src="assets/img/icon/4.png" alt="btc">
470 <div>
471 <h2>KCS</h2>
472 <p>Kstarcoin</p>
473 </div>
474 </div>
475 <div>
476 <h3>114.57564</h3>
477 <p class="text-right"><i class="icon ion-md-lock"></i> 0.0000000</p>
478 </div>
479 </a>
480 </div>
481
482
483 <style>
484 .autocomplete {
485 /*the container must be positioned relative:*/
486 position: relative;
487
488 }
489 .autocomplete-items {
490 position: absolute;
491 border: 1px solid #d4d4d4;
492 border-bottom: none;
493 border-top: none;
494 z-index: 99;
495 /*position the autocomplete items to be the same width as the container:*/
496 top: 100%;
497 left: 5%;
498 right: 0;
499 }
500 .autocomplete-items div {
501 padding: 10px;
502 cursor: pointer;
503 background-color: #fff;
504 border-bottom: 1px solid #d4d4d4;
505 }
506 .autocomplete-items div:hover {
507 /*when hovering an item:*/
508 background-color: #e9e9e9;
509 }
510 .autocomplete-active {
511 /*when navigating through the items using the arrow keys:*/
512 background-color: DodgerBlue !important;
513 color: #ffffff;
514 }
515 </style>
516
517 <script>
518 function addStockToWatchList(){
519 }
520 function autocomplete(inp, arr) {
521 /*the autocomplete function takes two arguments,
522 the text field element and an array of possible autocompleted values:*/
523 var currentFocus;
524 /*execute a function when someone writes in the text field:*/
525 inp.addEventListener("input", function(e) {
526 var a, b, i, val = this.value;
527 /*close any already open lists of autocompleted values*/
528 closeAllLists();
529 if (!val) { return false;}
530 currentFocus = -1;
531 /*create a DIV element that will contain the items (values):*/
532 a = document.createElement("DIV");
533 a.setAttribute("id", this.id + "autocomplete-list");
534 a.setAttribute("class", "autocomplete-items");
535 /*append the DIV element as a child of the autocomplete container:*/
536 this.parentNode.appendChild(a);
537 /*for each item in the array...*/
538 for (i = 0; i < arr.length; i++) {
539 /*check if the item starts with the same letters as the text field value:*/
540 if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
541 /*create a DIV element for each matching element:*/
542 b = document.createElement("DIV");
543 /*make the matching letters bold:*/
544 b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
545 b.innerHTML += arr[i].substr(val.length);
546 /*insert a input field that will hold the current array item's value:*/
547 b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
548 /*execute a function when someone clicks on the item value (DIV element):*/
549 b.addEventListener("click", function(e) {
550 /*insert the value for the autocomplete text field:*/
551 inp.value = this.getElementsByTagName("input")[0].value;
552 /*close the list of autocompleted values,
553 (or any other open lists of autocompleted values:*/
554 closeAllLists();
555 });
556 a.appendChild(b);
557 }
558 }
559 });
560 /*execute a function presses a key on the keyboard:*/
561 inp.addEventListener("keydown", function(e) {
562 var x = document.getElementById(this.id + "autocomplete-list");
563 if (x) x = x.getElementsByTagName("div");
564 if (e.keyCode == 40) {
565 /*If the arrow DOWN key is pressed,
566 increase the currentFocus variable:*/
567 currentFocus++;
568 /*and and make the current item more visible:*/
569 addActive(x);
570 } else if (e.keyCode == 38) { //up
571 /*If the arrow UP key is pressed,
572 decrease the currentFocus variable:*/
573 currentFocus--;
574 /*and and make the current item more visible:*/
575 addActive(x);
576 } else if (e.keyCode == 13) {
577 /*If the ENTER key is pressed, prevent the form from being submitted,*/
578 e.preventDefault();
579 if (currentFocus > -1) {
580 /*and simulate a click on the "active" item:*/
581 if (x) x[currentFocus].click();
582 }
583 }
584 });
585 function addActive(x) {
586 /*a function to classify an item as "active":*/
587 if (!x) return false;
588 /*start by removing the "active" class on all items:*/
589 removeActive(x);
590 if (currentFocus >= x.length) currentFocus = 0;
591 if (currentFocus < 0) currentFocus = (x.length - 1);
592 /*add class "autocomplete-active":*/
593 x[currentFocus].classList.add("autocomplete-active");
594 }
595 function removeActive(x) {
596 /*a function to remove the "active" class from all autocomplete items:*/
597 for (var i = 0; i < x.length; i++) {
598 x[i].classList.remove("autocomplete-active");
599 }
600 }
601 function closeAllLists(elmnt) {
602 /*close all autocomplete lists in the document,
603 except the one passed as an argument:*/
604 var x = document.getElementsByClassName("autocomplete-items");
605 for (var i = 0; i < x.length; i++) {
606 if (elmnt != x[i] && elmnt != inp) {
607 x[i].parentNode.removeChild(x[i]);
608 }
609 }
610 }
611 /*execute a function when someone clicks in the document:*/
612 document.addEventListener("click", function (e) {
613 closeAllLists(e.target);
614 });
615 }
616 async function getAllStockNames() {
617 const response = await fetch('http://127.0.0.1:5000/api/v1/resources/stocks/getStockNames');
618 const json = await response.json();
619 let str = await JSON.stringify(json);
620 let temp = []
621 str = str.slice(1, str.length - 1);
622 str.split(',').forEach(tickerName => {
623 tickerName = tickerName.substring(1, tickerName.length - 1);
624 console.log(tickerName);
625 temp.push(tickerName);
626 })
627
628 autocomplete(document.getElementById("settings-wallet-searchbox"), temp);
629 }
630
631
632
633
634
635
636
637
638 getAllStockNames();
639 <!-- console.log(countries); -->
640
641 </script>
642 </div>
643
644
645
646
647
648
649
650
651
652
653 <!-- ================================================================= NEW CODE ================================================================= -->
654
655
656
657
658
659
660
661
662
663
664
665
666
667 </div>
668 <div class="col-md-12 col-lg-8">
669 <div class="tab-content">
670 <div class="tab-pane fade show active" id="coinBTC" role="tabpanel">
671 <div class="card">
672 <div class="card-body">
673 <h5 class="card-title">Balances</h5>
674 <ul>
675 <li class="d-flex justify-content-between align-items-center">
676 <div class="d-flex align-items-center">
677 <i class="icon ion-md-cash"></i>
678 <h2>Total Equity</h2>
679 </div>
680 <div>
681 <h3>5.5894 BTC</h3>
682 </div>
683 </li>
684 <li class="d-flex justify-content-between align-items-center">
685 <div class="d-flex align-items-center">
686 <i class="icon ion-md-checkmark"></i>
687 <h2>Available Margin</h2>
688 </div>
689 <div>
690 <h3>2.480 BTC</h3>
691 </div>
692 </li>
693 </ul>
694 <button class="btn green">Deposit</button>
695 <button class="btn red">Withdraw</button>
696 </div>
697 </div>
698 <div class="card">
699 <div class="card-body">
700 <h5 class="card-title">Wallet Deposit Address</h5>
701 <div class="row wallet-address">
702 <div class="col-md-8">
703 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
704 of your
705 funds at once if you deposit more than your daily withdrawal limit.</p>
706 <div class="input-group">
707 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
708 <div class="input-group-prepend">
709 <button class="btn btn-primary">COPY</button>
710 </div>
711 </div>
712 </div>
713 <div class="col-md-4">
714 <img src="assets/img/qr-code-light.svg" alt="qr-code">
715 </div>
716 </div>
717 </div>
718 </div>
719 <div class="card">
720 <div class="card-body">
721 <h5 class="card-title">Latest Transactions</h5>
722 <div class="wallet-history">
723 <table class="table">
724 <thead>
725 <tr>
726 <th>No.</th>
727 <th>Date</th>
728 <th>Status</th>
729 <th>Amount</th>
730 </tr>
731 </thead>
732 <tbody>
733 <tr>
734 <td>1</td>
735 <td>25-04-2019</td>
736 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
737 <td>4.5454334</td>
738 </tr>
739 <tr>
740 <td>2</td>
741 <td>25-05-2019</td>
742 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
743 <td>0.5484468</td>
744 </tr>
745 <tr>
746 <td>3</td>
747 <td>25-06-2019</td>
748 <td><i class="icon ion-md-close-circle-outline red"></i></td>
749 <td>2.5454545</td>
750 </tr>
751 <tr>
752 <td>4</td>
753 <td>25-07-2019</td>
754 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
755 <td>1.45894147</td>
756 </tr>
757 <tr>
758 <td>3</td>
759 <td>25-08-2019</td>
760 <td><i class="icon ion-md-close-circle-outline red"></i></td>
761 <td>2.5454545</td>
762 </tr>
763 </tbody>
764 </table>
765 </div>
766 </div>
767 </div>
768 </div>
769 <div class="tab-pane fade" id="coinETH" role="tabpanel">
770 <div class="card">
771 <div class="card-body">
772 <h5 class="card-title">Balances</h5>
773 <ul>
774 <li class="d-flex justify-content-between align-items-center">
775 <div class="d-flex align-items-center">
776 <i class="icon ion-md-cash"></i>
777 <h2>Total Equity</h2>
778 </div>
779 <div>
780 <h3>4.1542 ETH</h3>
781 </div>
782 </li>
783 <li class="d-flex justify-content-between align-items-center">
784 <div class="d-flex align-items-center">
785 <i class="icon ion-md-checkmark"></i>
786 <h2>Available Margin</h2>
787 </div>
788 <div>
789 <h3>1.334 ETH</h3>
790 </div>
791 </li>
792 </ul>
793 <button class="btn green">Deposit</button>
794 <button class="btn red">Withdraw</button>
795 </div>
796 </div>
797 <div class="card">
798 <div class="card-body">
799 <h5 class="card-title">Wallet Deposit Address</h5>
800 <div class="row wallet-address">
801 <div class="col-md-8">
802 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
803 of your
804 funds at once if you deposit more than your daily withdrawal limit.</p>
805 <div class="input-group">
806 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
807 <div class="input-group-prepend">
808 <button class="btn btn-primary">COPY</button>
809 </div>
810 </div>
811 </div>
812 <div class="col-md-4">
813 <img src="assets/img/qr-code-light.svg" alt="qr-code">
814 </div>
815 </div>
816 </div>
817 </div>
818 <div class="card">
819 <div class="card-body">
820 <h5 class="card-title">Latest Transactions</h5>
821 <div class="wallet-history">
822 <table class="table">
823 <thead>
824 <tr>
825 <th>No.</th>
826 <th>Date</th>
827 <th>Status</th>
828 <th>Amount</th>
829 </tr>
830 </thead>
831 <tbody>
832 <tr>
833 <td>1</td>
834 <td>25-04-2019</td>
835 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
836 <td>4.5454334</td>
837 </tr>
838 <tr>
839 <td>2</td>
840 <td>25-05-2019</td>
841 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
842 <td>0.5484468</td>
843 </tr>
844 <tr>
845 <td>3</td>
846 <td>25-06-2019</td>
847 <td><i class="icon ion-md-close-circle-outline red"></i></td>
848 <td>2.5454545</td>
849 </tr>
850 <tr>
851 <td>4</td>
852 <td>25-07-2019</td>
853 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
854 <td>1.45894147</td>
855 </tr>
856 <tr>
857 <td>3</td>
858 <td>25-08-2019</td>
859 <td><i class="icon ion-md-close-circle-outline red"></i></td>
860 <td>2.5454545</td>
861 </tr>
862 </tbody>
863 </table>
864 </div>
865 </div>
866 </div>
867 </div>
868 <div class="tab-pane fade" id="coinBNB" role="tabpanel">
869 <div class="card">
870 <div class="card-body">
871 <h5 class="card-title">Balances</h5>
872 <ul>
873 <li class="d-flex justify-content-between align-items-center">
874 <div class="d-flex align-items-center">
875 <i class="icon ion-md-cash"></i>
876 <h2>Total Equity</h2>
877 </div>
878 <div>
879 <h3>7.342 BNB</h3>
880 </div>
881 </li>
882 <li class="d-flex justify-content-between align-items-center">
883 <div class="d-flex align-items-center">
884 <i class="icon ion-md-checkmark"></i>
885 <h2>Available Margin</h2>
886 </div>
887 <div>
888 <h3>0.332 BNB</h3>
889 </div>
890 </li>
891 </ul>
892 <button class="btn green">Deposit</button>
893 <button class="btn red">Withdraw</button>
894 </div>
895 </div>
896 <div class="card">
897 <div class="card-body">
898 <h5 class="card-title">Wallet Deposit Address</h5>
899 <div class="row wallet-address">
900 <div class="col-md-8">
901 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
902 of your
903 funds at once if you deposit more than your daily withdrawal limit.</p>
904 <div class="input-group">
905 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
906 <div class="input-group-prepend">
907 <button class="btn btn-primary">COPY</button>
908 </div>
909 </div>
910 </div>
911 <div class="col-md-4">
912 <img src="assets/img/qr-code-light.svg" alt="qr-code">
913 </div>
914 </div>
915 </div>
916 </div>
917 <div class="card">
918 <div class="card-body">
919 <h5 class="card-title">Latest Transactions</h5>
920 <div class="wallet-history">
921 <table class="table">
922 <thead>
923 <tr>
924 <th>No.</th>
925 <th>Date</th>
926 <th>Status</th>
927 <th>Amount</th>
928 </tr>
929 </thead>
930 <tbody>
931 <tr>
932 <td>1</td>
933 <td>25-04-2019</td>
934 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
935 <td>4.5454334</td>
936 </tr>
937 <tr>
938 <td>2</td>
939 <td>25-05-2019</td>
940 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
941 <td>0.5484468</td>
942 </tr>
943 <tr>
944 <td>3</td>
945 <td>25-06-2019</td>
946 <td><i class="icon ion-md-close-circle-outline red"></i></td>
947 <td>2.5454545</td>
948 </tr>
949 <tr>
950 <td>4</td>
951 <td>25-07-2019</td>
952 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
953 <td>1.45894147</td>
954 </tr>
955 <tr>
956 <td>3</td>
957 <td>25-08-2019</td>
958 <td><i class="icon ion-md-close-circle-outline red"></i></td>
959 <td>2.5454545</td>
960 </tr>
961 </tbody>
962 </table>
963 </div>
964 </div>
965 </div>
966 </div>
967 <div class="tab-pane fade" id="coinTRX" role="tabpanel">
968 <div class="card">
969 <div class="card-body">
970 <h5 class="card-title">Balances</h5>
971 <ul>
972 <li class="d-flex justify-content-between align-items-center">
973 <div class="d-flex align-items-center">
974 <i class="icon ion-md-cash"></i>
975 <h2>Total Equity</h2>
976 </div>
977 <div>
978 <h3>4.3344 TRX</h3>
979 </div>
980 </li>
981 <li class="d-flex justify-content-between align-items-center">
982 <div class="d-flex align-items-center">
983 <i class="icon ion-md-checkmark"></i>
984 <h2>Available Margin</h2>
985 </div>
986 <div>
987 <h3>1.453 TRX</h3>
988 </div>
989 </li>
990 </ul>
991 <button class="btn green">Deposit</button>
992 <button class="btn red">Withdraw</button>
993 </div>
994 </div>
995 <div class="card">
996 <div class="card-body">
997 <h5 class="card-title">Wallet Deposit Address</h5>
998 <div class="row wallet-address">
999 <div class="col-md-8">
1000 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
1001 of your
1002 funds at once if you deposit more than your daily withdrawal limit.</p>
1003 <div class="input-group">
1004 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
1005 <div class="input-group-prepend">
1006 <button class="btn btn-primary">COPY</button>
1007 </div>
1008 </div>
1009 </div>
1010 <div class="col-md-4">
1011 <img src="assets/img/qr-code-light.svg" alt="qr-code">
1012 </div>
1013 </div>
1014 </div>
1015 </div>
1016 <div class="card">
1017 <div class="card-body">
1018 <h5 class="card-title">Latest Transactions</h5>
1019 <div class="wallet-history">
1020 <table class="table">
1021 <thead>
1022 <tr>
1023 <th>No.</th>
1024 <th>Date</th>
1025 <th>Status</th>
1026 <th>Amount</th>
1027 </tr>
1028 </thead>
1029 <tbody>
1030 <tr>
1031 <td>1</td>
1032 <td>25-04-2019</td>
1033 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1034 <td>4.5454334</td>
1035 </tr>
1036 <tr>
1037 <td>2</td>
1038 <td>25-05-2019</td>
1039 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1040 <td>0.5484468</td>
1041 </tr>
1042 <tr>
1043 <td>3</td>
1044 <td>25-06-2019</td>
1045 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1046 <td>2.5454545</td>
1047 </tr>
1048 <tr>
1049 <td>4</td>
1050 <td>25-07-2019</td>
1051 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1052 <td>1.45894147</td>
1053 </tr>
1054 <tr>
1055 <td>3</td>
1056 <td>25-08-2019</td>
1057 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1058 <td>2.5454545</td>
1059 </tr>
1060 </tbody>
1061 </table>
1062 </div>
1063 </div>
1064 </div>
1065 </div>
1066 <div class="tab-pane fade" id="coinEOS" role="tabpanel">
1067 <div class="card">
1068 <div class="card-body">
1069 <h5 class="card-title">Balances</h5>
1070 <ul>
1071 <li class="d-flex justify-content-between align-items-center">
1072 <div class="d-flex align-items-center">
1073 <i class="icon ion-md-cash"></i>
1074 <h2>Total Equity</h2>
1075 </div>
1076 <div>
1077 <h3>33.35 EOS</h3>
1078 </div>
1079 </li>
1080 <li class="d-flex justify-content-between align-items-center">
1081 <div class="d-flex align-items-center">
1082 <i class="icon ion-md-checkmark"></i>
1083 <h2>Available Margin</h2>
1084 </div>
1085 <div>
1086 <h3>4.445 EOS</h3>
1087 </div>
1088 </li>
1089 </ul>
1090 <button class="btn green">Deposit</button>
1091 <button class="btn red">Withdraw</button>
1092 </div>
1093 </div>
1094 <div class="card">
1095 <div class="card-body">
1096 <h5 class="card-title">Wallet Deposit Address</h5>
1097 <div class="row wallet-address">
1098 <div class="col-md-8">
1099 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
1100 of your
1101 funds at once if you deposit more than your daily withdrawal limit.</p>
1102 <div class="input-group">
1103 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
1104 <div class="input-group-prepend">
1105 <button class="btn btn-primary">COPY</button>
1106 </div>
1107 </div>
1108 </div>
1109 <div class="col-md-4">
1110 <img src="assets/img/qr-code-light.svg" alt="qr-code">
1111 </div>
1112 </div>
1113 </div>
1114 </div>
1115 <div class="card">
1116 <div class="card-body">
1117 <h5 class="card-title">Latest Transactions</h5>
1118 <div class="wallet-history">
1119 <table class="table">
1120 <thead>
1121 <tr>
1122 <th>No.</th>
1123 <th>Date</th>
1124 <th>Status</th>
1125 <th>Amount</th>
1126 </tr>
1127 </thead>
1128 <tbody>
1129 <tr>
1130 <td>1</td>
1131 <td>25-04-2019</td>
1132 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1133 <td>4.5454334</td>
1134 </tr>
1135 <tr>
1136 <td>2</td>
1137 <td>25-05-2019</td>
1138 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1139 <td>0.5484468</td>
1140 </tr>
1141 <tr>
1142 <td>3</td>
1143 <td>25-06-2019</td>
1144 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1145 <td>2.5454545</td>
1146 </tr>
1147 <tr>
1148 <td>4</td>
1149 <td>25-07-2019</td>
1150 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1151 <td>1.45894147</td>
1152 </tr>
1153 <tr>
1154 <td>3</td>
1155 <td>25-08-2019</td>
1156 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1157 <td>2.5454545</td>
1158 </tr>
1159 </tbody>
1160 </table>
1161 </div>
1162 </div>
1163 </div>
1164 </div>
1165 <div class="tab-pane fade" id="coinXMR" role="tabpanel">
1166 <div class="card">
1167 <div class="card-body">
1168 <h5 class="card-title">Balances</h5>
1169 <ul>
1170 <li class="d-flex justify-content-between align-items-center">
1171 <div class="d-flex align-items-center">
1172 <i class="icon ion-md-cash"></i>
1173 <h2>Total Equity</h2>
1174 </div>
1175 <div>
1176 <h3>34.333 XMR</h3>
1177 </div>
1178 </li>
1179 <li class="d-flex justify-content-between align-items-center">
1180 <div class="d-flex align-items-center">
1181 <i class="icon ion-md-checkmark"></i>
1182 <h2>Available Margin</h2>
1183 </div>
1184 <div>
1185 <h3>2.354 XMR</h3>
1186 </div>
1187 </li>
1188 </ul>
1189 <button class="btn green">Deposit</button>
1190 <button class="btn red">Withdraw</button>
1191 </div>
1192 </div>
1193 <div class="card">
1194 <div class="card-body">
1195 <h5 class="card-title">Wallet Deposit Address</h5>
1196 <div class="row wallet-address">
1197 <div class="col-md-8">
1198 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
1199 of your
1200 funds at once if you deposit more than your daily withdrawal limit.</p>
1201 <div class="input-group">
1202 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
1203 <div class="input-group-prepend">
1204 <button class="btn btn-primary">COPY</button>
1205 </div>
1206 </div>
1207 </div>
1208 <div class="col-md-4">
1209 <img src="assets/img/qr-code-light.svg" alt="qr-code">
1210 </div>
1211 </div>
1212 </div>
1213 </div>
1214 <div class="card">
1215 <div class="card-body">
1216 <h5 class="card-title">Latest Transactions</h5>
1217 <div class="wallet-history">
1218 <table class="table">
1219 <thead>
1220 <tr>
1221 <th>No.</th>
1222 <th>Date</th>
1223 <th>Status</th>
1224 <th>Amount</th>
1225 </tr>
1226 </thead>
1227 <tbody>
1228 <tr>
1229 <td>1</td>
1230 <td>25-04-2019</td>
1231 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1232 <td>4.5454334</td>
1233 </tr>
1234 <tr>
1235 <td>2</td>
1236 <td>25-05-2019</td>
1237 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1238 <td>0.5484468</td>
1239 </tr>
1240 <tr>
1241 <td>3</td>
1242 <td>25-06-2019</td>
1243 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1244 <td>2.5454545</td>
1245 </tr>
1246 <tr>
1247 <td>4</td>
1248 <td>25-07-2019</td>
1249 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1250 <td>1.45894147</td>
1251 </tr>
1252 <tr>
1253 <td>3</td>
1254 <td>25-08-2019</td>
1255 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1256 <td>2.5454545</td>
1257 </tr>
1258 </tbody>
1259 </table>
1260 </div>
1261 </div>
1262 </div>
1263 </div>
1264 <div class="tab-pane fade" id="coinKCS" role="tabpanel">
1265 <div class="card">
1266 <div class="card-body">
1267 <h5 class="card-title">Balances</h5>
1268 <ul>
1269 <li class="d-flex justify-content-between align-items-center">
1270 <div class="d-flex align-items-center">
1271 <i class="icon ion-md-cash"></i>
1272 <h2>Total Equity</h2>
1273 </div>
1274 <div>
1275 <h3>86.577 KCS</h3>
1276 </div>
1277 </li>
1278 <li class="d-flex justify-content-between align-items-center">
1279 <div class="d-flex align-items-center">
1280 <i class="icon ion-md-checkmark"></i>
1281 <h2>Available Margin</h2>
1282 </div>
1283 <div>
1284 <h3>5.78 KCS</h3>
1285 </div>
1286 </li>
1287 </ul>
1288 <button class="btn green">Deposit</button>
1289 <button class="btn red">Withdraw</button>
1290 </div>
1291 </div>
1292 <div class="card">
1293 <div class="card-body">
1294 <h5 class="card-title">Wallet Deposit Address</h5>
1295 <div class="row wallet-address">
1296 <div class="col-md-8">
1297 <p>Deposits to this address are unlimited. Note that you may not be able to withdraw all
1298 of your
1299 funds at once if you deposit more than your daily withdrawal limit.</p>
1300 <div class="input-group">
1301 <input type="text" class="form-control" value="Ad87deD4gEe8dG57Ede4eEg5dREs4d5e8f4e">
1302 <div class="input-group-prepend">
1303 <button class="btn btn-primary">COPY</button>
1304 </div>
1305 </div>
1306 </div>
1307 <div class="col-md-4">
1308 <img src="assets/img/qr-code-light.svg" alt="qr-code">
1309 </div>
1310 </div>
1311 </div>
1312 </div>
1313 <div class="card">
1314 <div class="card-body">
1315 <h5 class="card-title">Latest Transactions</h5>
1316 <div class="wallet-history">
1317 <table class="table">
1318 <thead>
1319 <tr>
1320 <th>No.</th>
1321 <th>Date</th>
1322 <th>Status</th>
1323 <th>Amount</th>
1324 </tr>
1325 </thead>
1326 <tbody>
1327 <tr>
1328 <td>1</td>
1329 <td>25-04-2019</td>
1330 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1331 <td>4.5454334</td>
1332 </tr>
1333 <tr>
1334 <td>2</td>
1335 <td>25-05-2019</td>
1336 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1337 <td>0.5484468</td>
1338 </tr>
1339 <tr>
1340 <td>3</td>
1341 <td>25-06-2019</td>
1342 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1343 <td>2.5454545</td>
1344 </tr>
1345 <tr>
1346 <td>4</td>
1347 <td>25-07-2019</td>
1348 <td><i class="icon ion-md-checkmark-circle-outline green"></i></td>
1349 <td>1.45894147</td>
1350 </tr>
1351 <tr>
1352 <td>3</td>
1353 <td>25-08-2019</td>
1354 <td><i class="icon ion-md-close-circle-outline red"></i></td>
1355 <td>2.5454545</td>
1356 </tr>
1357 </tbody>
1358 </table>
1359 </div>
1360 </div>
1361 </div>
1362 </div>
1363 </div>
1364 </div>
1365 </div>
1366 </div>
1367 </div>
1368 <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
1369 <div class="card">
1370 <div class="card-body">
1371 <h5 class="card-title">Notifications</h5>
1372 <div class="settings-notification">
1373 <ul>
1374 <li>
1375 <div class="notification-info">
1376 <p>Update price</p>
1377 <span>Get the update price in your dashboard</span>
1378 </div>
1379 <div class="custom-control custom-switch">
1380 <input type="checkbox" class="custom-control-input" id="notification1">
1381 <label class="custom-control-label" for="notification1"></label>
1382 </div>
1383 </li>
1384 <li>
1385 <div class="notification-info">
1386 <p>2FA</p>
1387 <span>Unable two factor authentication service</span>
1388 </div>
1389 <div class="custom-control custom-switch">
1390 <input type="checkbox" class="custom-control-input" id="notification2" checked>
1391 <label class="custom-control-label" for="notification2"></label>
1392 </div>
1393 </li>
1394 <li>
1395 <div class="notification-info">
1396 <p>Latest news</p>
1397 <span>Get the latest news in your mail</span>
1398 </div>
1399 <div class="custom-control custom-switch">
1400 <input type="checkbox" class="custom-control-input" id="notification3">
1401 <label class="custom-control-label" for="notification3"></label>
1402 </div>
1403 </li>
1404 <li>
1405 <div class="notification-info">
1406 <p>Email Service</p>
1407 <span>Get security code in your mail</span>
1408 </div>
1409 <div class="custom-control custom-switch">
1410 <input type="checkbox" class="custom-control-input" id="notification4" checked>
1411 <label class="custom-control-label" for="notification4"></label>
1412 </div>
1413 </li>
1414 <li>
1415 <div class="notification-info">
1416 <p>Phone Notify</p>
1417 <span>Get transition notification in your phone </span>
1418 </div>
1419 <div class="custom-control custom-switch">
1420 <input type="checkbox" class="custom-control-input" id="notification5" checked>
1421 <label class="custom-control-label" for="notification5"></label>
1422 </div>
1423 </li>
1424 </ul>
1425 </div>
1426 </div>
1427 </div>
1428 <div class="card settings-profile">
1429 <div class="card-body">
1430 <h5 class="card-title">Create API Key</h5>
1431 <div class="form-row">
1432 <div class="col-md-6">
1433 <label for="generateKey">Generate key name</label>
1434 <input id="generateKey" type="text" class="form-control" placeholder="Enter your key name">
1435 </div>
1436 <div class="col-md-6">
1437 <label for="rewritePassword">Confirm password</label>
1438 <input id="rewritePassword" type="password" class="form-control"
1439 placeholder="Confirm your password">
1440 </div>
1441 <div class="col-md-12">
1442 <input type="submit" value="Create API key">
1443 </div>
1444 </div>
1445 </div>
1446 </div>
1447 <div class="card">
1448 <div class="card-body">
1449 <h5 class="card-title">Your API Keys</h5>
1450 <div class="wallet-history">
1451 <table class="table">
1452 <thead>
1453 <tr>
1454 <th>No.</th>
1455 <th>Key</th>
1456 <th>Status</th>
1457 <th>Action</th>
1458 </tr>
1459 </thead>
1460 <tbody>
1461 <tr>
1462 <td>1</td>
1463 <td>zRmWVcrAZ1C0RZkFMu7K5v0KWC9jUJLt</td>
1464 <td>
1465 <div class="custom-control custom-switch">
1466 <input type="checkbox" class="custom-control-input" id="apiStatus1" checked>
1467 <label class="custom-control-label" for="apiStatus1"></label>
1468 </div>
1469 </td>
1470 <td><i class="icon ion-md-trash"></i></td>
1471 </tr>
1472 <tr>
1473 <td>2</td>
1474 <td>Rv5dgnKdmVPyHwxeExBYz8uFwYQz3Jvg</td>
1475 <td>
1476 <div class="custom-control custom-switch">
1477 <input type="checkbox" class="custom-control-input" id="apiStatus2">
1478 <label class="custom-control-label" for="apiStatus2"></label>
1479 </div>
1480 </td>
1481 <td><i class="icon ion-md-trash"></i></td>
1482 </tr>
1483 <tr>
1484 <td>3</td>
1485 <td>VxEYIs1HwgmtKTUMA4aknjSEjjePZIWu</td>
1486 <td>
1487 <div class="custom-control custom-switch">
1488 <input type="checkbox" class="custom-control-input" id="apiStatus3">
1489 <label class="custom-control-label" for="apiStatus3"></label>
1490 </div>
1491 </td>
1492 <td><i class="icon ion-md-trash"></i></td>
1493 </tr>
1494 <tr>
1495 <td>4</td>
1496 <td>M01DueJ4x3awI1SSLGT3CP1EeLSnqt8o</td>
1497 <td>
1498 <div class="custom-control custom-switch">
1499 <input type="checkbox" class="custom-control-input" id="apiStatus4">
1500 <label class="custom-control-label" for="apiStatus4"></label>
1501 </div>
1502 </td>
1503 <td><i class="icon ion-md-trash"></i></td>
1504 </tr>
1505 </tbody>
1506 </table>
1507 </div>
1508 </div>
1509 </div>
1510 </div>
1511 </div>
1512 </div>
1513 </div>
1514 </div>
1515 </div>
1516
1517 <script src="assets/js/jquery-3.4.1.min.js"></script>
1518 <script src="assets/js/popper.min.js"></script>
1519 <script src="assets/js/bootstrap.min.js"></script>
1520 <script src="assets/js/amcharts-core.min.js"></script>
1521 <script src="assets/js/amcharts.min.js"></script>
1522 <script src="assets/js/custom.js"></script>
1523</body>
1524
1525</html>