0.0.41
This commit is contained in:
sairaj mote
parent
ed5dcf9623
commit
5e2cea29c9
@ -47,8 +47,6 @@ smButton.innerHTML = `
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
font-family: var(--font-family);
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
@ -722,7 +720,6 @@ word-spacing: 0.1em;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
text-transform: capitalize;
|
||||
font-family: var(--font-family);
|
||||
height: 100%;
|
||||
}
|
||||
@media (hover: hover){
|
||||
@ -1728,7 +1725,7 @@ smPopup.innerHTML = `
|
||||
transition: transform 0.3s;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -1rem 2rem #00000020;
|
||||
max-height: 100vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
.container-header{
|
||||
display: flex;
|
||||
@ -2872,6 +2869,9 @@ pointer-events: none;
|
||||
height: 100%;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
:host(.round) .indicator{
|
||||
border-radius: 3rem;
|
||||
}
|
||||
:host([variant="tab"]) .tab-header{
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -2879,11 +2879,10 @@ border-bottom: none;
|
||||
display: none;
|
||||
}
|
||||
:host([variant="tab"]) .tab-header{
|
||||
gap: 0;
|
||||
display: inline-grid;
|
||||
justify-self: flex-start;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0.3rem;
|
||||
gap: 0.2rem;
|
||||
display: inline-grid;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
:host([variant="tab"]) slot::slotted(.active){
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
|
||||
1
css/card-art1.svg
Normal file
1
css/card-art1.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><style>.a,.b{fill:none;stroke-miterlimit:10;}.a{stroke:#fff;stroke-width:2px;opacity:0.8;}.b{stroke:#c1272d;opacity:0.6;}</style></defs><title>card-art1</title><circle class="a" cx="64" cy="64" r="19"/><path class="b" d="M9.32,53.55c1,.55,2.43,1.2,3.16.63,1.18-.9-.57-4,.64-5.07s5,1.52,5.7.64c.47-.62-1.18-2.18-.64-3.17.4-.73,1.79-.78,3.17-.63"/></svg>
|
||||
|
After Width: | Height: | Size: 441 B |
105
css/main.css
105
css/main.css
@ -418,11 +418,18 @@ details, summary {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
details p {
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
details h5 {
|
||||
line-height: 0.6;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.2rem !important;
|
||||
}
|
||||
details p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#sign_in_popup h3 {
|
||||
@ -536,7 +543,7 @@ details p {
|
||||
.display-balance {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: ". ." "flo flo";
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.display-balance .balance {
|
||||
@ -544,29 +551,43 @@ details p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.display-balance .balance h4 {
|
||||
margin-top: 2.5rem;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 2.5rem;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
.display-balance .balance h5 {
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.display-balance .balance .tooltip {
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.display-balance .balance:nth-of-type(1) {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.display-balance .balance:nth-of-type(1) .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(2) {
|
||||
background: linear-gradient(#ff4857, #fd946a);
|
||||
background: linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(2) .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(3) {
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: linear-gradient(#051575, #0d014e);
|
||||
background: linear-gradient(135deg, #2f69e6, #1b0980);
|
||||
}
|
||||
.display-balance .balance:nth-of-type(3) .tooltip {
|
||||
color: rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0 0 0.4rem #1b0980 inset;
|
||||
}
|
||||
.display-balance .balance .tooltip {
|
||||
margin-left: auto;
|
||||
@ -590,23 +611,28 @@ details p {
|
||||
flex-direction: column;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
transition: clip-path 0.3s;
|
||||
clip-path: circle(0.8rem at calc(100% - 1.25rem) 1.15rem);
|
||||
transition: clip-path 0.4s ease-out;
|
||||
clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.tooltip .tt-icon {
|
||||
display: inline-flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tooltip .tooltip-text {
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
line-height: 1.4;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 3rem);
|
||||
max-width: 30ch;
|
||||
}
|
||||
.tooltip:hover {
|
||||
clip-path: circle(100%);
|
||||
@ -638,11 +664,14 @@ details p {
|
||||
.options-tab .option .icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 2rem;
|
||||
padding: 0.8rem;
|
||||
stroke: var(--accent-color);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.options-tab .option h4 {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
.options-tab .option:active {
|
||||
@ -680,14 +709,16 @@ sm-tab-header {
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 2;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
sm-tab::part(tab) {
|
||||
padding: 0.8rem 0.4rem;
|
||||
sm-tab {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
sm-tab::part(tab) {
|
||||
padding: 0.4rem 1.2rem;
|
||||
}
|
||||
|
||||
sm-panel {
|
||||
width: 100%;
|
||||
@ -1051,6 +1082,7 @@ sm-panel {
|
||||
.activity .activity-amount {
|
||||
text-align: right;
|
||||
grid-area: amount;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
.activity .activity-time {
|
||||
text-align: right;
|
||||
@ -1066,7 +1098,7 @@ sm-panel {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1127,6 +1159,14 @@ sm-panel {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#settings_page > h4 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#settings_page p {
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page, #deposit {
|
||||
display: grid;
|
||||
@ -1153,7 +1193,7 @@ sm-panel {
|
||||
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
margin-left: 10rem;
|
||||
margin-left: 11rem;
|
||||
}
|
||||
|
||||
sm-popup {
|
||||
@ -1178,13 +1218,13 @@ sm-panel {
|
||||
right: auto;
|
||||
border-top: none;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
box-shadow: -0.5rem 0 0.5rem #00000008 inset;
|
||||
}
|
||||
#navbar .navbar-item {
|
||||
display: flex;
|
||||
border-radius: 0.5rem;
|
||||
width: auto;
|
||||
padding: 0.8rem 1.6rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
#navbar .navbar-item .icon {
|
||||
height: 1.2rem;
|
||||
@ -1208,6 +1248,9 @@ sm-panel {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
#navbar .active {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-bottom: 2rem;
|
||||
@ -1224,18 +1267,14 @@ sm-panel {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#home_page .balance h4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 2rem 0.8rem;
|
||||
}
|
||||
|
||||
#settings_page > h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#settings_page .copy-row {
|
||||
display: inline-grid;
|
||||
}
|
||||
@ -1313,7 +1352,7 @@ sm-panel {
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
.option:hover {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
.navbar-item:hover {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
105
css/main.scss
105
css/main.scss
@ -436,12 +436,18 @@ sm-popup{
|
||||
details, summary{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
summary{
|
||||
cursor: pointer;
|
||||
}
|
||||
details{
|
||||
p{
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
h5{
|
||||
line-height: 0.6;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.2rem !important;
|
||||
}
|
||||
p{
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -563,34 +569,48 @@ details{
|
||||
.display-balance {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: '. .' 'flo flo';
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
.balance{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
h4{
|
||||
margin-top: 2.5rem;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 2.5rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
h5{
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.tooltip{
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
background: linear-gradient(#ff4857, #fd946a);
|
||||
background: linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: linear-gradient(#051575, #0d014e);
|
||||
background: linear-gradient(135deg, #2f69e6, #1b0980);
|
||||
.tooltip{
|
||||
color: rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0 0 0.4rem#1b0980 inset;
|
||||
}
|
||||
}
|
||||
.tooltip{
|
||||
@ -617,22 +637,27 @@ details{
|
||||
flex-direction: column;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
transition: clip-path 0.3s;
|
||||
clip-path: circle(0.8rem at calc(100% - 1.25rem) 1.15rem);
|
||||
transition: clip-path 0.4s ease-out;
|
||||
clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem);
|
||||
scrollbar-width: thin;
|
||||
.tt-icon{
|
||||
display: inline-flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tooltip-text{
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
line-height: 1.4;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 3rem);
|
||||
max-width: 30ch;
|
||||
}
|
||||
&:hover{
|
||||
clip-path: circle(100%);
|
||||
@ -663,12 +688,15 @@ details{
|
||||
.icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 2rem;
|
||||
padding: 0.8rem;
|
||||
stroke: var(--accent-color);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -711,12 +739,14 @@ sm-tab-header {
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 2;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
sm-tab::part(tab){
|
||||
padding: 0.8rem 0.4rem;
|
||||
sm-tab{
|
||||
text-transform: capitalize;
|
||||
&::part(tab){
|
||||
padding: 0.4rem 1.2rem;
|
||||
}
|
||||
}
|
||||
sm-panel{
|
||||
width: 100%;
|
||||
@ -1117,6 +1147,7 @@ sm-panel{
|
||||
.activity-amount{
|
||||
text-align: right;
|
||||
grid-area: amount;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.activity-time{
|
||||
text-align: right;
|
||||
@ -1132,7 +1163,7 @@ sm-panel{
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&:first-of-type:not(:last-of-type){
|
||||
@ -1191,6 +1222,15 @@ sm-panel{
|
||||
justify-self: flex-start;
|
||||
width: max-content;
|
||||
}
|
||||
#settings_page{
|
||||
& > h4{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p{
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page, #deposit{
|
||||
display: grid;
|
||||
@ -1215,7 +1255,7 @@ sm-panel{
|
||||
}
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
margin-left: 10rem;
|
||||
margin-left: 11rem;
|
||||
}
|
||||
sm-popup{
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
@ -1238,12 +1278,12 @@ sm-panel{
|
||||
right: auto;
|
||||
border-top: none;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
box-shadow: -0.5rem 0 0.5rem #00000008 inset;
|
||||
.navbar-item {
|
||||
display: flex;
|
||||
border-radius: 0.5rem;
|
||||
width: auto;
|
||||
padding: 0.8rem 1.6rem;
|
||||
margin-bottom: 0.3rem;
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
@ -1267,6 +1307,9 @@ sm-panel{
|
||||
width: 1.2rem;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
@ -1283,19 +1326,15 @@ sm-panel{
|
||||
}
|
||||
.balance{
|
||||
h4{
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.options-tab{
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 2rem 0.8rem;
|
||||
}
|
||||
#settings_page{
|
||||
& > h4{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.copy-row{
|
||||
display: inline-grid;
|
||||
}
|
||||
@ -1383,7 +1422,7 @@ sm-panel{
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.option:hover{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
.navbar-item:hover{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
113
index.html
113
index.html
@ -70,14 +70,20 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<svg class="icon illustration" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<p>
|
||||
Send rupee to any FLO address.<br>
|
||||
<strong>Make sure you have enough balance.</strong>
|
||||
Send rupee to any FLO address.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
How to send rupee?
|
||||
</summary>
|
||||
<h5>Step 1</h5>
|
||||
<p>Enter receiver's FLO address.</p>
|
||||
<h5>Step 2</h5>
|
||||
<p>Enter the amount you want to send.</p>
|
||||
<h5>Step 3</h5>
|
||||
<p>Press <strong>Send</strong> button.</p>
|
||||
</details>
|
||||
<sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input>
|
||||
<sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required>
|
||||
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
|
||||
@ -103,19 +109,26 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<svg class="icon illustration" viewBox="0 0 64 64">
|
||||
<title>deposit</title>
|
||||
<path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
|
||||
</svg>
|
||||
<p>
|
||||
Add money through UPI.
|
||||
Deposit money through UPI.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
How to deposit money?
|
||||
</summary>
|
||||
<h5>Step 1</h5>
|
||||
<p>Copy UPI address shown below.</p>
|
||||
<h5>Step 2</h5>
|
||||
<p>Open any UPI app of your preference and send money to copied UPI address. <strong>(Do not close this browser)</strong></p>
|
||||
<h5>Step 3</h5>
|
||||
<p>Copy the UPI transaction ID shown after transaction was successful.</p>
|
||||
<h5>Step 4</h5>
|
||||
<p>Enter the amount you sent to copied address</p>
|
||||
<h5>Step 5</h5>
|
||||
<p>Then enter the UPI transaction ID you copied when was transaction completed.</p>
|
||||
<h5>Step 6</h5>
|
||||
<p>Press <strong>Deposit</strong> button</p>
|
||||
</details>
|
||||
<p id="send_amount_to_deposit">Pay <b>₹0</b> to UPI Id below.</p>
|
||||
<div class="copy-row">
|
||||
<h4 id="send_cash_to_deposit" class="copy"></h4>
|
||||
@ -151,20 +164,20 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<svg class="icon illustration" viewBox="0 0 64 64">
|
||||
<title>withdraw</title>
|
||||
<path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
|
||||
</svg>
|
||||
<p>
|
||||
Withdraw or redeem your Rupee back to your specified UPI address.
|
||||
Withdraw or redeem your rupee to your specified UPI address.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
How to withdraw rupee?
|
||||
</summary>
|
||||
<h5>Step 1</h5>
|
||||
<p>Enter amount you want to withdraw</p>
|
||||
<h5>Step 2</h5>
|
||||
<p>Select UPI address you want to withdraw rupee to. <strong>If you haven't added UPI address, add one using 'Add UPI address' button.</strong></p>
|
||||
<h5>Step 3</h5>
|
||||
<p>Press <strong>Withdraw</strong> button</p>
|
||||
</details>
|
||||
<sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required>
|
||||
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
|
||||
<title>rupee-symbol</title>
|
||||
@ -194,10 +207,6 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<svg class="icon request-icon illustration" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<p>
|
||||
Request Rupee from other's using FLO address.
|
||||
</p>
|
||||
@ -226,10 +235,6 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<svg class="icon illustration" viewBox="0 0 64 64">
|
||||
<path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
|
||||
<rect height="64" width="64" rx="8"></rect>
|
||||
</svg>
|
||||
<details>
|
||||
<summary>
|
||||
What is this?
|
||||
@ -463,24 +468,24 @@
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">Your wallet balance</p>
|
||||
</div>
|
||||
<h4 class="token-balance">0</h4>
|
||||
<h5>Rupee</h5>
|
||||
<h4 class="token-balance">0</h4>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<div class="tooltip help">
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">Money that is pending after deposit.</p>
|
||||
<p class="tooltip-text">Money that is in-process after deposit.</p>
|
||||
</div>
|
||||
<h4 class="uncnf-token-balance">0</h4>
|
||||
<h5>In-process</h5>
|
||||
<h4 class="uncnf-token-balance">0</h4>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<div class="tooltip help">
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">FLO balance required for each transaction.</p>
|
||||
</div>
|
||||
<h4 class="flo-balance">0</h4>
|
||||
<h5>FLO</h5>
|
||||
<h4 class="flo-balance">0</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -488,7 +493,7 @@
|
||||
<section id="deposit" class="page hide-completely">
|
||||
<div class="left">
|
||||
<h3>Transaction Requests</h3>
|
||||
<sm-tab-header target="requests_to_cashier">
|
||||
<sm-tab-header variant="tab" class="round" target="requests_to_cashier">
|
||||
<sm-tab>Deposits</sm-tab>
|
||||
<sm-tab>Withdrawals</sm-tab>
|
||||
<sm-tab>Pay Through Cashier</sm-tab>
|
||||
@ -696,7 +701,7 @@
|
||||
</section>
|
||||
<section id="request_page" class="page hide-completely">
|
||||
<h3>Payment Requests</h3>
|
||||
<sm-tab-header target="payment_request_tab">
|
||||
<sm-tab-header variant="tab" class="round" target="payment_request_tab">
|
||||
<sm-tab>Pending</sm-tab>
|
||||
<sm-tab>Approved</sm-tab>
|
||||
<sm-tab>Declined</sm-tab>
|
||||
@ -720,7 +725,7 @@
|
||||
<h3>Activity</h3>
|
||||
<p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
|
||||
assistance from our helpline.</p>
|
||||
<sm-tab-header target="user_activities">
|
||||
<sm-tab-header variant="tab" class="round" target="user_activities">
|
||||
<sm-tab>Sent</sm-tab>
|
||||
<sm-tab>Deposits</sm-tab>
|
||||
<sm-tab>Withdrawals</sm-tab>
|
||||
@ -756,7 +761,7 @@
|
||||
</div>
|
||||
<h5 class="label">Select Cashier</h5>
|
||||
<sm-strip-select name="cashier" id="select_cashier"></sm-strip-select>
|
||||
<sm-tab-header target="all_complaints">
|
||||
<sm-tab-header variant="tab" class="round" target="all_complaints">
|
||||
<sm-tab>Deposit</sm-tab>
|
||||
<sm-tab>Withdraw</sm-tab>
|
||||
<sm-tab>Pay through cashier</sm-tab>
|
||||
@ -789,11 +794,13 @@
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
|
||||
<h4>My UPIs</h4>
|
||||
<div class="upi-container"></div>
|
||||
<div class="empty-state">Add UPI address for easier access during various transactions.</div>
|
||||
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
|
||||
<h4>Sign Out</h4>
|
||||
<p>Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.</p>
|
||||
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
|
||||
</section>
|
||||
<section id="transaction_page" class="page">
|
||||
|
||||
@ -1501,7 +1508,7 @@
|
||||
if(relative){
|
||||
if(year == currentYear){
|
||||
if(currentTime[1] === month && date === currentTime[2])
|
||||
return `${finalHours} ${month} ${date}`;
|
||||
return `${finalHours}`;
|
||||
else
|
||||
return ` ${date} ${month}`;
|
||||
|
||||
@ -1692,6 +1699,10 @@
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('settings_page').addEventListener('change', e => {
|
||||
setPrimaryUPI(e.target.value)
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
const transactionSuccessSection = document.getElementById('success_section'),
|
||||
@ -1742,7 +1753,7 @@
|
||||
compactIDB.addData('userUPIs', userUPI, userUPI)
|
||||
.then( success => {
|
||||
if(!defaultUPI)
|
||||
setDefaultUPI(userUPI)
|
||||
setPrimaryUPI(userUPI)
|
||||
notify('UPI address added', 'success')
|
||||
hidePopup()
|
||||
renderUserUPI()
|
||||
@ -1753,8 +1764,9 @@
|
||||
})
|
||||
}
|
||||
|
||||
function setDefaultUPI(upiAddress){
|
||||
function setPrimaryUPI(upiAddress){
|
||||
localStorage.setItem(`defaultUPI${myFloID}`, upiAddress)
|
||||
renderUserUPI()
|
||||
defaultUPI = upiAddress
|
||||
}
|
||||
const UPIContainers = document.querySelectorAll('.upi-container')
|
||||
@ -1777,7 +1789,7 @@
|
||||
`
|
||||
if(upi === defaultUPI)
|
||||
radios += `
|
||||
<h5 class="tag">Default</h5>`
|
||||
<h5 class="tag">Primary</h5>`
|
||||
radios += '</label>'
|
||||
}
|
||||
container.innerHTML = radios
|
||||
@ -1802,6 +1814,7 @@
|
||||
document.querySelector('main').classList.add('hide-completely')
|
||||
document.getElementById('navbar').classList.add('hide-completely')
|
||||
document.getElementById('main_header').classList.add('hide-completely')
|
||||
localStorage.removeItem(`defaultUPI${myFloID}`)
|
||||
floDapps.clearCredentials()
|
||||
compactIDB.deleteDB().then((message) => {
|
||||
delete token_app.master_configurations;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user