From 3462e683cee5bd2574c9c93f45d958263e03976d Mon Sep 17 00:00:00 2001 From: Abhishek Sinha Date: Thu, 30 Apr 2020 17:55:58 +0530 Subject: [PATCH] added new ui fixed version --- index.html | 2647 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 2094 insertions(+), 553 deletions(-) diff --git a/index.html b/index.html index 1a3ffc5..7d13596 100644 --- a/index.html +++ b/index.html @@ -4,101 +4,1460 @@ Local Bitcoin++ - + @import url("https://fonts.googleapis.com/css?family=Barlow:400,500,600,700&display=swap"); + @import url("https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"); + @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"); + * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Barlow', sans-serif; + } + + :root { + --primary-color: mediumspringgreen; + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #eaeaea; + } + + body { + background: var(--background); + color: rgba(var(--text), 1); + font-size: 16px; + margin: 1rem; + } + + a { + font-weight: 600; + text-decoration: none; + color: var(--primary-color); + } + + .dark-text { + color: #111; + } + + h1, h2, h3, h4 { + font-weight: 600; + } + + h5 { + font-weight: 500; + letter-spacing: 0.06em; + } + + button { + position: relative; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.4em 0.6em; + font-weight: 600; + cursor: pointer; + border-radius: 0.2em; + color: rgba(var(--text), 1); + -webkit-transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s; + transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s; + transition: transform 0.3s, clip-path 0.3s; + transition: transform 0.3s, clip-path 0.3s, -webkit-transform 0.3s, -webkit-clip-path 0.3s; + border: none; + -webkit-clip-path: circle(100%); + clip-path: circle(100%); + background: rgba(var(--text-light), 0.1); + -webkit-tap-highlight-color: transparent; + } + + button::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: rgba(var(--text-light), 0.16); + left: 0; + right: 0; + top: 0; + bottom: 0; + -webkit-clip-path: circle(0%); + clip-path: circle(0%); + -webkit-transition: 0.3s; + transition: 0.3s; + } + + button:hover::after { + -webkit-clip-path: circle(100%); + clip-path: circle(100%); + } + + button:focus { + outline: thin solid rgba(var(--text-light), 0.4); + } + + button:disabled { + cursor: default; + background: rgba(var(--text-light), 0.4); + } + + button:disabled ~ .loader { + opacity: 0; + } + + button:disabled::after { + -webkit-clip-path: none; + clip-path: none; + } + + select { + padding: 1em; + border-radius: 0.4em; + background: var(--background); + color: rgba(var(--text), 1); + width: 100%; + } + + select option { + font-size: 1rem; + } + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + input[type=number] { + -moz-appearance: textfield; + } + + input:invalid { + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + + ::-moz-focus-inner { + border: none; + } + + .bottom-padding { + padding-bottom: 1em; + } + + .top-padding { + padding-top: 1em; + } + + .bottom-margin { + margin-bottom: 1rem !important; + } + + .top-margin { + margin-top: 1.5rem !important; + } + + .flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .grid { + display: -ms-grid; + display: grid; + } + + .grid-2 { + -ms-grid-columns: auto auto; + grid-template-columns: auto auto; + gap: 1em; + } + + .light-text { + color: rgba(var(--text), 0.7); + } + + .hide { + opacity: 0; + pointer-events: none; + } + + .hide-completely { + display: none !important; + } + + .breakable { + word-break: break-all; + } + + .separator { + padding: .1em; + } + + .no-transformations { + -webkit-transform: none !important; + transform: none !important; + } + + .hoverable { + position: relative; + } + + .hoverable::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: rgba(var(--text-light), 0.1); + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + -webkit-clip-path: circle(0%); + clip-path: circle(0%); + -webkit-transition: 0.3s; + transition: 0.3s; + } + + .hoverable:hover::after { + -webkit-clip-path: circle(100%); + clip-path: circle(100%); + } + + .loader { + fill: none; + stroke-width: 6; + stroke: var(--primary-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 210; + stroke-dasharray: 210; + -ms-grid-column-align: center; + justify-self: center; + margin: 0 !important; + } + + @-webkit-keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @-webkit-keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } + } + + @keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } + } + + .action { + position: relative; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + cursor: pointer; + } + + .action:hover button::after { + -webkit-clip-path: circle(100%); + clip-path: circle(100%); + } + + .action .btn { + z-index: 2; + } + + .action .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + } + + .clip { + -webkit-clip-path: circle(0) !important; + clip-path: circle(0) !important; + } + + .animate-loader { + -webkit-animation: load 2.6s infinite, rotate 1s infinite linear; + animation: load 2.6s infinite, rotate 1s infinite linear; + } + + .expand { + width: 100%; + } + + #textCopied { + padding: 1rem; + border-radius: 2rem; + background: rgba(var(--foreground), 1); + position: fixed; + bottom: 0; + pointer-events: none; + margin: 2rem 0; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + -webkit-transition: 0.3s opacity ease; + transition: 0.3s opacity ease; + z-index: 20; + } + + .copy-icon { + stroke: none; + height: 2.4rem; + width: 2.4rem; + fill: rgba(var(--text), 1); + opacity: 0.6; + padding: 0.6rem; + padding-right: 0; + overflow: visible; + cursor: pointer; + } + + .copy-icon:hover { + opacity: 1; + } + + .copy-row { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 0 2rem 0; + color: var(--primary-color); + } + + .copy-row h3 { + font-weight: normal; + font-family: 'Roboto', sans-serif; + letter-spacing: 0.06em; + } + + @-webkit-keyframes fade { + from { + opacity: 0; + -webkit-transform: translateX(1rem); + transform: translateX(1rem); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } + } + + @keyframes fade { + from { + opacity: 0; + -webkit-transform: translateX(1rem); + transform: translateX(1rem); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } + } + + .input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + padding: 0.8em; + margin-bottom: 1.5em; + border-radius: 0.2em; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + background: rgba(var(--text-light), 0.1); + -webkit-animation: fade 0.3s; + animation: fade 0.3s; + } + + .input:last-of-type { + margin-bottom: 0; + } + + .input input:focus { + caret-color: var(--primary-color); + } + + .input .label { + opacity: .7; + font-weight: 500; + font-size: 1em; + position: absolute; + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + -webkit-transform-origin: left; + transform-origin: left; + pointer-events: none; + will-change: contents; + } + + .input input { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 1rem; + border: none; + background: transparent; + outline: none; + color: rgba(var(--text), 1); + } + + .animate-label input { + -webkit-transform: translateY(0.5em); + transform: translateY(0.5em); + } + + .animate-label .label { + -webkit-transform: translateY(-60%) scale(0.7); + transform: translateY(-60%) scale(0.7); + opacity: 1; + color: var(--primary-color); + } + + .container-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + padding: 0 1rem; + } + + .container-header h3 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 500; + } + + .container-header span { + color: var(--accent-color); + border-radius: 0.2rem; + margin-right: 0.2rem; + padding: 0.5rem 1rem; + font-weight: 500; + } + + .btn { + background: var(--primary-color); + color: rgba(var(--foreground), 1); + padding: 0.4em 1em; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + + .back-arrow { + stroke: rgba(var(--text), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 1rem 0.5rem 0; + cursor: pointer; + } + + .card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground), 1); + } + + .solid-background { + background: var(--background) !important; + } + + .popup-container { + display: -ms-grid; + display: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-items: center; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .popup-container .popup { + -ms-flex-item-align: end; + align-self: flex-end; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; + border-radius: 0.5rem 0.5rem 0 0; + padding: 1.5rem; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + background: rgba(var(--foreground), 1); + -webkit-transform: translateY(1rem); + transform: translateY(1rem); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); + box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); + overflow: hidden auto; + } + + .popup-container .popup h5 { + margin: 0.5rem 0; + opacity: 0.9; + font-weight: 400; + } + + .popup-container .popup button:first-of-type { + margin-left: auto; + } + + .popup-container .popup .container-header { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + margin-bottom: 1.5em; + } + + .popup-container .popup .container-header .btn { + padding: 0.6em 1.2em; + } + + .popup-container .popup #upiToAddress { + padding: 1em 0; + } + + .crypto-selector { + margin: 0.4em 0 1.5em 0; + } + + .icon { + -webkit-transition: 0.3s; + transition: 0.3s; + border-radius: 4em; + padding: 0.4em; + height: 2.4em; + width: 2.4em; + overflow: visible; + fill: rgba(var(--text), 1); + } + + .btc { + fill: #FF9900; + } + + .flo { + fill: #2080a2; + } + + .inr { + padding: 0.45em; + } + + .select-crypto { + position: relative; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: 1em; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + } + + .select-crypto input { + display: none; + } + + .select-crypto input:checked ~ .icon { + -webkit-box-shadow: 0 0 0 2px #00C853 inset; + box-shadow: 0 0 0 2px #00C853 inset; + } + + .select-crypto input:checked ~ .selected { + -webkit-transform: none; + transform: none; + } + + .select-crypto .selected { + position: absolute; + right: 0; + height: 1em; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + } + + .select-crypto .selected circle { + fill: #00C853; + stroke: none; + } + + .select-crypto .selected polyline { + fill: none; + stroke: rgba(var(--foreground), 1); + stroke-width: 6; + } + + #show_message { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%); + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, -webkit-transform 0.3s; + transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; + -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: rgba(var(--text), 1); + position: fixed; + right: 0; + top: 0; + bottom: auto; + width: 100%; + max-width: 100%; + z-index: 11; + background: rgba(var(--foreground), 1); + } + + #show_message #error_icon { + fill: #E53935; + } + + #show_message #done_icon { + fill: #00C853; + } + + #show_message .notification-icon { + height: 2em; + width: 2em; + margin: 1em 0 1em 1em; + fill: rgba(var(--text), 1); + } + + #show_message div { + padding: 1em; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + #show_message div h5 { + opacity: 0.8; + } + + #show_message span { + font-weight: 500; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + #show_message button { + padding: 1rem; + margin: 0 1em 0 0; + border: none; + background: none; + } + + #show_message button svg { + height: 1em; + width: 1em; + stroke: rgba(var(--text), 1); + stroke-width: 6; + } + + #confirmation { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 1rem; + } + + #confirmation p { + margin: 1rem; + font-size: 1rem; + font-weight: 500; + color: rgba(var(--rgb-bw), 1) !important; + } + + #confirmation div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 1em; + -webkit-box-pack: right; + -ms-flex-pack: right; + justify-content: right; + width: 100%; + } + + #confirmation div button { + background: none; + } + + #confirmation div button:first-of-type { + margin-right: 0.6em; + } + + #background { + position: fixed; + z-index: -1; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + } + + #main_header { + padding: 1em 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + #main_header .icon { + stroke: rgba(var(--text), 1); + stroke-width: 6; + height: 2.4rem; + width: 2.4rem; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; + cursor: pointer; + padding: 0.6rem; + } + + #main_header .icon:last-of-type { + margin-left: 1rem; + } + + #user { + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + } + + #profile_pic { + padding: 1em; + overflow: visible; + fill: none; + stroke: rgba(var(--text-light), 1); + stroke-width: 4; + background: var(--background); + border-radius: 4em; + width: 4em; + height: 4em; + stroke-linecap: round; + } + + #switcher_header { + list-style: none; + padding: 0; + margin-bottom: 2em; + -ms-grid-columns: (max-content)[3]; + grid-template-columns: repeat(3, -webkit-max-content); + grid-template-columns: repeat(3, max-content); + gap: 2em; + border-bottom: 1px solid rgba(var(--text), 0.2); + } + + #switcher_header li { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 1.2em; + font-weight: 600; + opacity: 0.6; + padding: 0.4em 0; + text-transform: uppercase; + letter-spacing: 0.1em; + } + + #switcher_header li:hover { + opacity: 1; + cursor: pointer; + } + + #switcher_header li:focus { + outline: none; + } + + #switcher_header .active { + opacity: 1; + border-bottom: 0.1em solid var(--primary-color); + } + + .exchange-section { + gap: 2em; + -ms-grid-columns: (max-content)[3]; + grid-template-columns: repeat(3, -webkit-max-content); + grid-template-columns: repeat(3, max-content); + } + + .exchange-option { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0.5em; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + -webkit-tap-highlight-color: transparent; + font-family: 'Roboto', sans-serif; + } + + .exchange-option:active { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + + .exchange-option svg { + padding: 1.2em; + height: 4em; + width: 4em; + fill: none; + border-radius: 2em; + margin-bottom: 0.4em; + background: var(--background); + stroke: rgba(var(--text), 1); + stroke-width: 3; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; + } + + .order { + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; + margin-bottom: 2em; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + + .order:last-of-type { + margin-bottom: 0; + } + + .order .details { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + .order .details h3 { + margin-bottom: 0.2em; + } + + .order .details h5 { + margin-top: 0.6em; + color: rgba(var(--text-light), 1); + } + + #sign_in_popup { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + border-radius: 0.5em; + width: calc(100vw - 2em); + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cdefs%3E%3Cstyle%3E.a,.b,.c%7Bfill:none;stroke:%23777;stroke-miterlimit:10;opacity:0.2;%7D.a%7Bstroke-width:0.5px;%7D.c%7Bstroke-width:0.75px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EArtboard 3%3C/title%3E%3Cpath class='a' d='M38.59,110.6l-.82,5.71a1,1,0,0,0,1.36,1.07l5.36-2.15a1,1,0,0,0,.24-1.71L40.19,110A1,1,0,0,0,38.59,110.6Z'/%3E%3Cpath class='b' d='M79,44.57A10.45,10.45,0,0,1,71.43,29a.54.54,0,0,0-.62-.78A10.47,10.47,0,1,0,81.22,45.58a.54.54,0,0,0-.41-.91A9.81,9.81,0,0,1,79,44.57Z'/%3E%3Cpath class='a' d='M99.32,112.2l3.66-.12a.2.2,0,0,1,.1.37L99.8,114.1a.19.19,0,0,0-.11.18l.12,3.66a.2.2,0,0,1-.37.1l-1.64-3.28a.21.21,0,0,0-.19-.11l-3.66.12a.19.19,0,0,1-.09-.37l3.27-1.65a.19.19,0,0,0,.11-.18l-.12-3.66a.2.2,0,0,1,.38-.1l1.64,3.28A.19.19,0,0,0,99.32,112.2Z'/%3E%3Ccircle class='b' cx='168' cy='126' r='5.5'/%3E%3Cpath class='a' d='M131.89,20.1l-7.79,1.56a1.37,1.37,0,0,0-.76,2.25l5.24,6a1.37,1.37,0,0,0,2.34-.47l2.54-7.52A1.37,1.37,0,0,0,131.89,20.1Z'/%3E%3Cpath class='a' d='M206.63,100.4l.87,4.35a.24.24,0,0,1-.43.19l-2.61-3.58a.22.22,0,0,0-.24-.1l-4.34.87a.24.24,0,0,1-.19-.42l3.58-2.61a.24.24,0,0,0,.1-.24l-.87-4.34a.24.24,0,0,1,.42-.19l2.61,3.58a.25.25,0,0,0,.24.09l4.34-.87a.24.24,0,0,1,.19.43l-3.58,2.61A.21.21,0,0,0,206.63,100.4Z'/%3E%3Cpath class='a' d='M165,105.35l.59,1.86a.1.1,0,0,1-.17.1l-1.32-1.43a.09.09,0,0,0-.11,0l-1.86.59a.1.1,0,0,1-.1-.17L163.5,105a.09.09,0,0,0,0-.11l-.59-1.86a.11.11,0,0,1,.18-.1l1.31,1.44a.09.09,0,0,0,.11,0l1.86-.59a.1.1,0,0,1,.1.17l-1.43,1.32A.09.09,0,0,0,165,105.35Z'/%3E%3Cpath class='a' d='M65.06,91l1.42,1.34a.1.1,0,0,1-.11.17l-1.85-.62a.11.11,0,0,0-.11,0L63.08,93.3a.11.11,0,0,1-.18-.11l.62-1.85a.11.11,0,0,0,0-.11L62.07,89.9a.11.11,0,0,1,.11-.18l1.85.62a.11.11,0,0,0,.11,0l1.34-1.42a.1.1,0,0,1,.17.11L65,90.85A.11.11,0,0,0,65.06,91Z'/%3E%3Cpath class='a' d='M118.76,45.25l1.72,1.62a.13.13,0,0,1-.13.21l-2.24-.75a.12.12,0,0,0-.13,0l-1.62,1.72a.13.13,0,0,1-.21-.13l.75-2.23a.14.14,0,0,0,0-.14L115.15,44a.13.13,0,0,1,.13-.22l2.23.75a.12.12,0,0,0,.14,0l1.61-1.72a.13.13,0,0,1,.22.13l-.75,2.24A.11.11,0,0,0,118.76,45.25Z'/%3E%3Cpath class='b' d='M32.71,18H26.29a2,2,0,0,0-1.73,1l-3.2,5.55a2,2,0,0,0,0,2l3.2,5.55a2,2,0,0,0,1.73,1h6.42a2,2,0,0,0,1.73-1l3.2-5.55a2,2,0,0,0,0-2L34.44,19A2,2,0,0,0,32.71,18Z'/%3E%3Cpath class='b' d='M77.11,132.77H73.17a1.23,1.23,0,0,0-1.07.61l-2,3.42a1.23,1.23,0,0,0,0,1.23l2,3.41a1.23,1.23,0,0,0,1.07.61h3.94a1.22,1.22,0,0,0,1.06-.61l2-3.41a1.28,1.28,0,0,0,0-1.23l-2-3.42A1.22,1.22,0,0,0,77.11,132.77Z'/%3E%3Cpath class='c' d='M106.11,86l-4.29,6.63a1.36,1.36,0,0,0,1.08,2.1l7.89.4a1.37,1.37,0,0,0,1.28-2l-3.6-7A1.36,1.36,0,0,0,106.11,86Z'/%3E%3Ccircle class='b' cx='36' cy='68' r='2.5'/%3E%3Cpath class='b' d='M180.69,20.1h-2.1a.64.64,0,0,0-.57.33L177,22.25a.63.63,0,0,0,0,.65L178,24.73a.65.65,0,0,0,.57.32h2.1a.65.65,0,0,0,.57-.32l1.05-1.83a.63.63,0,0,0,0-.65l-1.05-1.82A.64.64,0,0,0,180.69,20.1Z'/%3E%3C/svg%3E"), rgba(var(--foreground), 0.6); + } + + #sign_in_popup h1 { + margin-top: 3em; + } + + #sign_in_popup p:first-of-type { + margin-bottom: 4em; + } + + #sign_in_popup .action { + margin-top: 1em; + } + + #sign_in_popup p:nth-of-type(2) { + margin-top: 2em; + margin-bottom: 1em; + } + + .primary-btn { + background: var(--primary-color); + padding: 1em 1.2em; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: black; + } + + .primary-btn::after { + background: rgba(var(--foreground), 0.1); + } + + .secondary-btn { + background: transparent; + padding: 1em 1.2em; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: rgba(var(--text), 1); + border: solid 2px var(--primary-color); + } + + .secondary-btn::after { + background: rgba(var(--foreground), 0.1); + } + + .crypto-price { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-grid-columns: auto 1fr auto; + grid-template-columns: auto 1fr auto; + } + + .crypto-price:first-of-type { + margin-bottom: 1em; + } + + .crypto-price h3 { + margin-left: 1em; + } + + .crypto-price h5 { + opacity: 0.8; + font-weight: 500; + } + + #market_price_display .flex, #balance_panel .flex { + margin-bottom: 1.5em; + } + + #market_price_display .light-text, #balance_panel .light-text { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + #market_price_display svg, #balance_panel svg { + margin-left: -0.4em; + margin-right: 0.5em; + } + + #balance_panel .grid { + margin-top: 1.5em; + } + + .empty-state { + padding: 2rem; + text-align: center; + display: none; + font-weight: 500; + } + + .dropdown { + position: relative; + } + + .dropdown header { + border-bottom: solid rgba(var(--text), 0.1) 1px; + padding: 1.5em; + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .dropdown header h5 { + cursor: pointer; + padding: 0.4em 0 0.4em 1em; + text-transform: uppercase; + letter-spacing: 0.1em; + } + + .dropdown .dropdown-content { + width: calc(100vw - 2rem); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + right: 0; + top: 100%; + background: rgba(var(--foreground), 1); + -webkit-box-shadow: 0.2em 0.4em 1em rgba(0, 0, 0, 0.2); + box-shadow: 0.2em 0.4em 1em rgba(0, 0, 0, 0.2); + border-radius: 0.4em; + overflow: hidden; + z-index: 2; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + } + + .dropdown #notification_container { + overscroll-behavior: contain; + overflow-y: auto; + } + + .dropdown #notification_container:empty ~ .empty-state { + display: block; + } + + .dropdown #notification_badge { + position: absolute; + top: -0.1em; + right: -0.1em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + } + + .dropdown #notification_badge[data-badge]::after { + content: attr(data-badge); + height: 1.2rem; + width: 1.2rem; + font-size: 0.9rem; + border-radius: 50%; + background: #E53935; + font-weight: 600; + } + + .dropdown #notification_badge[data-badge='0'] { + -webkit-transform: scale(0); + transform: scale(0); + } + + .notification { + padding: 1em 1.5em; + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; + gap: 0.4em 1em; + margin-bottom: 0.2em; + } + + .notification:last-of-type { + border-bottom: none; + } + + .notification h5 { + opacity: 0.8; + font-weight: normal; + } + + .notification .remove-notification { + padding: 0.2em; + height: 1.2em; + width: 1.2em; + stroke: rgba(var(--text), 0.8); + stroke-width: 6; + } + + .notification .remove-notification:active { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + + .notification p { + opacity: 0.9; + line-height: 1.4em; + font-family: 'Roboto', sans-serif; + } + + #event_log { + position: fixed; + top: 0; + bottom: 0; + right: 0; + width: 100%; + background: rgba(var(--foreground), 1); + z-index: 2; + -webkit-transform: translateX(1rem); + transform: translateX(1rem); + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, -webkit-transform 0.3s; + transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; + -webkit-box-shadow: 0 -1em 2em rgba(0, 0, 0, 0.4); + box-shadow: 0 -1em 2em rgba(0, 0, 0, 0.4); + } + + #event_log header { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 1.5rem 2rem; + } + + #event_log header svg { + stroke: rgba(var(--text), 1); + stroke-width: 6; + height: 2rem; + width: 2rem; + padding: 0.6rem; + cursor: pointer; + overflow: visible; + margin-left: auto; + } + + #event_log #log { + position: absolute; + top: 5rem; + bottom: 0; + font-family: 'Source Code Pro', monospace; + width: 100%; + padding: 2rem; + line-height: 2em; + color: rgba(var(--text), 0.8); + overflow-y: auto; + white-space: pre-line; + overscroll-behavior: contain; + } + + #main_loader { + -webkit-box-shadow: none; + box-shadow: none; + background: none; + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + + #main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--primary-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + -ms-grid-column-align: center; + justify-self: center; + margin-bottom: 2rem; + } + + #main_loader h3 { + width: 100%; + text-transform: uppercase; + font-weight: 400; + } + + #deposit_crypto_popup h5:nth-of-type(2) { + margin: 2em 0 1em 0; + } + + .deposit-crypto-group { + -webkit-animation: fade 0.3s; + animation: fade 0.3s; + } + + #orders_container:empty ~ .empty-state { + display: block; + } + + #main_logo { + height: 2rem; + width: 2rem; + fill: rgba(var(--text), 1); + margin-right: 1rem; + } + + @media only screen and (min-width: 640px) { + ::-webkit-scrollbar { + width: 0.3rem; + } + ::-webkit-scrollbar-thumb { + background: rgba(var(--text), 0.3); + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(var(--text), 0.6); + } + body { + margin: 1rem 6vw; + } + .popup-container .popup { + width: auto; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + border-radius: 0.2rem; + height: auto; + } + main { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1.5fr 1fr; + grid-template-columns: 1.5fr 1fr; + gap: 2em; + padding: 2em 0 0 0; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + #show_message { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0); + margin: 1rem; + max-width: 60vw; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + bottom: 0; + top: auto; + } + #confirmation { + padding: 1rem; + width: 24rem; + } + #confirmation button { + margin-left: 0.5rem; + } + #confirmation button:first-of-type { + margin-left: auto; + } + #confirmation p { + margin: 1rem; + margin-bottom: 2rem; + } + #sign_in_popup, + #buy_crypto_popup, #sell_crypto_popup, + #send_crypto_popup, #deposit_crypto_popup, #withdraw_crypto_popup, + #deposit_cash_popup, #withdraw_cash_popup { + width: 24rem; + } + .dropdown-content { + max-height: 80vh; + width: 24rem !important; + } + #event_log { + width: 40vw; + } + } + + @media only screen and (min-width: 1280px) { + body { + margin: 1rem 16vw; + } + main { + -ms-grid-columns: 2fr 1fr; + grid-template-columns: 2fr 1fr; + } + } + + @media only screen and (min-width: 1920px) { + body { + font-size: 24px; + margin: 2rem 24vw; + } + } + + @media only screen and (min-width: 2048px) { + body { + font-size: 24px; + margin: 2rem 32vw; + } + } + + @media only screen and (max-width: 320px) { + body { + font-size: 14px; + } + } + + @media (prefers-color-scheme: dark) { + :root { + --text: 238, 238, 238; + --text-light: 170, 170, 170; + --foreground: 26, 26, 26; + --background: #111; + } + } + + @media (prefers-color-scheme: light) { + :root { + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #eaeaea; + } + } + + @media (prefers-color-scheme: no-preference) { + :root { + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #eaeaea; + } + } + + @media (any-hover: hover) { + .cancel-order { + opacity: 0; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + } + .order:hover .cancel-order { + opacity: 1; + } + #main_header .icon:hover { + background: rgba(var(--text), 0.2); + } + .notification .remove-notification { + opacity: 0; + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s; + transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; + cursor: pointer; + } + .notification:hover .remove-notification { + opacity: 1; + } + } + -
- -
- ≡ -
-
+
+
+

Event Log

+ + Close + + + +
+
+
+
+ Copied +
+
@@ -126,7 +1485,17 @@ -
+ + +
+ +
- - RanchiMall -

Local Bitcoin++

- + + +
RanchiMall
+

Local Bitcoin++

+ + + Console + + + + +
@@ -175,91 +1572,111 @@
- - - Buy icon - - - - - - - + + + Buy crypto + + + + + + + +
Buy
 - - - Sell icon - - - - - - - - + + + Sell crypto + + + + + + +
Sell
- - - - - + + Send token icon + +
Send
 - - - - - - - + + deposit icon + + + + + + + + +
Deposit
 - - - - - - + + withdraw icon + + + + + + + + + +
Withdraw
- - - - - - - + + deposit icon + + + + + + + + +
Deposit
 - - - - - - + + withdraw icon + + + + + + + + + +
Withdraw
-

+

My Orders +

+
+

+ No trade orders yet.

-
- -
-

- Balance -

+
+

+ Balance +

+
+ + + + +
+
Cash
-

-
- - - - -
+

0

-
+
Bitcoin
-

-
- - - - -
+

0

FLO
-

-
- - - - -
+

0

@@ -376,13 +1779,13 @@