0.0.42
This commit is contained in:
sairaj mote
parent
5e2cea29c9
commit
449316b73d
@ -45,7 +45,7 @@ smButton.innerHTML = `
|
||||
justify-content: center;
|
||||
transition: box-shadow 0.3s;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@ -209,20 +209,28 @@ border: none;
|
||||
border-radius: 0.3em;
|
||||
transition: opacity 0.3s;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
box-shadow: 0 0 0 0.1em rgba(var(--text-color), 0.2) inset;
|
||||
box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
|
||||
font-family: var(--font-family);
|
||||
width: 100%
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.input.readonly .clear{
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.readonly{
|
||||
pointer-events: none;
|
||||
}
|
||||
input:focus{
|
||||
caret-color: var(--accent-color);
|
||||
}
|
||||
.input:focus-within{
|
||||
.input:focus-within:not(.readonly){
|
||||
box-shadow: 0 0 0 0.1em var(--accent-color) inset;
|
||||
}
|
||||
.disabled{
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.label {
|
||||
user-select: none;
|
||||
@ -349,13 +357,23 @@ customElements.define('sm-input',
|
||||
else
|
||||
this.shadowRoot.querySelector('.input').classList.remove('disabled')
|
||||
}
|
||||
set readOnly(value) {
|
||||
if (value) {
|
||||
this.shadowRoot.querySelector('input').setAttribute('readonly', '')
|
||||
this.shadowRoot.querySelector('.input').classList.add('readonly')
|
||||
}
|
||||
else {
|
||||
this.shadowRoot.querySelector('input').removeAttribute('readonly')
|
||||
this.shadowRoot.querySelector('.input').classList.remove('readonly')
|
||||
}
|
||||
}
|
||||
|
||||
focusIn = () => {
|
||||
this.shadowRoot.querySelector('input').focus()
|
||||
this.input.focus()
|
||||
}
|
||||
|
||||
focusOut = () => {
|
||||
this.shadowRoot.querySelector('input').blur()
|
||||
this.input.blur()
|
||||
}
|
||||
|
||||
preventNonNumericalInput = (e) => {
|
||||
@ -425,6 +443,14 @@ customElements.define('sm-input',
|
||||
this.input.setAttribute('max', maxValue)
|
||||
this.max = parseInt(maxValue)
|
||||
}
|
||||
if (this.hasAttribute('minlength')) {
|
||||
let minValue = this.getAttribute('minlength')
|
||||
this.input.setAttribute('minlength', minValue)
|
||||
}
|
||||
if (this.hasAttribute('maxlength')) {
|
||||
let maxValue = this.getAttribute('maxlength')
|
||||
this.input.setAttribute('maxlength', maxValue)
|
||||
}
|
||||
if (this.hasAttribute('pattern')) {
|
||||
this.input.setAttribute('pattern', this.getAttribute('pattern'))
|
||||
}
|
||||
@ -432,7 +458,7 @@ customElements.define('sm-input',
|
||||
this.input.setAttribute('readonly', '')
|
||||
this.readonly = true
|
||||
}
|
||||
if (this.hasAttribute('readonly')) {
|
||||
if (this.hasAttribute('disabled')) {
|
||||
this.inputParent.classList.add('disabled')
|
||||
}
|
||||
if (this.hasAttribute('helper-text')) {
|
||||
@ -462,9 +488,10 @@ customElements.define('sm-input',
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue !== newValue) {
|
||||
if (name === 'placeholder')
|
||||
if (name === 'placeholder') {
|
||||
this.shadowRoot.querySelector('.label').textContent = newValue;
|
||||
this.setAttribute('aria-label', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -629,16 +656,12 @@ customElements.define('sm-textarea',
|
||||
this.inputParent.classList.add('animate-label')
|
||||
else
|
||||
this.label.classList.add('hide')
|
||||
if (!this.readonly)
|
||||
this.clearBtn.classList.remove('hide')
|
||||
}
|
||||
else {
|
||||
if (this.animate)
|
||||
this.inputParent.classList.remove('animate-label')
|
||||
else
|
||||
this.label.classList.remove('hide')
|
||||
if (!this.readonly)
|
||||
this.clearBtn.classList.add('hide')
|
||||
}
|
||||
|
||||
this.input.style.height = 'auto'
|
||||
@ -652,7 +675,6 @@ customElements.define('sm-textarea',
|
||||
this.label = this.shadowRoot.querySelector('.label')
|
||||
this.helperText = this.shadowRoot.querySelector('.helper-text')
|
||||
this.valueChanged = false;
|
||||
this.readonly = false
|
||||
this.animate = this.hasAttribute('animate')
|
||||
this.input = this.shadowRoot.querySelector('textarea')
|
||||
this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
|
||||
@ -668,7 +690,6 @@ customElements.define('sm-textarea',
|
||||
}
|
||||
if (this.hasAttribute('readonly')) {
|
||||
this.input.setAttribute('readonly', '')
|
||||
this.readonly = true
|
||||
}
|
||||
if (this.hasAttribute('helper-text')) {
|
||||
this.helperText.textContent = this.getAttribute('helper-text')
|
||||
@ -1844,12 +1865,12 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
return this.popupStack
|
||||
}
|
||||
hide = () => {
|
||||
this.removeAttribute('open')
|
||||
if(window.innerWidth < 640)
|
||||
this.popup.style.transform = 'translateY(100%)';
|
||||
else
|
||||
this.popup.style.transform = 'translateY(1rem)';
|
||||
this.popupContainer.classList.add('hide')
|
||||
this.removeAttribute('open')
|
||||
if (typeof this.popupStack !== 'undefined') {
|
||||
this.popupStack.pop()
|
||||
if (this.popupStack.items.length){
|
||||
|
||||
1
css/bg-art1.svg
Normal file
1
css/bg-art1.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#1b1464;}.b{fill:#09083f;}.c{fill:#29abe2;}</style></defs><title>bg-art1</title><polygon class="a" points="0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24"/><polygon class="b" points="495 959 594 959 485 867 434 899 495 959"/><polygon class="c" points="232 957 357 828 247 957 232 957"/><polygon class="c" points="1301 953 1447 807 1318.32 953 1301 953"/></svg>
|
||||
|
After Width: | Height: | Size: 602 B |
33
css/bg-art2.svg
Normal file
33
css/bg-art2.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<g filter="url(#filter0_d)">
|
||||
<rect x="312" y="323" width="240" height="140" rx="18" transform="rotate(30 312 323)" fill="#1C783B"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<rect x="431.283" y="302" width="240" height="140" rx="18" transform="rotate(50.0235 431.283 302)" fill="#2DBD5E"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="225" y="320" width="301.846" height="265.244" 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="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<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="307" y="299" width="285.477" height="297.86" 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="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<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.7 KiB |
33
css/bg-art3.svg
Normal file
33
css/bg-art3.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<g filter="url(#filter0_d)">
|
||||
<circle cx="1814.5" cy="977.5" r="437.5" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<circle cx="1814.5" cy="977.5" r="243.5" fill="#1B0980"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="1344" y="515" width="913" height="913" 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="-14" dy="-6"/>
|
||||
<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>
|
||||
<filter id="filter1_d" x="1538" y="709" width="525" height="525" 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="-14" dy="-6"/>
|
||||
<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="1920" height="1080" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
88
css/main.css
88
css/main.css
@ -16,6 +16,9 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
--hue: 255;
|
||||
--saturation: 61%;
|
||||
--lightness: 39%;
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
background-size: cover;
|
||||
@ -392,8 +395,10 @@ sm-popup .action h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
sm-popup h5:not(.tag) {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
@ -480,17 +485,16 @@ details p {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-right: none;
|
||||
z-index: 3;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -0.5rem 1rem #00000010;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
#navbar .navbar-item {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
opacity: 0.6;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -531,6 +535,7 @@ details p {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.user-panel .icon {
|
||||
@ -547,6 +552,7 @@ details p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.display-balance .balance {
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -555,10 +561,12 @@ details p {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.display-balance .balance h4 {
|
||||
margin-bottom: 3rem;
|
||||
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;
|
||||
}
|
||||
.display-balance .balance h5 {
|
||||
opacity: 0.8;
|
||||
@ -569,13 +577,14 @@ details p {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.display-balance .balance:nth-of-type(1) {
|
||||
background: rgba(var(--text-color), 0.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 {
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(2) {
|
||||
background: linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(2) .tooltip {
|
||||
@ -584,7 +593,8 @@ details p {
|
||||
.display-balance .balance:nth-of-type(3) {
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: linear-gradient(135deg, #2f69e6, #1b0980);
|
||||
background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
}
|
||||
.display-balance .balance:nth-of-type(3) .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #1b0980 inset;
|
||||
@ -1096,11 +1106,9 @@ sm-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.select:first-of-type:not(:last-of-type) {
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
@ -1110,6 +1118,13 @@ sm-panel {
|
||||
border-radius: 0 0 0.3rem 0.3rem;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.16);
|
||||
}
|
||||
.select label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
.select input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
@ -1136,22 +1151,26 @@ sm-panel {
|
||||
transform: scale(0);
|
||||
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;
|
||||
cursor: pointer;
|
||||
stroke-width: 10;
|
||||
}
|
||||
.select .tag {
|
||||
grid-area: tag;
|
||||
opacity: 0.6;
|
||||
font-weight: 500;
|
||||
margin-left: auto;
|
||||
border: solid 1px rgba(var(--text-color), 0.4);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.select h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.select .outer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.add-upi {
|
||||
margin-top: 0.4rem;
|
||||
@ -1159,6 +1178,9 @@ sm-panel {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#settings_page .remove {
|
||||
display: block;
|
||||
}
|
||||
#settings_page > h4 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1166,6 +1188,12 @@ sm-panel {
|
||||
#settings_page p {
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
#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 {
|
||||
@ -1217,14 +1245,14 @@ sm-panel {
|
||||
top: 0;
|
||||
right: auto;
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
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;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
#navbar .navbar-item .icon {
|
||||
height: 1.2rem;
|
||||
@ -1266,15 +1294,16 @@ sm-panel {
|
||||
#home_page .left {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#home_page .balance h4 {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
|
||||
gap: 2rem 0.8rem;
|
||||
}
|
||||
|
||||
.display-balance .balance {
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
#settings_page .copy-row {
|
||||
display: inline-grid;
|
||||
}
|
||||
@ -1301,6 +1330,7 @@ sm-panel {
|
||||
.user-panel {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#home_page, #deposit {
|
||||
@ -1308,6 +1338,10 @@ sm-panel {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 22rem;
|
||||
}
|
||||
|
||||
.activity {
|
||||
width: 60ch;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
body {
|
||||
@ -1355,4 +1389,12 @@ sm-panel {
|
||||
.navbar-item:hover {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.remove {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -16,6 +16,9 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #e8e8e8;
|
||||
--dark-shade: #dadada;
|
||||
--hue: 255;
|
||||
--saturation: 61%;
|
||||
--lightness: 39%;
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
background-size: cover;
|
||||
@ -410,8 +413,10 @@ sm-popup{
|
||||
}
|
||||
}
|
||||
h5:not(.tag){
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -504,17 +509,15 @@ details{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-right: none;
|
||||
z-index: 3;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
|
||||
box-shadow: 0 -0.5rem 1rem #00000010;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
.navbar-item {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
opacity: 0.6;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -557,6 +560,7 @@ details{
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
align-self: flex-start;
|
||||
.icon{
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
@ -572,6 +576,7 @@ details{
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
.balance{
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -579,10 +584,12 @@ details{
|
||||
padding: 1rem;
|
||||
justify-content: flex-end;
|
||||
h4{
|
||||
margin-bottom: 3rem;
|
||||
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;
|
||||
@ -593,13 +600,14 @@ details{
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: rgba(var(--text-color), 0.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: linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
@ -608,7 +616,8 @@ details{
|
||||
&:nth-of-type(3){
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: linear-gradient(135deg, #2f69e6, #1b0980);
|
||||
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;
|
||||
}
|
||||
@ -829,7 +838,6 @@ sm-panel{
|
||||
.page {
|
||||
padding: 1rem 1.5rem;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
.container-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -1161,11 +1169,9 @@ sm-panel{
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&:first-of-type:not(:last-of-type){
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
}
|
||||
@ -1174,6 +1180,13 @@ sm-panel{
|
||||
border-radius: 0 0 0.3rem 0.3rem;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.16);
|
||||
}
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
input[type="radio"]{
|
||||
display: none;
|
||||
}
|
||||
@ -1200,22 +1213,26 @@ sm-panel{
|
||||
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
}
|
||||
.remove{
|
||||
display: none;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
padding: 0.7rem;
|
||||
cursor: pointer;
|
||||
stroke-width: 10;
|
||||
}
|
||||
.tag{
|
||||
grid-area: tag;
|
||||
opacity: 0.6;
|
||||
font-weight: 500;
|
||||
margin-left: auto;
|
||||
border: solid 1px rgba(var(--text-color), 0.4);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
}
|
||||
.outer{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.add-upi{
|
||||
margin-top: 0.4rem;
|
||||
@ -1223,6 +1240,9 @@ sm-panel{
|
||||
width: max-content;
|
||||
}
|
||||
#settings_page{
|
||||
.remove{
|
||||
display: block;
|
||||
}
|
||||
& > h4{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1230,6 +1250,12 @@ sm-panel{
|
||||
p{
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
sm-button{
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.empty-state{
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page, #deposit{
|
||||
@ -1277,13 +1303,13 @@ sm-panel{
|
||||
top: 0;
|
||||
right: auto;
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
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;
|
||||
padding: 0.8rem;
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
@ -1324,16 +1350,16 @@ sm-panel{
|
||||
.left {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.balance{
|
||||
h4{
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.options-tab{
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
|
||||
gap: 2rem 0.8rem;
|
||||
}
|
||||
.display-balance{
|
||||
.balance{
|
||||
height: 9rem;
|
||||
}
|
||||
}
|
||||
#settings_page{
|
||||
.copy-row{
|
||||
display: inline-grid;
|
||||
@ -1365,12 +1391,16 @@ sm-panel{
|
||||
.user-panel{
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
#home_page, #deposit {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 22rem;
|
||||
}
|
||||
.activity{
|
||||
width: 60ch;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
@ -1425,4 +1455,10 @@ sm-panel{
|
||||
.navbar-item:hover{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.remove{
|
||||
opacity: 0.6;
|
||||
}
|
||||
.remove:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
96
index.html
96
index.html
@ -84,13 +84,13 @@
|
||||
<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">
|
||||
<title>rupee-symbol</title>
|
||||
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
|
||||
</svg>
|
||||
</sm-input>
|
||||
<sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="deposit_rupee">
|
||||
<header class="popup-header" slot="header">
|
||||
@ -144,7 +144,7 @@
|
||||
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
|
||||
</svg>
|
||||
</sm-input>
|
||||
<sm-input id="deposited_rupee_txid" placeholder="UPI Transaction ID" pattern="^[a-zA-z0-9]+"
|
||||
<sm-input id="deposited_rupee_txid" placeholder="UPI Transaction ID" pattern="^[a-zA-z0-9]+" minlength="12" maxlength="12"
|
||||
required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="withdraw_rupee">
|
||||
@ -210,13 +210,24 @@
|
||||
<p>
|
||||
Request Rupee from other's using FLO address.
|
||||
</p>
|
||||
<sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input>
|
||||
<details>
|
||||
<summary>
|
||||
How to request rupee?
|
||||
</summary>
|
||||
<h5>Step 1</h5>
|
||||
<p>Enter amount you want to request</p>
|
||||
<h5>Step 2</h5>
|
||||
<p>Enter the FLO ID of person you want to request rupee from.</p>
|
||||
<h5>Step 3</h5>
|
||||
<p>Press <strong>Request</strong> button</p>
|
||||
</details>
|
||||
<sm-input id="requested_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>
|
||||
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
|
||||
</svg>
|
||||
</sm-input>
|
||||
<sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="pay_anyone">
|
||||
<header class="popup-header" slot="header">
|
||||
@ -245,16 +256,15 @@
|
||||
</p>
|
||||
</details>
|
||||
<p id="pay_cashier_info"></p>
|
||||
<sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animate></sm-input>
|
||||
<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>
|
||||
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
|
||||
</svg>
|
||||
</sm-input>
|
||||
<sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animate></sm-input>
|
||||
<h5>Send from</h5>
|
||||
<div class="upi-container"></div>
|
||||
<div class="empty-state">Add an UPI address for completing the transaction.</div>
|
||||
<div class="upi-container"></div>
|
||||
<sm-button class="add-upi empty-state" variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
|
||||
</sm-popup>
|
||||
<sm-popup id="transaction_result">
|
||||
@ -796,11 +806,11 @@
|
||||
</section>
|
||||
<h4>My UPIs</h4>
|
||||
<div class="upi-container"></div>
|
||||
<div class="empty-state">Add UPI address for easier access during various transactions.</div>
|
||||
<p class="empty-state">Add UPI address for easier access during various transactions.</p>
|
||||
<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>
|
||||
<sm-button variant="primary" onclick="signOut()">Sign out</sm-button>
|
||||
</section>
|
||||
<section id="transaction_page" class="page">
|
||||
|
||||
@ -1330,7 +1340,9 @@
|
||||
}
|
||||
|
||||
document.addEventListener('popupopened', e => {
|
||||
let thisPopup = e.detail.popup
|
||||
let thisPopup = e.detail.popup,
|
||||
firstInput = thisPopup.querySelector('sm-input')
|
||||
firstInput.focusIn()
|
||||
switch(e.detail.popup.id){
|
||||
case 'deposit_rupee' :
|
||||
request_rupee_token()
|
||||
@ -1359,8 +1371,8 @@
|
||||
break;
|
||||
case 'cash_transfer' :
|
||||
payingRequested = false;
|
||||
tokenReceiver.disabled = false
|
||||
tokenAmount.disabled = false
|
||||
tokenReceiver.readOnly = false
|
||||
tokenAmount.readOnly = false
|
||||
break;
|
||||
case 'transaction_result' :
|
||||
setTimeout(() => {
|
||||
@ -1439,16 +1451,20 @@
|
||||
}
|
||||
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
let confirmation = function (message) {
|
||||
let confirmation = (message, cancelText = 'Cancel', confirmText = 'OK') => {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('confirmation');
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
let submitButton = popup.querySelector('.submit-btn')
|
||||
submitButton.textContent = confirmText
|
||||
submitButton.onclick = () => {
|
||||
popup.hide()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
let cancelButton = popup.querySelector('.cancel-btn')
|
||||
cancelButton.textContent = cancelText
|
||||
cancelButton.onclick = () => {
|
||||
popup.hide()
|
||||
resolve(false);
|
||||
}
|
||||
@ -1634,7 +1650,8 @@
|
||||
document.getElementById('report_btn').addEventListener('click', async (e) => {
|
||||
let customMsg = document.getElementById('complaint_field').value
|
||||
if (await confirmation(
|
||||
'It may take upto 12hrs to complete your request, are you sure to report this issue?'
|
||||
'It may take upto 12hrs to complete your request, are you sure to report this issue?',
|
||||
'Cancel', 'Report'
|
||||
)) {
|
||||
file_complaint(currentRequest.dataset.type, currentRequest.dataset.vectorClock,
|
||||
customMsg)
|
||||
@ -1663,14 +1680,13 @@
|
||||
}
|
||||
tokenReceiver.value = senderAddress;
|
||||
tokenAmount.value = amount;
|
||||
tokenReceiver.disabled = true
|
||||
tokenAmount.disabled = true
|
||||
tokenReceiver.readOnly = true
|
||||
tokenAmount.readOnly = true
|
||||
}
|
||||
if (e.target.closest('.decline-request')) {
|
||||
let parent = e.target.closest('.request'),
|
||||
paymentRequestId = parent.dataset.paymentRequestId;
|
||||
if (await confirmation(
|
||||
`Do want to decline this request?`)) {
|
||||
if (await confirmation(`Do want to decline this request?`, 'No', 'Decline')) {
|
||||
const all_reqs = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations
|
||||
.TYPE_REQUEST_PAYMENT, "0").reverse());
|
||||
|
||||
@ -1692,7 +1708,7 @@
|
||||
let complaint = e.target.closest('.complaint'),
|
||||
udc = complaint.dataset.udc,
|
||||
type = complaint.dataset.type;
|
||||
if (await confirmation('Mark this complaint as resolved?')) {
|
||||
if (await confirmation('Mark this complaint as resolved?', 'Cancel', 'Mark Resolved')) {
|
||||
mark_complaint_resolved(type, JSON.parse(udc))
|
||||
complaint.remove()
|
||||
}
|
||||
@ -1702,6 +1718,13 @@
|
||||
document.getElementById('settings_page').addEventListener('change', e => {
|
||||
setPrimaryUPI(e.target.value)
|
||||
})
|
||||
document.getElementById('settings_page').addEventListener('click', async e => {
|
||||
if(e.target.closest('.remove') && await confirmation('Do you want to remove this UPI address?', 'No', 'Remove UPI')){
|
||||
let upi = e.target.closest('.select').querySelector('input').value
|
||||
removeUPI(upi)
|
||||
notify('Removed UPI address')
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
@ -1769,6 +1792,12 @@
|
||||
renderUserUPI()
|
||||
defaultUPI = upiAddress
|
||||
}
|
||||
|
||||
function removeUPI(upi){
|
||||
compactIDB.removeData('userUPIs', upi)
|
||||
renderUserUPI()
|
||||
}
|
||||
|
||||
const UPIContainers = document.querySelectorAll('.upi-container')
|
||||
async function renderUserUPI(){
|
||||
let upis = await compactIDB.readAllData('userUPIs')
|
||||
@ -1778,19 +1807,26 @@
|
||||
for(upi in upis){
|
||||
let checked = upi === defaultUPI ? 'checked': ''
|
||||
radios += `
|
||||
<label class="select">
|
||||
<input type="radio" name="${randomGroup}" value="${upi}" ${checked}>
|
||||
<svg class="radio" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="outer-ring" cx="32" cy="32" r="30"/>
|
||||
<circle class="inner-disc" cx="32" cy="32" r="16"/>
|
||||
</svg>
|
||||
<span>${upi}</span>
|
||||
<div class="outer"></div>
|
||||
<div class="select">
|
||||
<label>
|
||||
<input type="radio" name="${randomGroup}" value="${upi}" ${checked}>
|
||||
<svg class="radio" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="outer-ring" cx="32" cy="32" r="30"/>
|
||||
<circle class="inner-disc" cx="32" cy="32" r="16"/>
|
||||
</svg>
|
||||
<span>${upi}</span>
|
||||
</label>
|
||||
`
|
||||
if(upi === defaultUPI)
|
||||
radios += `
|
||||
<h5 class="tag">Primary</h5>`
|
||||
radios += '</label>'
|
||||
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>`
|
||||
}
|
||||
container.innerHTML = radios
|
||||
})
|
||||
@ -1810,7 +1846,7 @@
|
||||
}
|
||||
|
||||
async function signOut() {
|
||||
if (await confirmation('Do you want to sign out?')) {
|
||||
if (await confirmation('Do you want to sign out?', 'Stay', 'Sign Out')) {
|
||||
document.querySelector('main').classList.add('hide-completely')
|
||||
document.getElementById('navbar').classList.add('hide-completely')
|
||||
document.getElementById('main_header').classList.add('hide-completely')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user