0.0.43
This commit is contained in:
sairaj mote
parent
449316b73d
commit
184276fb7c
@ -1907,7 +1907,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
handleTouchStart = (e) => {
|
||||
this.touchStartY = e.changedTouches[0].clientY
|
||||
this.popup.style.transition = 'initial'
|
||||
this.popup.style.transition = 'transform 0.1s'
|
||||
this.touchStartTime = e.timeStamp
|
||||
}
|
||||
|
||||
|
||||
34
css/bg-art4.svg
Normal file
34
css/bg-art4.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<rect width="512" height="512" fill="#DE7EFF"/>
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M221.779 309.294C48.3794 380.575 -58.7347 516.954 -91.1719 575.626L-100 0.193375L564.422 -10L566.853 148.481C506.54 258.92 398.685 236.571 221.779 309.294Z" fill="#F1BAFF"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<path d="M155.507 228.837C0.0457989 333.625 -77.3623 488.805 -97.3001 552.812L-222 -9.0155L426.713 -153L461.057 1.73443C424.257 122.067 314.11 121.931 155.507 228.837Z" fill="#FAE6FF"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="-100" y="-26" width="715.25" height="625.626" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="22" dy="4"/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="-222" y="-156" width="815.413" height="743.812" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="23" dy="16"/>
|
||||
<feGaussianBlur stdDeviation="9.5"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0">
|
||||
<rect width="512" height="512" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
132
css/main.css
132
css/main.css
@ -14,7 +14,7 @@ body {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
--dark-shade: #dadada;
|
||||
--hue: 255;
|
||||
--saturation: 61%;
|
||||
@ -24,6 +24,18 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #a293d0;
|
||||
--text-color: 238, 238, 238;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
body[data-theme=dark] .balance:nth-of-type(3) {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
@ -394,6 +406,12 @@ sm-popup .action h4 {
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
sm-popup .message {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
sm-popup .message + .copy-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
sm-popup h5:not(.tag) {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin-bottom: 0.4rem;
|
||||
@ -494,7 +512,8 @@ details p {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
padding: 0.3rem;
|
||||
padding-top: 0.8rem;
|
||||
border-radius: 0.4em;
|
||||
opacity: 0.6;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -551,7 +570,15 @@ details p {
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.display-balance .balance {
|
||||
.display-balance .icon {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
padding: 0.3rem;
|
||||
stroke-width: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.balance {
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -560,7 +587,7 @@ details p {
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.display-balance .balance h4 {
|
||||
.balance h4 {
|
||||
font-size: 2.5rem;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
@ -568,47 +595,40 @@ details p {
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
.display-balance .balance h5 {
|
||||
.balance h5 {
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.display-balance .balance .tooltip {
|
||||
.balance .tooltip {
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.display-balance .balance:nth-of-type(1) {
|
||||
.balance:nth-of-type(1) {
|
||||
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(1) .tooltip {
|
||||
.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) {
|
||||
.balance:nth-of-type(2) {
|
||||
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(2) .tooltip {
|
||||
.balance:nth-of-type(2) .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(3) {
|
||||
.balance:nth-of-type(3) {
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(3) .tooltip {
|
||||
.balance:nth-of-type(3) .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #1b0980 inset;
|
||||
}
|
||||
.display-balance .balance .tooltip {
|
||||
.balance .tooltip {
|
||||
margin-left: auto;
|
||||
}
|
||||
.display-balance .icon {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
padding: 0.3rem;
|
||||
stroke-width: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
@ -717,7 +737,7 @@ details p {
|
||||
sm-tab-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
background: var(--background-color);
|
||||
z-index: 2;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
@ -968,10 +988,6 @@ sm-panel {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#send_amount_to_deposit {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
stroke-dashoffset: 50;
|
||||
@ -1073,6 +1089,7 @@ sm-panel {
|
||||
width: 3rem;
|
||||
padding: 0.8rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background-size: cover;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.activity .activity-type {
|
||||
@ -1152,7 +1169,6 @@ sm-panel {
|
||||
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.select .remove {
|
||||
display: none;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
padding: 0.7rem;
|
||||
@ -1178,9 +1194,12 @@ sm-panel {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#settings_page .remove {
|
||||
display: block;
|
||||
#activity_page .empty-state,
|
||||
#request_page .empty-state,
|
||||
#settings_page .empty-state {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
#settings_page > h4 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1191,9 +1210,6 @@ sm-panel {
|
||||
#settings_page sm-button {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
#settings_page .empty-state {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page, #deposit {
|
||||
@ -1221,7 +1237,7 @@ sm-panel {
|
||||
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
margin-left: 11rem;
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
sm-popup {
|
||||
@ -1252,16 +1268,14 @@ sm-panel {
|
||||
#navbar .navbar-item {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 0.8rem;
|
||||
padding: 0.8rem 1.2rem;
|
||||
}
|
||||
#navbar .navbar-item .icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
#navbar .navbar-item:hover {
|
||||
opacity: 1;
|
||||
@ -1270,7 +1284,7 @@ sm-panel {
|
||||
margin: 1.5rem 1rem;
|
||||
}
|
||||
#navbar .logo h4 {
|
||||
font-size: 1rem;
|
||||
display: none;
|
||||
}
|
||||
#navbar .logo .main-logo {
|
||||
height: 1.2rem;
|
||||
@ -1309,6 +1323,10 @@ sm-panel {
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 800px) {
|
||||
body {
|
||||
margin-left: 11rem;
|
||||
}
|
||||
|
||||
.complaint {
|
||||
gap: 0 1.5rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -1327,6 +1345,19 @@ sm-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
#navbar .icon {
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
#navbar .logo h4 {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
@ -1358,33 +1389,6 @@ sm-panel {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: 238, 238, 238;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: no-preference) {
|
||||
:root {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
.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
203
css/main.scss
203
css/main.scss
@ -14,7 +14,7 @@ body {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
--dark-shade: #dadada;
|
||||
--hue: 255;
|
||||
--saturation: 61%;
|
||||
@ -23,6 +23,17 @@ body {
|
||||
font-size: 16px;
|
||||
background-size: cover;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--accent-color: #a293d0;
|
||||
--text-color: 238, 238, 238;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
background-color: var(--background-color);
|
||||
.balance:nth-of-type(3){
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
@ -412,6 +423,12 @@ sm-popup{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.message{
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.message + .copy-row{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h5:not(.tag){
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin-bottom: 0.4rem;
|
||||
@ -517,7 +534,8 @@ details{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
padding: 0.3rem;
|
||||
padding-top: 0.8rem;
|
||||
border-radius: 0.4em;
|
||||
opacity: 0.6;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -575,57 +593,6 @@ details{
|
||||
grid-template-areas: '. .' 'flo flo';
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
.balance{
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
h4{
|
||||
font-size: 2.5rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
text-shadow: 1px 0.1rem 0.2rem #00000040;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
h5{
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.tooltip{
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
background: url(bg-art1.svg), 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: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem#1b0980 inset;
|
||||
}
|
||||
}
|
||||
.tooltip{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
@ -634,6 +601,57 @@ details{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.balance{
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
h4{
|
||||
font-size: 2.5rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
text-shadow: 1px 0.1rem 0.2rem #00000040;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
h5{
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.tooltip{
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
background: url(bg-art1.svg), 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: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem#1b0980 inset;
|
||||
}
|
||||
}
|
||||
.tooltip{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip{
|
||||
position: absolute;
|
||||
@ -746,7 +764,7 @@ details{
|
||||
sm-tab-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
background: var(--background-color);
|
||||
z-index: 2;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
@ -1030,9 +1048,6 @@ sm-panel{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
#send_amount_to_deposit{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@keyframes popup{
|
||||
0%{
|
||||
@ -1136,6 +1151,7 @@ sm-panel{
|
||||
width: 3rem;
|
||||
padding: 0.8rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background-size: cover;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.activity-type{
|
||||
@ -1214,7 +1230,6 @@ sm-panel{
|
||||
}
|
||||
}
|
||||
.remove{
|
||||
display: none;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
padding: 0.7rem;
|
||||
@ -1239,10 +1254,14 @@ sm-panel{
|
||||
justify-self: flex-start;
|
||||
width: max-content;
|
||||
}
|
||||
#activity_page,
|
||||
#request_page,
|
||||
#settings_page{
|
||||
.remove{
|
||||
display: block;
|
||||
.empty-state{
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
#settings_page{
|
||||
& > h4{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1253,9 +1272,6 @@ sm-panel{
|
||||
sm-button{
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.empty-state{
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page, #deposit{
|
||||
@ -1281,7 +1297,7 @@ sm-panel{
|
||||
}
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
margin-left: 11rem;
|
||||
margin-left: 4rem;
|
||||
}
|
||||
sm-popup{
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
@ -1309,15 +1325,13 @@ sm-panel{
|
||||
.navbar-item {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 0.8rem;
|
||||
padding: 0.8rem 1.2rem;
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -1326,7 +1340,7 @@ sm-panel{
|
||||
.logo{
|
||||
margin: 1.5rem 1rem;
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
display: none;
|
||||
}
|
||||
.main-logo{
|
||||
height: 1.2rem;
|
||||
@ -1368,6 +1382,9 @@ sm-panel{
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
body {
|
||||
margin-left: 11rem;
|
||||
}
|
||||
.complaint {
|
||||
gap: 0 1.5rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -1388,6 +1405,24 @@ sm-panel{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
#navbar{
|
||||
.navbar-item {
|
||||
h5{
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
.logo{
|
||||
h4{
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-panel{
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
@ -1421,36 +1456,6 @@ sm-panel{
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: 238, 238, 238;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: no-preference) {
|
||||
:root {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.navbar-item:hover{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
|
||||
98
index.html
98
index.html
@ -129,7 +129,7 @@
|
||||
<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>
|
||||
<p class="message">Send money to UPI ID below.</p>
|
||||
<div class="copy-row">
|
||||
<h4 id="send_cash_to_deposit" class="copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
@ -255,7 +255,15 @@
|
||||
sent as Rupee.
|
||||
</p>
|
||||
</details>
|
||||
<p id="pay_cashier_info"></p>
|
||||
<p class="message">Send money to UPI ID below.</p>
|
||||
<div class="copy-row">
|
||||
<h4 id="pay_cashier_info" class="copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
<title>Copy</title>
|
||||
<rect x="16" y="16" width="48" height="48" rx="6" />
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
<sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required>
|
||||
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
|
||||
<title>rupee-symbol</title>
|
||||
@ -713,21 +721,21 @@
|
||||
<h3>Payment Requests</h3>
|
||||
<sm-tab-header variant="tab" class="round" target="payment_request_tab">
|
||||
<sm-tab>Pending</sm-tab>
|
||||
<sm-tab>Approved</sm-tab>
|
||||
<sm-tab>Paid</sm-tab>
|
||||
<sm-tab>Declined</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="payment_request_tab">
|
||||
<sm-panel>
|
||||
<div id="pending_payment_request_container" class="container"></div>
|
||||
<h4 class="empty-state">You don't have any requests.</h4>
|
||||
<h4 class="empty-state">You don't have any pending requests.</h4>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<div id="approved_payment_request_container" class="container"></div>
|
||||
<h4 class="empty-state">You don't have any requests.</h4>
|
||||
<div id="paid_payment_request_container" class="container"></div>
|
||||
<h4 class="empty-state">No paid requests.</h4>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<div id="declined_payment_request_container" class="container"></div>
|
||||
<h4 class="empty-state">You don't have any requests.</h4>
|
||||
<h4 class="empty-state">No declined requests.</h4>
|
||||
</sm-panel>
|
||||
</sm-tab-panels>
|
||||
</section>
|
||||
@ -793,16 +801,16 @@
|
||||
</section>
|
||||
<section id="settings_page" class="page hide-completely">
|
||||
<h3 class="bottom-margin">Settings<h3>
|
||||
<section>
|
||||
<h4>My FLO ID</h4>
|
||||
<div class="copy-row">
|
||||
<h4 class="user-flo-id copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
<title>Copy</title>
|
||||
<rect x="16" y="16" width="48" height="48" rx="6" />
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
<section>
|
||||
<h4>My FLO ID</h4>
|
||||
<div class="copy-row">
|
||||
<h4 class="user-flo-id copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
<title>Copy</title>
|
||||
<rect x="16" y="16" width="48" height="48" rx="6" />
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<h4>My UPIs</h4>
|
||||
<div class="upi-container"></div>
|
||||
@ -813,6 +821,7 @@
|
||||
<sm-button variant="primary" onclick="signOut()">Sign out</sm-button>
|
||||
</section>
|
||||
<section id="transaction_page" class="page">
|
||||
<h3 class="bottom-margin">Transaction</h3>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
@ -1342,7 +1351,8 @@
|
||||
document.addEventListener('popupopened', e => {
|
||||
let thisPopup = e.detail.popup,
|
||||
firstInput = thisPopup.querySelector('sm-input')
|
||||
firstInput.focusIn()
|
||||
if(firstInput)
|
||||
firstInput.focusIn()
|
||||
switch(e.detail.popup.id){
|
||||
case 'deposit_rupee' :
|
||||
request_rupee_token()
|
||||
@ -1582,10 +1592,6 @@
|
||||
if (e.target.closest('sm-input')) {
|
||||
let input = e.target.closest('sm-input')
|
||||
formValidation(input)
|
||||
if(input.id === 'token_amount_to_buy'){
|
||||
let amount = input.value < 1 ? 0 : input.value
|
||||
document.getElementById('send_amount_to_deposit').innerHTML = `Pay <b>₹${amount}</b> to UPI Id below.`;
|
||||
}
|
||||
}
|
||||
})
|
||||
document.addEventListener('keyup', (e) => {
|
||||
@ -1769,8 +1775,6 @@
|
||||
}
|
||||
|
||||
const addUpiInput = document.getElementById('add_upi_input')
|
||||
|
||||
|
||||
async function addUserUPI() {
|
||||
userUPI = addUpiInput.value
|
||||
compactIDB.addData('userUPIs', userUPI, userUPI)
|
||||
@ -1795,6 +1799,8 @@
|
||||
|
||||
function removeUPI(upi){
|
||||
compactIDB.removeData('userUPIs', upi)
|
||||
if(upi === defaultUPI)
|
||||
localStorage.removeItem(`defaultUPI${myFloID}`)
|
||||
renderUserUPI()
|
||||
}
|
||||
|
||||
@ -1820,13 +1826,15 @@
|
||||
if(upi === defaultUPI)
|
||||
radios += `
|
||||
<h5 class="tag">Primary</h5>`
|
||||
radios += `
|
||||
<svg class="icon remove" viewBox="0 0 64 64">
|
||||
<title>Remove this UPI</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||||
</svg>
|
||||
</div>`
|
||||
if(container.closest('#settings_page'))
|
||||
radios += `
|
||||
<svg class="icon remove" viewBox="0 0 64 64">
|
||||
<title>Remove this UPI</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||||
</svg>`
|
||||
radios +=`
|
||||
</div>`
|
||||
}
|
||||
container.innerHTML = radios
|
||||
})
|
||||
@ -11491,7 +11499,7 @@
|
||||
userType.forEach(user => user.textContent = 'User')
|
||||
show_all_user_activities()
|
||||
show_payment_requests()
|
||||
showPage(document.getElementById('home_page_btn'), 'home_page')
|
||||
showPage(document.getElementById('home_page_btn'), 'transaction_page')
|
||||
|
||||
withdraw_token_to_get_cash();
|
||||
|
||||
@ -11962,28 +11970,29 @@
|
||||
refreshButton.textContent = 'Checking...'
|
||||
const current_token_balance = document.querySelector('.token-balance').textContent;
|
||||
if (typeof current_token_balance == "string") {
|
||||
const get_user_rupee_balance = await ajaxGet(
|
||||
const [get_user_rupee_balance, get_user_flo_balance] = await Promise.all([ ajaxGet(
|
||||
'https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' +
|
||||
myFloID)
|
||||
myFloID),
|
||||
floBlockchainAPI.getBalance(myFloID)
|
||||
])
|
||||
|
||||
if (typeof get_user_rupee_balance === "object" && get_user_rupee_balance.balance >= 0) {
|
||||
if (get_user_rupee_balance.balance === null)
|
||||
get_user_rupee_balance.balance = 0;
|
||||
document.querySelectorAll('.token-balance').forEach(bal => bal.textContent = get_user_rupee_balance.balance);
|
||||
}
|
||||
const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance);
|
||||
|
||||
|
||||
if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) {
|
||||
document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance);
|
||||
}
|
||||
|
||||
const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID)
|
||||
console.log(get_user_flo_balance)
|
||||
if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) {
|
||||
get_user_flo_balance = 0;
|
||||
}
|
||||
document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance);
|
||||
|
||||
const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance);
|
||||
if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) {
|
||||
document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance);
|
||||
}
|
||||
|
||||
}
|
||||
if (refreshButton) {
|
||||
notify('Balance Updated')
|
||||
@ -12334,10 +12343,7 @@
|
||||
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
|
||||
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
|
||||
|
||||
const txt = `Please send cash to UPI address <strong>${cashier_upi}</strong>.
|
||||
Then specify the <strong>amount sent</strong> and <strong>UPI address you used to send money</strong> below.`;
|
||||
|
||||
document.getElementById('pay_cashier_info').innerHTML = txt;
|
||||
document.getElementById('pay_cashier_info').textContent = cashier_upi;
|
||||
|
||||
const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment')
|
||||
cnf_cash_payment_btn.onclick = function () {
|
||||
@ -12628,7 +12634,7 @@
|
||||
.map(m => m.message.pay_req_id));
|
||||
|
||||
let pendingPaymentRequestContainer = document.getElementById("pending_payment_request_container"),
|
||||
approvedPaymentRequestContainer = document.getElementById("approved_payment_request_container"),
|
||||
approvedPaymentRequestContainer = document.getElementById("paid_payment_request_container"),
|
||||
declinedPaymentRequestContainer = document.getElementById("declined_payment_request_container");
|
||||
|
||||
pendingPaymentRequestContainer.innerHTML = ``;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user