diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..63c1c18 --- /dev/null +++ b/css/main.css @@ -0,0 +1,1144 @@ +@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Barlow', sans-serif; +} + +:root { + scroll-behavior: smooth; +} + +body { + --primary-color: #303F9F; + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + background: var(--foreground); + color: rgba(var(--text), 1); + font-size: 16px; + margin: 1.5rem; +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--primary-color); +} + +.dark-text { + color: #111; +} + +h1, h2, h3, h4, h5 { + font-weight: 600; +} + +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; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.6rem 1rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.2em; + color: var(--primary-color); + -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), 0.1); + -webkit-tap-highlight-color: transparent; +} + +button:focus { + outline: thin solid rgba(var(--text-light), 0.4); +} + +button:disabled { + cursor: default; + background: rgba(var(--text-light), 1); +} + +button:disabled ~ .loader { + opacity: 0; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=text]::-ms-clear { + display: none; + width: 0; + height: 0; +} + +input[type=text]::-ms-reveal { + display: none; + width: 0; + height: 0; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} + +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: 1em; +} + +.top-margin { + margin-top: 1em; +} + +.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-light), 1); +} + +.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; +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--primary-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + -ms-grid-column-align: center; + justify-self: center; +} + +@-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; + } +} + +p { + line-height: 1.5; + font-family: 'Roboto', sans-serif; + color: rgba(var(--text), 0.8); +} + +.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; +} + +.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%; +} + +.fade-left { + -webkit-animation: fadeleft 0.3s; + animation: fadeleft 0.3s; +} + +.fade-right { + -webkit-animation: faderight 0.3s; + animation: faderight 0.3s; +} + +@-webkit-keyframes faderight { + from { + opacity: 0; + -webkit-transform: translateX(-1em); + transform: translateX(-1em); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes faderight { + from { + opacity: 0; + -webkit-transform: translateX(-1em); + transform: translateX(-1em); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@-webkit-keyframes fadeleft { + from { + opacity: 0; + -webkit-transform: translateX(1em); + transform: translateX(1em); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeleft { + from { + opacity: 0; + -webkit-transform: translateX(1em); + transform: translateX(1em); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +#logo { + display: -ms-inline-grid; + display: inline-grid; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + gap: 0.6rem 0.2rem; + margin-right: 1rem; +} + +#logo h4 { + letter-spacing: 0.06rem; + word-spacing: 0.12rem; + margin-top: 0.2rem; +} + +#logo h5 { + font-family: 'Roboto', sans-serif; + font-weight: 400; +} + +#logo #main_logo { + height: 1.4rem; + width: 1.4rem; + fill: rgba(var(--text), 1); + stroke: 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; + background: rgba(var(--text), 0.1); + border: 0.1em solid transparent; +} + +.input:last-of-type { + margin-bottom: 0; +} + +.input:focus-within { + border: 0.1em solid 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: 1rem 0; +} + +.container-header h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 600; +} + +.container-header button { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; +} + +.btn { + background: var(--primary-color); + color: rgba(var(--foreground), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 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.24); + 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-y: auto; +} + +.popup-container .popup h5 { + margin: 0.5rem 0; +} + +.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; +} + +#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; + 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; +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +#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: rgba(var(--foreground), 1); +} + +#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; +} + +#sign_in_popup .input { + background: rgba(var(--text), 0.1); +} + +.primary-btn { + background: var(--primary-color); + padding: 0.8em 1.6em; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: rgba(var(--foreground), 1); +} + +#main_header { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 1em 0; +} + +#main_header svg { + stroke: var(--primary-color); + stroke-width: 10; + stroke-linecap: round; + height: 2em; + width: 3em; + fill: none; + margin-right: 0.4em; +} + +#main_header #display_balance { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-left: auto; + text-align: right; +} + +#navbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + border-top: solid 1px rgba(var(--text), 0.2); + z-index: 3; + background: rgba(var(--foreground), 1); +} + +#navbar .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3em; + margin: 0.3em; + border-radius: 0.4em; + color: rgba(var(--text), 0.8); + font-size: 0.9em; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +#navbar .navbar-item .icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar .navbar-item h5 { + font-size: 0.6em; + margin-top: 0.4em; + font-weight: 700; +} + +#navbar .navbar-item .banking { + stroke-width: 4; +} + +#navbar .active { + color: var(--primary-color); +} + +#navbar .active .icon { + stroke: var(--primary-color); +} + +#home_page h1 { + margin-bottom: 1rem; + font-weight: 700; +} + +#home_page p { + margin-bottom: 1.5rem; +} + +#home_page .user-option { + margin-bottom: 2rem; +} + +#home_page .user-option:last-of-type { + margin: 0; +} + +#home_page h2 { + margin-bottom: 1rem; +} + +.options-tab { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 0.8rem; + margin-bottom: 1rem; +} + +.options-tab .option { + white-space: nowrap; + padding: 0.6rem 1rem; + text-decoration: none; + border-right: solid 1px rgba(var(--text), 0.2); + text-transform: capitalize; +} + +.options-tab .option:last-of-type { + border: none; +} + +.notification-dot::after { + content: ''; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; +} + +.shrink.notification-dot::after { + -webkit-transform: scale(0); + transform: scale(0); +} + +#deposit .container-header, #withdraw .container-header { + background: -webkit-gradient(linear, left top, left bottom, color-stop(90%, rgba(var(--foreground), 1)), to(transparent)); + background: linear-gradient(rgba(var(--foreground), 1) 90%, transparent); +} + +.request { + 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; + padding: 2em 1.5em; + border-radius: 0.4em; + background: var(--background); +} + +.request h5 { + color: rgba(var(--text-light), 1); + margin-bottom: 0.3rem; +} + +.request h3, .request h4 { + margin-bottom: 1em; + font-family: 'Roboto', sans-serif; + font-weight: 500; +} + +.request .action { + -ms-flex-item-align: end; + align-self: flex-end; +} + +.request .amount { + font-size: 1.4em; +} + +.request button { + width: auto; + -ms-flex-item-align: end; + align-self: flex-end; +} + +#deposit_request_container, #withdraw_request_container { + display: -ms-grid; + display: grid; + gap: 1em; + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; +} + +.page { + padding: 2rem 0; + padding-bottom: 4rem; +} + +.page .container-header { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; + grid-template-areas: '. .' 'search search'; + gap: 1rem; + position: -webkit-sticky; + position: sticky; + top: 0; + padding-bottom: 1em; + margin-bottom: 1em; + z-index: 2; +} + +.page .container-header h2 { + font-weight: 600; +} + +.page .container-header .action { + height: 100%; +} + +.page .container-header .action button { + height: 100%; + padding: 0.8em 1.6em; +} + +.page .container-header .search { + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-area: search; +} + +.page .container-header .search input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text), 1); + border-radius: 0.2em; +} + +.page .container-header .search input:focus { + outline: none; + background: rgba(var(--text-light), 0.2); +} + +.empty { + display: -ms-grid; + display: grid; + place-items: center; + width: 100%; +} + +.empty svg { + stroke: rgba(var(--text), 0.8); + height: 12em; + width: 12em; +} + +@media only screen and (min-width: 640px) { + body { + padding: 1rem 6vw; + margin-left: 6rem; + } + .popup-container .popup { + width: auto; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + border-radius: 0.2rem; + height: auto; + } + #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; + } + #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; + } + #deposit_request_container, #withdraw_request_container { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + } + #navbar { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + width: 6rem; + border-right: solid 1px rgba(var(--text), 0.2); + } + #navbar .navbar-item { + width: auto; + padding: 1.4em 0; + margin: 0.6em; + } + #navbar .navbar-item .icon { + height: 1.4rem; + width: 1.4rem; + } + #navbar .navbar-item h5 { + font-size: 0.8em; + } + #navbar .navbar-item:hover .icon { + stroke: rgba(var(--text), 1); + } + #navbar .navbar-item:hover h5 { + color: rgba(var(--text), 1); + } + #navbar .navbar-item.active:hover .icon { + stroke: var(--primary-color); + } + #navbar .navbar-item.active:hover h5 { + color: var(--primary-color); + } + .page { + padding-bottom: 2em; + } + #sign_in_popup { + width: 24rem; + } +} + +@media only screen and (min-width: 800px) { + #deposit_request_container, #withdraw_request_container { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + } + #home_page .user-option { + max-width: 40%; + } +} + +@media only screen and (min-width: 1280px) { + body { + padding: 1rem 12vw; + } + #deposit_request_container, #withdraw_request_container { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (min-width: 1920px) { + body { + font-size: 24px; + padding: 2rem 20vw; + } + #deposit_request_container, #withdraw_request_container { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + } +} + +@media only screen and (min-width: 2048px) { + body { + font-size: 24px; + padding: 2rem 30vw; + } + #deposit_request_container, #withdraw_request_container { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + } +} + +@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; + --dark-shade: #1a1a1a; + } +} + +@media (prefers-color-scheme: light) { + :root { + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + } +} + +@media (prefers-color-scheme: no-preference) { + :root { + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + } +} +/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..49b5a51 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "main.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..d2353c2 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,816 @@ +@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap'); +*{ + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Barlow', sans-serif; +} +:root{ + scroll-behavior: smooth; +} +body{ + --primary-color: #303F9F; + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + background: var(--foreground); + color: rgba(var(--text), 1); + font-size: 16px; + margin: 1.5rem; +} +a{ + font-weight: 600; + text-decoration: none; + color: var(--primary-color); +} +.dark-text{ + color: #111; +} +h1,h2,h3,h4,h5{ + font-weight: 600; +} +button{ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.6rem 1rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.2em; + color: var(--primary-color); + transition: transform 0.3s, clip-path 0.3s; + border: none; + clip-path: circle(100%); + background: rgba(var(--text), 0.1); + -webkit-tap-highlight-color: transparent; + &:focus{ + outline: thin solid rgba(var(--text-light), .4); + } + &:disabled{ + cursor: default; + background: rgba(var(--text-light), 1); + } + &:disabled ~ .loader{ + opacity: 0; + } +} +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type=text]::-ms-clear { display: none; width : 0; height: 0; } +input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { display: none; } +input[type=number] { + -moz-appearance:textfield; +} +input:invalid{ + outline: none; + box-shadow: none; +} +::-moz-focus-inner{ + border: none; +} +.bottom-padding{ + padding-bottom: 1em; +} +.top-padding{ + padding-top: 1em; +} +.bottom-margin{ + margin-bottom: 1em; +} +.top-margin{ + margin-top: 1em; +} +.flex{ + display: flex; +} +.grid{ + display: grid; +} +.grid-2{ + grid-template-columns: auto auto; + gap: 1em; +} +.light-text{ + color: rgba(var(--text-light), 1); +} +.hide{ + opacity: 0; + pointer-events: none; +} +.hide-completely{ + display: none !important; +} +.breakable{ + word-break: break-all; +} +.separator{ + padding: .1em; +} +.no-transformations{ + transform: none !important; +} +.loader{ + fill: none; + stroke-width: 10; + stroke: var(--primary-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} +@keyframes rotate{ + 100%{ + transform: rotate(360deg); + } +} +@keyframes load{ + 50%{ + stroke-dashoffset: 0; + } + 100%{ + stroke-dashoffset: -210; + } +} +p{ + line-height: 1.5; + font-family: 'Roboto', sans-serif; + color: rgba(var(--text), 0.8); +} +.action{ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + .btn{ + z-index: 2; + } + .loader{ + position: absolute; + z-index: 1; + padding: 0.4em; + } +} +.clip{ + clip-path: circle(0) !important; +} +.animate-loader{ + animation: load 2.6s infinite, rotate 1s infinite linear; +} +.expand{ + width: 100%; +} +.fade-left{ + animation: fadeleft 0.3s; +} +.fade-right{ + animation: faderight 0.3s; +} +@keyframes faderight{ + from{ + opacity: 0; + transform: translateX(-1em); + } + to{ + opacity: 1; + transform: none; + } +} +@keyframes fadeleft{ + from{ + opacity: 0; + transform: translateX(1em); + } + to{ + opacity: 1; + transform: none; + } +} +#logo{ + display: inline-grid; + align-items: center; + grid-template-columns: auto 1fr; + gap: 0.6rem 0.2rem; + margin-right: 1rem; + h4{ + letter-spacing: 0.06rem; + word-spacing: 0.12rem; + margin-top: 0.2rem; + } + h5{ + font-family: 'Roboto', sans-serif; + font-weight: 400; + } + #main_logo{ + height: 1.4rem; + width: 1.4rem; + fill: rgba(var(--text), 1); + stroke: none; + } +} + +.input{ + display: flex; + width: 100%; + align-items: center; + position: relative; + padding: 0.8em; + margin-bottom: 1.5em; + border-radius: 0.2em; + background: rgba(var(--text), 0.1); + border: 0.1em solid transparent; + &:last-of-type{ + margin-bottom: 0; + } + &:focus-within{ + border: 0.1em solid var(--primary-color); + } + label{ + opacity: .7; + font-weight: 500; + font-size: 1em; + position: absolute; + transition: transform 0.3s ease; + transform-origin: left; + pointer-events: none; + will-change: contents; + } + input{ + flex: 1; + font-size: 1rem; + border: none; + background: transparent; + outline: none; + color: rgba(var(--text), 1); + } +} +.animate-label{ + input{ + transform: translateY(0.5em); + } + label{ + transform: translateY(-60%) scale(0.7); + opacity: 1; + color: var(--primary-color); + } +} +.container-header{ + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; + h2{ + flex: 1; + font-weight: 600; + } + button{ + align-self: center; + } +} +.btn{ + background: var(--primary-color); + color: rgba(var(--foreground), 1); + padding: 0.4em 1em; +} +.back-arrow{ + stroke: rgba(var(--text), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 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: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-items: center; + background: rgba($color: #000000, $alpha: 0.24); + z-index: 10; + transition: opacity 0.3s ease; + .popup{ + align-self: flex-end; + align-items: flex-start; + flex-wrap: wrap; + width: 100%; + border-radius: 0.5rem 0.5rem 0 0; + padding: 1.5rem; + position: relative; + display: flex; + background: rgba(var(--foreground), 1); + transform: translateY(1rem); + transition: transform 0.3s; + box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24); + overflow-y: auto; + h5{ + margin: 0.5rem 0; + } + button:first-of-type{ + margin-left: auto; + } + .container-header{ + align-items: center; + padding: 0; + margin-bottom: 1.5em; + .btn{ + padding: 0.6em 1.2em; + } + } + } +} +#show_message{ + transform: translate(0, -100%); + transition: transform 0.3s, opacity 0.3s; + box-shadow: 0.2rem 0.4rem 0.8rem rgba($color: #000000, $alpha: 0.16); + align-items: center; + flex-direction: row; + display: flex; + color: rgba(var(--text), 1); + position: fixed; + right: 0; + top: 0; + width: 100%; + max-width: 100%; + z-index: 11; + background: rgba(var(--foreground), 1); + #error_icon{ + fill: #E53935; + } + #done_icon{ + fill: #00C853; + } + .notification-icon{ + height: 2em; + width: 2em; + margin: 1em 0 1em 1em; + fill: rgba(var(--text), 1); + } + div{ + padding: 1em; + flex: 1; + h5{ + opacity: 0.8; + } + } + span{ + font-weight: 500; + flex: 1; + } + button{ + padding: 1rem; + margin: 0 1em 0 0; + border: none; + background: none; + svg{ + height: 1em; + width: 1em; + stroke: rgba(var(--text), 1); + stroke-width: 6; + } + } +} +#confirmation{ + flex-direction: column; + justify-content: center; + padding: 1rem; + p{ + margin: 1rem; + font-size: 1rem; + font-weight: 500; + color: rgba(var(--rgb-bw),1) !important; + } + div{ + display: flex; + padding: 1em; + justify-content: right; + width: 100%; + button{ + background: none; + } + button:first-of-type{ + margin-right: 0.6em; + } + } +} +.refresh{ + margin-top: 0.6em; + margin-bottom: 1em; +} +#sign_in_popup{ + align-self: center; + border-radius: 0.5em; + width: calc(100vw - 2em); + background: rgba(var(--foreground), 1); + h1{ + margin-top: 3em; + } + p:first-of-type{ + margin-bottom: 4em; + } + .action{ + margin-top: 1em; + } + p:nth-of-type(2){ + margin-top: 2em; + margin-bottom: 1em; + } + .input{ + background: rgba(var(--text), 0.1); + } +} +.primary-btn{ + background: var(--primary-color); + padding: 0.8em 1.6em; + justify-content: center; + color: rgba(var(--foreground), 1); +} +#main_header{ + align-items: center; + padding: 1em 0; + svg{ + stroke: var(--primary-color); + stroke-width: 10; + stroke-linecap: round; + height: 2em; + width: 3em; + fill: none; + margin-right: 0.4em; + } + #display_balance{ + display: flex; + flex-direction: column; + margin-left: auto; + text-align: right; + } +} +#navbar{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + border-top: solid 1px rgba(var(--text), 0.2); + z-index: 3; + background: rgba(var(--foreground), 1); + .navbar-item{ + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3em; + margin: 0.3em; + border-radius: 0.4em; + color: rgba(var(--text), 0.8); + font-size: 0.9em; + text-transform: uppercase; + letter-spacing: 0.1em; + .icon{ + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; + } + h5{ + font-size: 0.6em; + margin-top: 0.4em; + font-weight: 700; + } + .banking{ + stroke-width: 4; + } + } + .active{ + color: var(--primary-color); + .icon{ + stroke: var(--primary-color); + } + } +} +#home_page{ + h1{ + margin-bottom: 1rem; + font-weight: 700; + } + p{ + margin-bottom: 1.5rem; + } + .user-option{ + margin-bottom: 2rem; + &:last-of-type{ + margin: 0; + } + } + h2{ + margin-bottom: 1rem; + } +} +.options-tab{ + display: flex; + flex-wrap: wrap; + margin-top: 0.8rem; + margin-bottom: 1rem; + .option{ + white-space: nowrap; + padding: 0.6rem 1rem; + text-decoration: none; + border-right: solid 1px rgba(var(--text), 0.2); + text-transform: capitalize; + &:last-of-type{ + border: none; + } + } +} +.notification-dot::after{ + content: ''; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} +.shrink.notification-dot::after{ + transform: scale(0); +} +#deposit, #withdraw{ + .container-header{ + background: linear-gradient(rgba(var(--foreground), 1) 90%, transparent); + } +} +.request{ + display: inline-flex; + flex-direction: column; + padding: 2em 1.5em; + border-radius: 0.4em; + background: var(--background); + h5{ + color: rgba(var(--text-light), 1); + margin-bottom: 0.3rem; + } + h3,h4{ + margin-bottom: 1em; + font-family: 'Roboto', sans-serif; + font-weight: 500; + } + .action{ + align-self: flex-end; + } + .amount{ + font-size: 1.4em; + } + button{ + width: auto; + align-self: flex-end; + } +} +#deposit_request_container, #withdraw_request_container{ + display: grid; + gap: 1em; + grid-template-columns: 1fr; +} +.page{ + padding: 2rem 0; + padding-bottom: 4rem; + .container-header{ + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: '. .' + 'search search'; + gap: 1rem; + position: sticky; + top: 0; + padding-bottom: 1em; + margin-bottom: 1em; + z-index: 2; + h2{ + font-weight: 600; + } + .action{ + height: 100%; + button{ + height: 100%; + padding: 0.8em 1.6em; + } + } + .search{ + grid-area: search; + input{ + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text), 1); + border-radius: 0.2em; + &:focus{ + outline: none; + background: rgba(var(--text-light), 0.2); + } + } + } + } +} +.empty{ + display: grid; + place-items: center; + width: 100%; + svg{ + stroke: rgba(var(--text), 0.8); + height: 12em; + width: 12em; + } +} +@media only screen and (min-width: 640px){ + body{ + padding: 1rem 6vw; + margin-left: 6rem; + } + .popup-container{ + .popup{ + width: auto; + align-self: center; + border-radius: 0.2rem; + height: auto; + } + } + #show_message{ + transform: translate(100%, 0); + margin: 1rem; + max-width: 60vw; + width: max-content; + border-radius: 0.2rem; + } + #confirmation{ + padding: 1rem; + width: 24rem; + button{ + margin-left: 0.5rem; + &:first-of-type{ + margin-left: auto; + } + } + p{ + margin: 1rem; + margin-bottom: 2rem; + } + } + #deposit_request_container, #withdraw_request_container{ + grid-template-columns: repeat(2, 1fr); + } + #navbar{ + justify-content: center; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + width: 6rem; + border-right: solid 1px rgba(var(--text), 0.2); + .navbar-item{ + width: auto; + padding: 1.4em 0; + margin: 0.6em; + .icon{ + height: 1.4rem; + width: 1.4rem; + } + h5{ + font-size: 0.8em; + } + &:hover{ + .icon{ + stroke: rgba(var(--text), 1); + } + h5{ + color: rgba(var(--text), 1); + } + } + &.active:hover{ + .icon{ + stroke: var(--primary-color); + } + h5{ + color: var(--primary-color); + } + } + } + } + .page{ + padding-bottom: 2em; + } + #sign_in_popup{ + width: 24rem; + } + .options-tab{ + //grid-template-columns: repeat(4, auto); + } +} +@media only screen and (min-width: 800px){ + #deposit_request_container, #withdraw_request_container{ + grid-template-columns: repeat(3, 1fr); + } + #home_page{ + .user-option{ + max-width: 40%; + } + } +} +@media only screen and (min-width: 1280px){ + body{ + padding: 1rem 12vw; + } + #deposit_request_container, #withdraw_request_container{ + grid-template-columns: repeat(3, 1fr); + } +} +@media only screen and (min-width: 1920px){ + body{ + font-size: 24px; + padding: 2rem 20vw; + } + #deposit_request_container, #withdraw_request_container{ + grid-template-columns: repeat(4, 1fr); + } +} +@media only screen and (min-width: 2048px){ + body{ + font-size: 24px; + padding: 2rem 30vw; + } + #deposit_request_container, #withdraw_request_container{ + grid-template-columns: repeat(4, 1fr); + } +} +@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; + --dark-shade: #1a1a1a; + } +} +@media (prefers-color-scheme: light){ + :root{ + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + } +} +@media (prefers-color-scheme: no-preference){ + :root{ + --text: 17, 17, 17; + --text-light: 85, 85, 85; + --foreground: 255, 255, 255; + --background: #e8e8e8; + --dark-shade: #dadada; + } +} +@media (any-hover: hover){ +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f9689f1 --- /dev/null +++ b/index.html @@ -0,0 +1,807 @@ + + + + + + + Blockchain UPI + + + + + +
+ +
+
+ + Error icon + + + + Done icon + + +
+
Notification
+ Message +
+ +
+
+ +
+
+ + + + + + + + + +
+
Rupee Tokens
+

0

+
+
+ +
+
+

What do we offer?

+

+ Your Rupee balance is digital footprint of actual cash.
Deposit, Withdraw or Pay Rupee digitally + using a FLO Blockchain address. +

+ +

Go ahead and try something

+ +
+ Transfer cash + buy rupee + withdraw rupee + pay through cashier +
+
+

Cash transfer

+
+
+ + +
+
+ + +
+
+ + + + +
+
+
+
+

Buy rupee

+
+
+ + +
+
+ + + + +
+
+
+
+

Withdraw rupee

+
+
+ + +
+
+ + +
+
+ + + + +
+
+
+
+

Pay anyone through cashier

+
+
+ + +
+
+ + +
+
+ + +
+
+ + + + +
+
+
+
+
+
+

Deposit Requests

+
+ +
+ +
+
+ + + + + Empty icon + + + + + + + + + +

No deposit requests.

+
+
+
+
+
+
+

Withdraw Requests

+
+ + + + +
+ +
+
+ + + + + Empty icon + + + + + + + + + +

No withdraw requests.

+
+
+
+
+
+
+

Profile

+
+
FLO ID
+

FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd

+ +
+
+ + + + \ No newline at end of file