RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge SM codes

Browse Source
This commit is contained in:
Abhishek Sinha 2020-09-07 14:25:36 +05:30
commit 6e92e331e1
5 changed files with 14241 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
css/main.css
View File

@ -1,9 +1,8 @@
@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; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: "Barlow", sans-serif; font-family: "Roboto", sans-serif;
} }
:root { :root {
@ -33,8 +32,35 @@ a {
color: #111; color: #111;
} }
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.8rem;
}
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-weight: 600; font-family: "Manrope", sans-serif;
font-weight: 700;
}
p {
line-height: 1.5;
max-width: 60ch;
color: rgba(var(--text-color), 0.9);
} }
button { button {
@ -42,24 +68,24 @@ button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-transform: uppercase; text-transform: capitalize;
letter-spacing: 0.08em; padding: 0.6rem 1.2rem;
padding: 0.4rem 0.7rem; font-weight: 700;
font-weight: 600;
cursor: pointer; cursor: pointer;
border-radius: 0.2em; border-radius: 0.3rem;
color: var(--accent-color); color: var(--accent-color);
transition: transform 0.3s; transition: transform 0.3s;
border: none; border: none;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
font-family: "Manrope", sans-serif;
} }
button:focus { button:focus {
outline: thin solid rgba(var(--text-color-light), 0.4); outline: thin solid rgba(var(--text-color-light), 0.4);
} }
button:disabled { button:disabled {
cursor: default; cursor: default;
background: rgba(var(--text-color-light), 1); background: rgba(var(--text-color), 0.5);
} }
button:disabled ~ .loader { button:disabled ~ .loader {
opacity: 0; opacity: 0;
@ -187,12 +213,6 @@ input:invalid {
stroke-dashoffset: -210; stroke-dashoffset: -210;
} }
} }
p {
line-height: 1.5;
font-family: "Roboto", sans-serif;
color: rgba(var(--text-color), 0.8);
}
.action { .action {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -205,9 +225,8 @@ p {
background: none; background: none;
} }
.action h4 { .action h4 {
font-weight: 500;
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
font-size: 1rem; font-size: 0.9rem;
clip-path: circle(100%); clip-path: circle(100%);
transition: clip-path 0.3s; transition: clip-path 0.3s;
border-radius: 0.2rem; border-radius: 0.2rem;
@ -265,21 +284,19 @@ p {
display: inline-grid; display: inline-grid;
align-items: center; align-items: center;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0.6rem 0.2rem; gap: 0.6rem 0.4rem;
margin-right: 1rem; margin-right: 1rem;
} }
#logo h4 { #logo h4 {
letter-spacing: 0.06rem; letter-spacing: 0.06rem;
word-spacing: 0.12rem; word-spacing: 0.12rem;
margin-top: 0.2rem;
} }
#logo h5 { #logo h5 {
font-family: "Roboto", sans-serif;
font-weight: 400; font-weight: 400;
} }
#logo #main_logo { #logo #main_logo {
height: 1.4rem; height: 1.6rem;
width: 1.4rem; width: 1.6rem;
fill: rgba(var(--text-color), 1); fill: rgba(var(--text-color), 1);
stroke: none; stroke: none;
} }
@ -315,7 +332,7 @@ textarea {
border: 0.1em solid var(--accent-color); border: 0.1em solid var(--accent-color);
} }
.input .placeholder { .input .placeholder {
opacity: 0.7; opacity: 0.6;
font-weight: 500; font-weight: 500;
font-size: 1em; font-size: 1em;
position: absolute; position: absolute;
@ -367,7 +384,6 @@ textarea {
} }
.container-header h2 { .container-header h2 {
flex: 1; flex: 1;
font-weight: 600;
} }
.container-header button { .container-header button {
align-self: center; align-self: center;
@ -437,24 +453,23 @@ form {
margin-left: auto; margin-left: auto;
} }
.popup-container .popup .container-header { .popup-container .popup .container-header {
display: grid; display: flex;
grid-template-columns: auto 1fr auto;
align-items: center; align-items: center;
padding: 0; padding: 0;
gap: 1rem; margin-bottom: 1rem;
margin-bottom: 1.5rem; }
.popup-container .popup .container-header h4 {
flex: 1;
}
.popup-container .popup .container-header button {
width: auto;
} }
.popup-container .popup .container-header .icon { .popup-container .popup .container-header .icon {
cursor: pointer; cursor: pointer;
padding-right: 0.4rem; padding-right: 0.4rem;
margin-right: 0.3rem;
stroke-width: 8; stroke-width: 8;
} }
.popup-container .popup .container-header .btn {
padding: 0.6em 1.2em;
}
.popup-container .popup .container-header h3 {
text-transform: capitalize;
}
.popup-container .popup p { .popup-container .popup p {
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
} }
@ -464,9 +479,6 @@ form {
} }
#confirmation p, #prompt p { #confirmation p, #prompt p {
margin: 1rem; margin: 1rem;
font-size: 1rem;
font-weight: 500;
color: rgba(var(--rgb-bw), 1) !important;
} }
#confirmation h4, #prompt h4 { #confirmation h4, #prompt h4 {
font-weight: 500; font-weight: 500;
@ -504,7 +516,6 @@ form {
} }
#sign_in_popup p { #sign_in_popup p {
margin-top: 1rem; margin-top: 1rem;
font-size: 0.9rem;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
#sign_in_popup .input { #sign_in_popup .input {
@ -513,7 +524,6 @@ form {
.primary-btn { .primary-btn {
background: var(--accent-color); background: var(--accent-color);
padding: 0.8em 1.6em;
justify-content: center; justify-content: center;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
@ -598,10 +608,8 @@ form {
} }
#home_page h1 { #home_page h1 {
margin-top: 4vw; margin-bottom: 0;
margin-bottom: 1rem; font-weight: 800;
font-weight: 700;
font-size: 3rem;
} }
#home_page p { #home_page p {
margin-bottom: 3rem; margin-bottom: 3rem;
@ -623,9 +631,10 @@ form {
padding: 1.5rem; padding: 1.5rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 9rem; width: 10rem;
border: solid 1px rgba(var(--text-color), 0.2); box-shadow: 0 1px 0.1rem #00000030, 0 0 0.4rem #00000016;
text-transform: capitalize; text-transform: capitalize;
transition: transform 0.3s;
cursor: pointer; cursor: pointer;
} }
.options-tab .option .icon { .options-tab .option .icon {
@ -636,8 +645,8 @@ form {
margin-bottom: 1rem; margin-bottom: 1rem;
stroke: rgba(var(--text-color), 0.4); stroke: rgba(var(--text-color), 0.4);
} }
.options-tab .option h4 { .options-tab .option:active {
font-weight: 400; transform: scale(0.95);
} }
.options-tab .option:nth-of-type(1) .icon { .options-tab .option:nth-of-type(1) .icon {
background: #ffe5ea; background: #ffe5ea;
@ -681,8 +690,11 @@ form {
background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent);
} }
.secondary-btn { sm-tab-header {
background: none; position: sticky;
top: 0;
background: rgba(var(--foreground-color), 1);
z-index: 1;
} }
.request { .request {
@ -693,14 +705,11 @@ form {
border: solid 1px rgba(var(--text-color), 0.2); border: solid 1px rgba(var(--text-color), 0.2);
} }
.request h5 { .request h5 {
color: rgba(var(--text-color-light), 1); margin-bottom: 0.2rem;
margin-bottom: 0.4rem;
text-transform: capitalize; text-transform: capitalize;
} }
.request h3, .request h4 { .request h3, .request h4 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-family: "Roboto", sans-serif;
font-weight: 500;
} }
.request h4:last-of-type { .request h4:last-of-type {
margin-bottom: 0; margin-bottom: 0;
@ -753,6 +762,7 @@ form {
.container { .container {
display: grid; display: grid;
gap: 1em; gap: 1em;
width: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -765,15 +775,11 @@ form {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: ". ." "search search"; grid-template-areas: ". ." "search search";
gap: 1rem; gap: 1rem;
position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
will-change: auto; will-change: auto;
z-index: 2; z-index: 2;
} }
.page .container-header h2 {
font-weight: 600;
}
.page .container-header .search { .page .container-header .search {
grid-area: search; grid-area: search;
} }
@ -814,16 +820,12 @@ form {
} }
.time { .time {
font-family: "Roboto", sans-serif;
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
font-weight: 400; font-weight: 500;
} }
#report_popup h4 { #report_popup {
font-weight: 400; width: 32rem;
}
#report_popup textarea {
margin-top: 1rem;
} }
#profile_page { #profile_page {
@ -861,6 +863,7 @@ form {
.complaints-container { .complaints-container {
padding-top: 1.5rem; padding-top: 1.5rem;
display: grid; display: grid;
align-items: flex-start;
gap: 1.5rem; gap: 1.5rem;
} }
@ -909,7 +912,7 @@ form {
transform: translateY(0) scale(0.96); transform: translateY(0) scale(0.96);
width: 24rem; width: 24rem;
align-self: center; align-self: center;
border-radius: 0.2rem; border-radius: 0.4rem;
height: auto; height: auto;
} }
@ -1003,8 +1006,6 @@ form {
} }
#activity_page sm-tab-header { #activity_page sm-tab-header {
position: sticky;
top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -1037,10 +1038,6 @@ form {
body { body {
padding: 1rem 12vw; padding: 1rem 12vw;
} }
.container {
grid-template-columns: repeat(3, 1fr);
}
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
body { body {
@ -1057,10 +1054,6 @@ form {
font-size: 24px; font-size: 24px;
padding: 2rem 30vw; padding: 2rem 30vw;
} }
.container {
grid-template-columns: repeat(4, 1fr);
}
} }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
body { body {

1
css/main.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

134
css/main.scss
View File

@ -1,9 +1,8 @@
@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; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Barlow', sans-serif; font-family: 'Roboto', sans-serif;
} }
:root{ :root{
scroll-behavior: smooth; scroll-behavior: smooth;
@ -28,31 +27,52 @@ a{
.dark-text{ .dark-text{
color: #111; color: #111;
} }
h1{
font-size: 3.5rem;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.5rem;
}
h4{
font-size: 1rem;
}
h5{
font-size: 0.8rem;
}
h1,h2,h3,h4,h5{ h1,h2,h3,h4,h5{
font-weight: 600; font-family: 'Manrope', sans-serif;
font-weight: 700;
} }
p{
line-height: 1.5;
max-width: 60ch;
color: rgba(var(--text-color), 0.9);
}
button{ button{
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-transform: uppercase; text-transform: capitalize;
letter-spacing: 0.08em; padding: 0.6rem 1.2rem;
padding: 0.4rem 0.7rem; font-weight: 700;
font-weight: 600;
cursor: pointer; cursor: pointer;
border-radius: 0.2em; border-radius: 0.3rem;
color: var(--accent-color); color: var(--accent-color);
transition: transform 0.3s; transition: transform 0.3s;
border: none; border: none;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
font-family: 'Manrope', sans-serif;
&:focus{ &:focus{
outline: thin solid rgba(var(--text-color-light), .4); outline: thin solid rgba(var(--text-color-light), .4);
} }
&:disabled{ &:disabled{
cursor: default; cursor: default;
background: rgba(var(--text-color-light), 1); background: rgba(var(--text-color), 0.5);
} }
&:disabled ~ .loader{ &:disabled ~ .loader{
opacity: 0; opacity: 0;
@ -148,11 +168,6 @@ input:invalid{
stroke-dashoffset: -210; stroke-dashoffset: -210;
} }
} }
p{
line-height: 1.5;
font-family: 'Roboto', sans-serif;
color: rgba(var(--text-color), 0.8);
}
.action{ .action{
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -166,9 +181,8 @@ p{
} }
} }
h4{ h4{
font-weight: 500;
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
font-size: 1rem; font-size: 0.9rem;
clip-path: circle(100%); clip-path: circle(100%);
transition: clip-path 0.3s; transition: clip-path 0.3s;
border-radius: 0.2rem; border-radius: 0.2rem;
@ -221,20 +235,18 @@ p{
display: inline-grid; display: inline-grid;
align-items: center; align-items: center;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0.6rem 0.2rem; gap: 0.6rem 0.4rem;
margin-right: 1rem; margin-right: 1rem;
h4{ h4{
letter-spacing: 0.06rem; letter-spacing: 0.06rem;
word-spacing: 0.12rem; word-spacing: 0.12rem;
margin-top: 0.2rem;
} }
h5{ h5{
font-family: 'Roboto', sans-serif;
font-weight: 400; font-weight: 400;
} }
#main_logo{ #main_logo{
height: 1.4rem; height: 1.6rem;
width: 1.4rem; width: 1.6rem;
fill: rgba(var(--text-color), 1); fill: rgba(var(--text-color), 1);
stroke: none; stroke: none;
} }
@ -268,7 +280,7 @@ textarea{
border: 0.1em solid var(--accent-color); border: 0.1em solid var(--accent-color);
} }
.placeholder{ .placeholder{
opacity: .7; opacity: .6;
font-weight: 500; font-weight: 500;
font-size: 1em; font-size: 1em;
position: absolute; position: absolute;
@ -318,7 +330,6 @@ textarea{
padding: 1rem 0; padding: 1rem 0;
h2{ h2{
flex: 1; flex: 1;
font-weight: 600;
} }
button{ button{
align-self: center; align-self: center;
@ -381,23 +392,22 @@ form{
margin-left: auto; margin-left: auto;
} }
.container-header{ .container-header{
display: grid; display: flex;
grid-template-columns: auto 1fr auto;
align-items: center; align-items: center;
padding: 0; padding: 0;
gap: 1rem; margin-bottom: 1rem;
margin-bottom: 1.5rem; h4{
flex: 1;
}
button{
width: auto;
}
.icon{ .icon{
cursor: pointer; cursor: pointer;
padding-right: 0.4rem; padding-right: 0.4rem;
margin-right: 0.3rem;
stroke-width: 8; stroke-width: 8;
} }
.btn{
padding: 0.6em 1.2em;
}
h3{
text-transform: capitalize;
}
} }
p{ p{
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
@ -408,9 +418,6 @@ form{
flex-direction: column; flex-direction: column;
p{ p{
margin: 1rem; margin: 1rem;
font-size: 1rem;
font-weight: 500;
color: rgba(var(--rgb-bw),1) !important;
} }
h4{ h4{
font-weight: 500; font-weight: 500;
@ -448,7 +455,6 @@ form{
} }
p{ p{
margin-top: 1rem; margin-top: 1rem;
font-size: 0.9rem;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.input{ .input{
@ -457,7 +463,6 @@ form{
} }
.primary-btn{ .primary-btn{
background: var(--accent-color); background: var(--accent-color);
padding: 0.8em 1.6em;
justify-content: center; justify-content: center;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
@ -539,10 +544,8 @@ form{
} }
#home_page{ #home_page{
h1{ h1{
margin-top: 4vw; margin-bottom: 0;
margin-bottom: 1rem; font-weight: 800;
font-weight: 700;
font-size: 3rem;
} }
p{ p{
margin-bottom: 3rem; margin-bottom: 3rem;
@ -563,9 +566,10 @@ form{
padding: 1.5rem; padding: 1.5rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 9rem; width: 10rem;
border: solid 1px rgba(var(--text-color), 0.2); box-shadow: 0 1px 0.1rem #00000030, 0 0 0.4rem #00000016;
text-transform: capitalize; text-transform: capitalize;
transition: transform 0.3s;
cursor: pointer; cursor: pointer;
.icon{ .icon{
height: 2.8rem; height: 2.8rem;
@ -575,8 +579,8 @@ form{
margin-bottom: 1rem; margin-bottom: 1rem;
stroke: rgba(var(--text-color), 0.4); stroke: rgba(var(--text-color), 0.4);
} }
h4{ &:active{
font-weight: 400; transform: scale(0.95);
} }
&:nth-of-type(1){ &:nth-of-type(1){
.icon{ .icon{
@ -630,8 +634,11 @@ form{
background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent);
} }
} }
.secondary-btn{ sm-tab-header{
background: none; position: sticky;
top: 0;
background: rgba(var(--foreground-color), 1);
z-index: 1;
} }
.request{ .request{
display: inline-flex; display: inline-flex;
@ -640,14 +647,11 @@ form{
border-radius: 0.4em; border-radius: 0.4em;
border: solid 1px rgba(var(--text-color), 0.2); border: solid 1px rgba(var(--text-color), 0.2);
h5{ h5{
color: rgba(var(--text-color-light), 1); margin-bottom: 0.2rem;
margin-bottom: 0.4rem;
text-transform: capitalize; text-transform: capitalize;
} }
h3,h4{ h3,h4{
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
} }
h4:last-of-type{ h4:last-of-type{
margin-bottom: 0; margin-bottom: 0;
@ -697,6 +701,7 @@ form{
.container{ .container{
display: grid; display: grid;
gap: 1em; gap: 1em;
width: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.page{ .page{
@ -708,14 +713,10 @@ form{
grid-template-areas: '. .' grid-template-areas: '. .'
'search search'; 'search search';
gap: 1rem; gap: 1rem;
position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
will-change: auto; will-change: auto;
z-index: 2; z-index: 2;
h2{
font-weight: 600;
}
.search{ .search{
grid-area: search; grid-area: search;
input{ input{
@ -756,17 +757,11 @@ form{
} }
} }
.time{ .time{
font-family: 'Roboto', sans-serif;
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
font-weight: 400; font-weight: 500;
} }
#report_popup{ #report_popup{
h4{ width: 32rem;
font-weight: 400;
}
textarea{
margin-top: 1rem;
}
} }
#profile_page{ #profile_page{
display: flex; display: flex;
@ -803,6 +798,7 @@ form{
.complaints-container{ .complaints-container{
padding-top: 1.5rem; padding-top: 1.5rem;
display: grid; display: grid;
align-items: flex-start;
gap: 1.5rem; gap: 1.5rem;
} }
#helpline_page{ #helpline_page{
@ -850,7 +846,7 @@ form{
transform: translateY(0) scale(0.96); transform: translateY(0) scale(0.96);
width: 24rem; width: 24rem;
align-self: center; align-self: center;
border-radius: 0.2rem; border-radius: 0.4rem;
height: auto; height: auto;
} }
} }
@ -945,8 +941,6 @@ form{
} }
#activity_page{ #activity_page{
sm-tab-header{ sm-tab-header{
position: sticky;
top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -978,9 +972,6 @@ form{
body{ body{
padding: 1rem 12vw; padding: 1rem 12vw;
} }
.container{
grid-template-columns: repeat(3, 1fr);
}
} }
@media only screen and (min-width: 1920px){ @media only screen and (min-width: 1920px){
body{ body{
@ -996,9 +987,6 @@ form{
font-size: 24px; font-size: 24px;
padding: 2rem 30vw; padding: 2rem 30vw;
} }
.container{
grid-template-columns: repeat(4, 1fr);
}
} }
@media only screen and (max-width: 320px){ @media only screen and (max-width: 320px){
body{ body{

161
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockchain UPI</title> <title>Blockchain UPI</title>
<link <link
href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
@ -21,7 +21,7 @@
<p id="confirm_message"></p> <p id="confirm_message"></p>
<div class="btns"> <div class="btns">
<button class="hover cancel-btn">Cancel</button> <button class="hover cancel-btn">Cancel</button>
<button class="hover submit-btn">Ok</button> <button class="hover submit-btn">OK</button>
</div> </div>
</div> </div>
</div> </div>
@ -45,7 +45,7 @@
<title>Loader</title> <title>Loader</title>
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg> </svg>
<h3 id="tip_container">Loading BLOCKCHAIN UPi</h3> <h4 id="tip_container">Loading BLOCKCHAIN UPI </h4>
<button onclick="signOut()">Reset</button> <button onclick="signOut()">Reset</button>
</div> </div>
</div> </div>
@ -76,7 +76,7 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Transfer Rupee</h3> <h4>Transfer Rupee</h4>
<button id="send_tokens_btn" class="action expand" type="submit" disabled> <button id="send_tokens_btn" class="action expand" type="submit" disabled>
<h4 class="expand primary-btn"> <h4 class="expand primary-btn">
transfer transfer
@ -111,10 +111,10 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Deposit rupee</h3> <h4>Deposit rupee</h4>
<button id="request_tokens_btn" class="action expand" type="submit" disabled> <button id="request_tokens_btn" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
deposit Continue
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <svg viewBox="0 0 73 73" class="loader">
<path <path
@ -122,15 +122,22 @@
</svg> </svg>
</button> </button>
</div> </div>
<form id="deposit_amount_section" autocomplete="off" onsubmit="return false">
<p> <p>
Deposit rupee through UPI to use as Digital currency powered by blockchain. Deposit rupee through UPI to use as Digital currency powered by blockchain.
</p> </p>
<form autocomplete="off" onsubmit="return false"> <label class="input">
<label class="input">
<input id="token_amount_to_buy" inputmode="numeric" type="number" min="1" required> <input id="token_amount_to_buy" inputmode="numeric" type="number" min="1" required>
<div class="placeholder">Amount</div> <div class="placeholder">Amount</div>
</label> </label>
</form> </form>
<form id="upi_txId_section" class="hide-completely top-padding" autocomplete="off" onsubmit="return false">
<p id="send_cash_to_deposit"></p>
<label class="input">
<input id="deposited_rupee_txId" required disabled>
<div class="placeholder">UPI TxID</div>
</label>
</form>
</div> </div>
</div> </div>
<div class="popup-container hide"> <div class="popup-container hide">
@ -141,7 +148,7 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Withdraw rupee</h3> <h4>Withdraw rupee</h4>
<button id="withdraw_cash_btn" class="action expand" type="submit" disabled> <button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
withdraw withdraw
@ -175,7 +182,7 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Request rupee</h3> <h4>Request rupee</h3>
<button id="request_rupee_btn" class="action expand" type="submit" disabled> <button id="request_rupee_btn" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
request request
@ -191,7 +198,7 @@
</p> </p>
<form autocomplete="off" onsubmit="return false"> <form autocomplete="off" onsubmit="return false">
<label class="input"> <label class="input">
<input id="requested_address" minlength="20" type="text" required> <input floId id="requested_address" minlength="20" type="text" required>
<div class="placeholder">Request from</div> <div class="placeholder">Request from</div>
</label> </label>
<label class="input"> <label class="input">
@ -209,7 +216,7 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Pay through cashier</h3> <h4>Pay through cashier</h4>
<button id="cnf_cash_payment" class="action expand" type="submit" disabled> <button id="cnf_cash_payment" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
pay pay
@ -224,10 +231,10 @@
Don't have enough token balance? Pay to our cashier through UPI and your cash will be Don't have enough token balance? Pay to our cashier through UPI and your cash will be
transfered as Rupee tokens. transfered as Rupee tokens.
</p> </p>
<p><strong id="pay_cashier_info"></strong></p> <p id="pay_cashier_info"></p>
<form autocomplete="off" onsubmit="return false"> <form autocomplete="off" onsubmit="return false">
<label class="input"> <label class="input">
<input id="recvr_id" type="text" required> <input floId id="recvr_id" type="text" required>
<div class="placeholder">Reciever's FLO ID</div> <div class="placeholder">Reciever's FLO ID</div>
</label> </label>
<label class="input"> <label class="input">
@ -250,11 +257,11 @@
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
<h3>Report</h3> <h4>Report</h4>
<button id="report_btn" class="btn">report</button> <button id="report_btn" class="primary-btn">report</button>
</div> </div>
<h4>Please add any message you want to send us regarding this issue</h4> <textarea name="complaint" placeholder="Please describe issue in detail." id="complaint_field"
<textarea name="complaint" id="complaint_field" rows="6"></textarea> rows="10"></textarea>
</div> </div>
</div> </div>
@ -280,7 +287,7 @@
</div> </div>
<div id="display_balance"> <div id="display_balance">
<h5>Rupee Balance</h5> <h5>Rupee Balance</h5>
<h3 id="token_balance">0</h3> <h4 id="token_balance">0</h4>
<svg class="icon" onclick="refresh_balance(this)" viewBox="0 0 64 64"> <svg class="icon" onclick="refresh_balance(this)" viewBox="0 0 64 64">
<title>refresh balance</title> <title>refresh balance</title>
<path d="M60.94,43.13A30.87,30.87,0,1,1,59,17.93" /> <path d="M60.94,43.13A30.87,30.87,0,1,1,59,17.93" />
@ -386,13 +393,13 @@
</nav> </nav>
<main class="hide-completely"> <main class="hide-completely">
<section class="page hide-completely" id="home_page"> <section class="page hide-completely" id="home_page">
<h1>What DO WE OFFER?</h1> <h1>What is Blockchain UPI?</h1>
<p> <p>
Your Rupee balance is digital footprint of actual cash.<br> Deposit, Withdraw or Pay Rupee digitally Your Rupee balance is digital footprint of actual cash.<br> Deposit, Withdraw or Pay Rupee digitally
using a FLO Blockchain address. using a FLO Blockchain address.
</p> </p>
<h3>Go ahead and try something</h3> <h4>Go ahead and try something</h4>
<div class="options-tab"> <div class="options-tab">
<div class="option" onclick="showPopup('cash_transfer')"> <div class="option" onclick="showPopup('cash_transfer')">
@ -651,18 +658,14 @@
</div> </div>
</section> </section>
<section id="request_page" class="page hide-completely"> <section id="request_page" class="page hide-completely">
<div class="container-header">
<h2>Payment Requests</h2> <h2>Payment Requests</h2>
</div> <p class="bottom-margin">Your payment requests will appear here.</p>
<p class="bottom-margin">These are payment requests you received.</p>
<div id="payment_request_container" class="container"> <div id="payment_request_container" class="container">
<h4>You don't have any requests.</h4> <h4>You don't have any requests.</h4>
</div> </div>
</section> </section>
<section id="activity_page" class="page"> <section id="activity_page" class="page">
<div class="container-header">
<h2>Activity</h2> <h2>Activity</h2>
</div>
<p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get <p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
assistance from our helpline.</p> assistance from our helpline.</p>
<sm-tab-header target="user_activities"> <sm-tab-header target="user_activities">
@ -1746,6 +1749,12 @@ stroke-width: 6;
} }
} }
clearAll = () => {
Array.from(this.notificationPanel.children).forEach(child => {
this.removeNotification(child)
})
}
connectedCallback() { connectedCallback() {
this.notificationPanel = this.shadowRoot.querySelector( this.notificationPanel = this.shadowRoot.querySelector(
".notification-panel" ".notification-panel"
@ -1783,7 +1792,7 @@ stroke-width: 6;
if (!mutation.addedNodes[0].classList.contains("pinned")) if (!mutation.addedNodes[0].classList.contains("pinned"))
setTimeout(() => { setTimeout(() => {
this.removeNotification(mutation.addedNodes[0]); this.removeNotification(mutation.addedNodes[0]);
}, 4000); }, 5000);
if (window.innerWidth > 640) if (window.innerWidth > 640)
this.notificationPanel.style.padding = this.notificationPanel.style.padding =
"1.5rem 0 3rem 1.5rem"; "1.5rem 0 3rem 1.5rem";
@ -2569,11 +2578,12 @@ background-color: transparent;
//Checks for internet connection status //Checks for internet connection status
if (!navigator.onLine) if (!navigator.onLine)
notify('There seems to be a problem connecting to the internet.', 'error', true, true) notify('There seems to be a problem connecting to the internet.', 'error', '', true)
window.addEventListener('offline', () => { window.addEventListener('offline', () => {
notify('There seems to be a problem connecting to the internet.', 'error', true, true) notify('There seems to be a problem connecting to the internet.', 'error', true, true)
}) })
window.addEventListener('online', () => { window.addEventListener('online', () => {
notifications.clearAll()
notify('We are back online.', '', '', true) notify('We are back online.', '', '', true)
}) })
// function required for popups or modals to appear // function required for popups or modals to appear
@ -2597,6 +2607,7 @@ background-color: transparent;
zIndex = 10; zIndex = 10;
function showPopup(popup, permission) { function showPopup(popup, permission) {
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
let thisPopup = document.getElementById(popup); let thisPopup = document.getElementById(popup);
thisPopup.parentNode.classList.remove('hide'); thisPopup.parentNode.classList.remove('hide');
thisPopup.classList.add('no-transformations'); thisPopup.classList.add('no-transformations');
@ -2621,6 +2632,11 @@ background-color: transparent;
// hides the popup or modal // hides the popup or modal
function hidePopup() { function hidePopup() {
const scrollY = document.body.style.top;
window.scrollTo(0, parseInt(scrollY || '0') * -1);
setTimeout(() => {
document.body.setAttribute('style', `overflow: auto; top: initial`)
}, 300);
if (popupStack.peek() === undefined) if (popupStack.peek() === undefined)
return; return;
let { popup, permission } = popupStack.pop(); let { popup, permission } = popupStack.pop();
@ -2648,6 +2664,15 @@ background-color: transparent;
} }
if (popup === 'cash_transfer') { if (popup === 'cash_transfer') {
payingRequested = false; payingRequested = false;
tokenReceiver.disabled = false
tokenAmount.disabled = false
}
if (popup === 'deposit_rupee') {
depositRequested = 0;
document.getElementById('upi_txId_section').classList.add('hide-completely')
document.getElementById('deposit_amount_section').classList.remove('hide-completely')
depositedRupeeTxId.disabled = true
document.getElementById('request_tokens_btn').children[0].textContent = 'Continue'
} }
} }
@ -2693,13 +2718,13 @@ background-color: transparent;
let notifications = document.getElementById('show_message'); let notifications = document.getElementById('show_message');
//Function for displaying toast notifications. pass in error for mode param if you want to show an error. //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
function notify(message, mode, behavior, sound) { function notify(message, mode, pinned, sound) {
if (mode === 'error') if (mode === 'error')
console.error(message) console.error(message)
else else
console.log(message) console.log(message)
notifications.push(message, mode, behavior) notifications.push(message, mode, pinned)
if (navigator.onLine && sound) { if (navigator.onLine && sound) {
notificationSound.currentTime = 0; notificationSound.currentTime = 0;
notificationSound.play(); notificationSound.play();
@ -2756,10 +2781,11 @@ background-color: transparent;
month = timeFrag[1], month = timeFrag[1],
date = timeFrag[2], date = timeFrag[2],
year = timeFrag[3], year = timeFrag[3],
hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')), minutes = new Date(parseInt(time)).getMinutes(),
finalTime = ''; hours = new Date(parseInt(time)).getHours()
parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM' minutes = minutes.length === 1 ? `0${minutes}` : minutes
return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`; let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
return `${finalHours} ${month} ${date} ${year}`;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return time; return time;
@ -2784,7 +2810,7 @@ background-color: transparent;
} }
function areInputsEmpty(parent) { function areInputsEmpty(parent) {
let allInputs = parent.querySelectorAll(".input input"); let allInputs = parent.querySelectorAll(".input input:not(:disabled)");
return [...allInputs].every(input => input.checkValidity()) return [...allInputs].every(input => input.checkValidity())
} }
@ -2817,6 +2843,8 @@ background-color: transparent;
let allForms = document.querySelectorAll('form'), let allForms = document.querySelectorAll('form'),
payingRequested = false, payingRequested = false,
currentPaymentRequest; currentPaymentRequest;
const tokenReceiver = document.getElementById('token_receiver'),
tokenAmount = document.getElementById('token_amount')
window.addEventListener('load', () => { window.addEventListener('load', () => {
allForms.forEach((form) => { allForms.forEach((form) => {
form.addEventListener('input', (e) => { form.addEventListener('input', (e) => {
@ -2899,9 +2927,10 @@ background-color: transparent;
document.getElementById('request_rupee_btn').addEventListener('click', (e) => { document.getElementById('request_rupee_btn').addEventListener('click', (e) => {
let requestedAddress = document.getElementById('requested_address').value, let requestedAddress = document.getElementById('requested_address').value,
requestedAmount = document.getElementById('requested_amount').value requestedAmount = document.getElementById('requested_amount').value
btnLoading('request_rupee_btn', 'start')
request_payment(requestedAddress, requestedAmount) request_payment(requestedAddress, requestedAmount)
}) })
// Function for accepting payment request // Function for accepting payment request
document.getElementById('payment_request_container').addEventListener('click', async (e) => { document.getElementById('payment_request_container').addEventListener('click', async (e) => {
if (e.target.closest('.send-rupee')) { if (e.target.closest('.send-rupee')) {
@ -2915,20 +2944,24 @@ background-color: transparent;
paymentRequest: parent, paymentRequest: parent,
requestId: paymentRequestId requestId: paymentRequestId
} }
popup.querySelector('#token_receiver').value = senderAddress; tokenReceiver.value = senderAddress;
popup.querySelector('#token_amount').value = amount; tokenAmount.value = amount;
tokenReceiver.disabled = true
tokenAmount.disabled = true
} }
if (e.target.closest('.decline-request')) { if (e.target.closest('.decline-request')) {
let parent = e.target.closest('.request'), let parent = e.target.closest('.request'),
paymentRequestId = parent.dataset.paymentRequestId; paymentRequestId = parent.dataset.paymentRequestId;
if (await confirmation(`Do want to decline this request? This will remove the request.`)) { if (await confirmation(
`Do want to decline this request? This will remove the request.`)) {
payment_request_status(paymentRequestId, 'DECLINED') payment_request_status(paymentRequestId, 'DECLINED')
e.target.closest('.request').remove() e.target.closest('.request').remove()
} }
} }
}) })
document.getElementById('select_cashier').addEventListener('change', async function (e) { document.getElementById('select_cashier').addEventListener('change', async function (e) {
await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(this.value), load_pay_thru_cashier_complaints(this.value)]) await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(
this.value), load_pay_thru_cashier_complaints(this.value)])
}) })
document.getElementById('helpline_page').addEventListener('click', async e => { document.getElementById('helpline_page').addEventListener('click', async e => {
@ -2986,7 +3019,8 @@ background-color: transparent;
compactIDB.deleteDB().then((message) => { compactIDB.deleteDB().then((message) => {
delete token_app.master_configurations; delete token_app.master_configurations;
onLoadStartUp() onLoadStartUp()
notify('You have logged out successfully.') notifications.clearAll()
notify('Logged out')
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
}) })
@ -3667,7 +3701,9 @@ background-color: transparent;
window.crypto.getRandomValues(ua); window.crypto.getRandomValues(ua);
for (t = 0; t < sr.poolSize; ++t) for (t = 0; t < sr.poolSize; ++t)
sr.pool[sr.pptr++] = ua[t]; sr.pool[sr.pptr++] = ua[t];
} catch (e) { alert(e); } } catch (e) {
alert(e);
}
} }
while (sr.pptr < sr.poolSize) { // extract some randomness from Math.random() while (sr.pptr < sr.poolSize) { // extract some randomness from Math.random()
t = Math.floor(65536 * Math.random()); t = Math.floor(65536 * Math.random());
@ -12975,6 +13011,7 @@ background-color: transparent;
} }
} }
if (refreshButton) { if (refreshButton) {
notifications.clearAll()
notify('Balance Updated') notify('Balance Updated')
refreshButton.classList.remove('animate-loader') refreshButton.classList.remove('animate-loader')
} }
@ -13056,7 +13093,7 @@ background-color: transparent;
if (typeof my_token_balance !== "object" || if (typeof my_token_balance !== "object" ||
typeof my_token_balance.balance !== "number" || typeof my_token_balance.balance !== "number" ||
my_token_balance.balance < amount_to_pay) { my_token_balance.balance < amount_to_pay) {
err_msg = `INFO: You have insufficient rupee balance.`; err_msg = `You have insufficient rupee balance.`;
notify(err_msg, 'error', true, true); notify(err_msg, 'error', true, true);
return false; return false;
} }
@ -13098,22 +13135,31 @@ background-color: transparent;
<!-- User functions --> <!-- User functions -->
<script> <script>
let depositRequested = 0,
depositedRupeeTxId = document.getElementById('deposited_rupee_txId');
function request_rupee_token() { function request_rupee_token() {
try { try {
const request_tokens_btn = document.getElementById('request_tokens_btn'); const request_tokens_btn = document.getElementById('request_tokens_btn');
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
const token_amount_to_buy = document.getElementById('token_amount_to_buy');
request_tokens_btn.onclick = async function () { request_tokens_btn.onclick = async function () {
btnLoading('request_tokens_btn', 'start') if (depositRequested === 0) {
if (typeof myFloID !== "string" || myFloID.length < 1) return; if (typeof myFloID !== "string" || myFloID.length < 1) return;
const token_amount_to_buy = Number(document.getElementById('token_amount_to_buy').value);
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id; const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
notify(`Please pay ₹ ${token_amount_to_buy} to UPI id ${cashier_upi}.`, '', true, true); document.getElementById('send_cash_to_deposit').innerHTML = `Please pay <b>₹${token_amount_to_buy.value}</b> to UPI Id <b>${cashier_upi}</b>.<br> After sending money, enter UPI transaction ID below.`;
let upi_txid = await askPrompt( document.getElementById('upi_txId_section').classList.remove('hide-completely')
`Please enter UPI TXID for deposited cash to ${cashier_upi}`); document.getElementById('deposit_amount_section').classList.add('hide-completely')
depositedRupeeTxId.disabled = false
request_tokens_btn.disabled = true
request_tokens_btn.children[0].textContent = 'Deposit'
}
if (depositRequested === 1) {
btnLoading('request_tokens_btn', 'start')
let upi_txid = depositedRupeeTxId.value
let request_object = { let request_object = {
user_flo_id: myFloID, user_flo_id: myFloID,
upi_txid: upi_txid, upi_txid: upi_txid,
deposit_amount: token_amount_to_buy, deposit_amount: token_amount_to_buy.value
} }
if (typeof upi_txid === "string" && upi_txid.length > 1) { if (typeof upi_txid === "string" && upi_txid.length > 1) {
floCloudAPI.sendGeneralData(request_object, token_app.master_configurations floCloudAPI.sendGeneralData(request_object, token_app.master_configurations
@ -13121,18 +13167,17 @@ background-color: transparent;
receiverID: cashier receiverID: cashier
}).then(result => { }).then(result => {
console.log(result); console.log(result);
notify('Request sent.', 'success'); notify('Deposit request sent.', 'success');
hidePopup() hidePopup()
}) })
return true; return true;
} else if (upi_txid.trim() === '') { }
notify('Please enter UPI TxID if you wish continue your transaction.');
} else if (upi_txid === null) {
notify('Request cancelled.', 'error');
hidePopup() hidePopup()
} }
return false; return false;
} }
depositRequested = depositRequested === 1 ? 0 : 1
}
} catch (error) { } catch (error) {
throw new Error(error) throw new Error(error)
} }
@ -13170,7 +13215,7 @@ background-color: transparent;
} }
const current_balance = Number(user_token_balance_object.balance); const current_balance = Number(user_token_balance_object.balance);
if (current_balance < withdraw_cash_amount) { if (current_balance < withdraw_cash_amount) {
notify(`You have unsufficient balance to withdraw. You can withdraw only Rs ${user_token_balance_object.balance}`, notify(`You have unsufficient balance to withdraw. You can withdraw only ₹${user_token_balance_object.balance}`,
'error', true, true); 'error', true, true);
hidePopup() hidePopup()
return; return;
@ -13214,10 +13259,10 @@ background-color: transparent;
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id; const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
const txt = `Please send cash to UPI address ${cashier_upi}. const txt = `Please send cash to UPI address <strong>${cashier_upi}</strong>.
Then specify the amount sent and UPI Transaction id below.`; Then specify the <strong>amount sent</strong> and <strong>UPI Transaction ID</strong> below.`;
document.getElementById('pay_cashier_info').innerText = txt; document.getElementById('pay_cashier_info').innerHTML = txt;
const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment') const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment')
cnf_cash_payment_btn.onclick = function () { cnf_cash_payment_btn.onclick = function () {

14008
index.html.orig Normal file
View File

File diff suppressed because it is too large Load Diff