0.0.28
This commit is contained in:
sairaj mote
parent
146d1dbba6
commit
092cd14aaa
@ -281,6 +281,9 @@ input{
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
padding: 0.6em 1em;
|
||||
}
|
||||
.helper-text:empty{
|
||||
padding: 0;
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
.icon:hover{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
@ -288,19 +291,19 @@ input{
|
||||
}
|
||||
</style>
|
||||
<div class="outer-container">
|
||||
<label part="input" class="input">
|
||||
<slot name="icon"></slot>
|
||||
<div class="container">
|
||||
<input/>
|
||||
<div part="placeholder" class="label"></div>
|
||||
</div>
|
||||
<svg class="icon clear hide" viewBox="0 0 64 64">
|
||||
<title>clear</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||||
</svg>
|
||||
</label>
|
||||
<div class="helper-text hide"></div>
|
||||
<label part="input" class="input">
|
||||
<slot name="icon"></slot>
|
||||
<div class="container">
|
||||
<input/>
|
||||
<div part="placeholder" class="label"></div>
|
||||
</div>
|
||||
<svg class="icon clear hide" viewBox="0 0 64 64">
|
||||
<title>clear</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||||
</svg>
|
||||
</label>
|
||||
<div class="helper-text hide"></div>
|
||||
</div>
|
||||
`;
|
||||
customElements.define('sm-input',
|
||||
@ -402,6 +405,9 @@ customElements.define('sm-input',
|
||||
if (this.hasAttribute('required')) {
|
||||
this.input.setAttribute('required', '')
|
||||
}
|
||||
if (this.hasAttribute('pattern')) {
|
||||
this.input.setAttribute('pattern', this.getAttribute('pattern'))
|
||||
}
|
||||
if (this.hasAttribute('readonly')) {
|
||||
this.input.setAttribute('readonly', '')
|
||||
this.readonly = true
|
||||
@ -1675,7 +1681,7 @@ bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
place-items: center;
|
||||
background: #00000060;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
@ -1724,8 +1730,7 @@ pointer-events: none;
|
||||
align-self: center;
|
||||
border-radius: 0.4rem;
|
||||
height: auto;
|
||||
transform: translateY(0) scale(0.9);
|
||||
box-shadow: 0 2rem 2rem #00000040;
|
||||
box-shadow: 0 3rem 2rem -0.5rem #00000040;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
@ -1782,28 +1787,29 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.pinned = pinned
|
||||
this.popupStack = popupStack
|
||||
this.popupContainer.classList.remove('hide')
|
||||
if (window.innerWidth < 648)
|
||||
this.popup.style.transform = 'translateY(0)';
|
||||
else
|
||||
this.popup.style.transform = 'scale(1)';
|
||||
this.popup.style.transform = 'translateY(0)';
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
}
|
||||
hide() {
|
||||
this.removeAttribute('open')
|
||||
if (window.innerWidth < 648)
|
||||
if (window.innerWidth < 648) {
|
||||
this.popup.style.transform = 'translateY(100%)';
|
||||
else
|
||||
}
|
||||
else {
|
||||
this.popup.style.transform = 'scale(0.9)';
|
||||
setTimeout(() => {
|
||||
this.popup.style.transform = 'translateY(100%) scale(1)'
|
||||
}, 300)
|
||||
}
|
||||
this.popupContainer.classList.add('hide')
|
||||
if (typeof this.popupStack !== 'undefined') {
|
||||
this.popupStack.pop()
|
||||
if (this.popupStack.items.length === 0) {
|
||||
/*if (typeof this.popupStack !== 'undefined') {
|
||||
if (this.popupStack.items.length === 1) {
|
||||
this.resumeScrolling()
|
||||
}
|
||||
}
|
||||
else {
|
||||
else {*/
|
||||
this.resumeScrolling()
|
||||
}
|
||||
//}
|
||||
|
||||
if (this.inputFields.length) {
|
||||
setTimeout(() => {
|
||||
@ -1815,6 +1821,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
})
|
||||
}, 300);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
handleTouchStart(e) {
|
||||
@ -1882,7 +1889,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
})
|
||||
|
||||
this.popupBodySlot.addEventListener('slotchange', () => {
|
||||
this.inputFields = this.popupBodySlot.assignedElements().filter(element => element.tagName === 'SM-INPUT' || element.tagName === 'SM-CHECKBOX' || element.tagName === 'TEXTAREA' || element.type === 'radio')
|
||||
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
|
||||
})
|
||||
|
||||
this.popupHeader.addEventListener('touchstart', (e) => {
|
||||
@ -1945,24 +1952,25 @@ opacity: 0;
|
||||
transform: scale(1)
|
||||
}
|
||||
.previous-item{
|
||||
left: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
.next-item{
|
||||
right: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.left,.right{
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
.left{
|
||||
background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
|
||||
background: radial-gradient(closest-corner circle at -50%, rgba(var(--text-color), 0.3), transparent);
|
||||
}
|
||||
.right{
|
||||
right: 0;
|
||||
background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
|
||||
right: 0;
|
||||
background: radial-gradient(farthest-side circle at 150%, rgba(var(--text-color), 0.3), transparent);
|
||||
}
|
||||
.carousel-container{
|
||||
position: relative;
|
||||
|
||||
160
css/main.css
160
css/main.css
@ -328,53 +328,6 @@ textarea {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0.8em;
|
||||
margin-bottom: 1.5em;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border: 0.1em solid transparent;
|
||||
cursor: text;
|
||||
}
|
||||
.input:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.input:focus-within {
|
||||
border: 0.1em solid var(--accent-color);
|
||||
}
|
||||
.input .placeholder {
|
||||
opacity: 0.6;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
position: absolute;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left;
|
||||
pointer-events: none;
|
||||
will-change: contents;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.input input {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.animate-label input {
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
.animate-label .placeholder {
|
||||
transform: translateY(-60%) scale(0.7);
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
*:empty + .empty-state {
|
||||
display: grid;
|
||||
}
|
||||
@ -433,62 +386,6 @@ form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
place-items: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.popup-container .popup {
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.popup-container .popup h5 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.popup-container .popup button:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
.popup-container .popup .container-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.popup-container .popup .container-header h4 {
|
||||
flex: 1;
|
||||
}
|
||||
.popup-container .popup .container-header button {
|
||||
width: auto;
|
||||
}
|
||||
.popup-container .popup .container-header .icon {
|
||||
cursor: pointer;
|
||||
padding-right: 0.4rem;
|
||||
margin-right: 0.3rem;
|
||||
stroke-width: 8;
|
||||
}
|
||||
.popup-container .popup p {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#confirmation,
|
||||
#prompt {
|
||||
flex-direction: column;
|
||||
@ -502,10 +399,6 @@ form {
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#confirmation .input,
|
||||
#prompt .input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#confirmation .btns,
|
||||
#prompt .btns {
|
||||
display: flex;
|
||||
@ -526,6 +419,31 @@ form {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
sm-popup sm-input:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
sm-popup p {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.popup-header .icon {
|
||||
margin-right: 1rem;
|
||||
padding: 0.2rem;
|
||||
stroke-width: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
.popup-header button {
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#sign_in_popup h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@ -540,9 +458,6 @@ form {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
#sign_in_popup .input {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: var(--accent-color);
|
||||
@ -629,9 +544,9 @@ form {
|
||||
}
|
||||
#home_page .left {
|
||||
padding: 1.5rem 0;
|
||||
align-self: flex-start;
|
||||
width: auto;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
#home_page .left h3, #home_page .left h4, #home_page .left p {
|
||||
padding: 0 1.5rem;
|
||||
@ -650,7 +565,7 @@ form {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(135deg, var(--accent-color), #2F2B76);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.1rem 0.1rem #00000010, 0 1rem 1rem -1rem #00000010;
|
||||
@ -699,7 +614,6 @@ form {
|
||||
|
||||
.options-tab {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.5reem;
|
||||
}
|
||||
.options-tab .option {
|
||||
position: relative;
|
||||
@ -978,15 +892,16 @@ sm-panel {
|
||||
}
|
||||
}
|
||||
#main_loader {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
place-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
}
|
||||
#main_loader sm-button {
|
||||
margin-left: 0;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#main_loader svg {
|
||||
height: 2rem;
|
||||
@ -1022,7 +937,6 @@ sm-panel {
|
||||
gap: 1.5rem;
|
||||
grid-template-areas: "." "left";
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
#home_page .left, #deposit .left {
|
||||
grid-area: left;
|
||||
@ -1038,12 +952,8 @@ sm-panel {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.popup-container .popup {
|
||||
transform: translateY(0) scale(0.96);
|
||||
sm-popup::part(popup) {
|
||||
width: 24rem;
|
||||
align-self: center;
|
||||
border-radius: 0.4rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#confirmation {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
185
css/main.scss
185
css/main.scss
@ -347,60 +347,6 @@ textarea {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0.8em;
|
||||
margin-bottom: 1.5em;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border: 0.1em solid transparent;
|
||||
cursor: text;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border: 0.1em solid var(--accent-color);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
opacity: .6;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
position: absolute;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left;
|
||||
pointer-events: none;
|
||||
will-change: contents;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-label {
|
||||
input {
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
transform: translateY(-60%) scale(0.7);
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
*:empty + .empty-state {
|
||||
display: grid;
|
||||
}
|
||||
@ -461,70 +407,6 @@ form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
place-items: center;
|
||||
background: rgba($color: #000000, $alpha: 0.4);
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.popup {
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24);
|
||||
overflow-y: auto;
|
||||
|
||||
h5 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
button:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h4 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
padding-right: 0.4rem;
|
||||
margin-right: 0.3rem;
|
||||
stroke-width: 8;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#confirmation,
|
||||
#prompt {
|
||||
flex-direction: column;
|
||||
@ -538,10 +420,6 @@ form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
@ -562,6 +440,33 @@ form {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
sm-popup{
|
||||
sm-input:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p{
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header{
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.icon{
|
||||
margin-right: 1rem;
|
||||
padding: 0.2rem;
|
||||
stroke-width: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
button{
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#sign_in_popup {
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
@ -580,10 +485,6 @@ form {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
@ -673,9 +574,9 @@ form {
|
||||
padding: 1rem 0 4rem 0;
|
||||
.left {
|
||||
padding: 1.5rem 0;
|
||||
align-self: flex-start;
|
||||
width: auto;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.6rem;
|
||||
h3, h4, p {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
@ -696,7 +597,7 @@ form {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(135deg, var(--accent-color), #2F2B76);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.1rem 0.1rem #00000010, 0 1rem 1rem -1rem #00000010;
|
||||
@ -742,9 +643,8 @@ form {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
.options-tab {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.5reem;
|
||||
.option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -1062,15 +962,15 @@ sm-panel{
|
||||
|
||||
|
||||
#main_loader {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
place-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
sm-button {
|
||||
margin-left: 0;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
@ -1109,7 +1009,6 @@ sm-panel{
|
||||
gap: 1.5rem;
|
||||
grid-template-areas: '.''left';
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
.left {
|
||||
grid-area: left;
|
||||
}
|
||||
@ -1126,14 +1025,8 @@ sm-panel{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
.popup {
|
||||
transform: translateY(0) scale(0.96);
|
||||
width: 24rem;
|
||||
align-self: center;
|
||||
border-radius: 0.4rem;
|
||||
height: auto;
|
||||
}
|
||||
sm-popup::part(popup){
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
#confirmation {
|
||||
|
||||
572
index.html
572
index.html
@ -14,262 +14,194 @@
|
||||
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
||||
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
<div class="popup-container hide">
|
||||
<div id="confirmation" class="popup">
|
||||
<p id="confirm_message"></p>
|
||||
<div class="btns">
|
||||
<button class="hover cancel-btn">Cancel</button>
|
||||
<button class="hover submit-btn">OK</button>
|
||||
</div>
|
||||
<sm-popup id="confirmation">
|
||||
<p id="confirm_message"></p>
|
||||
<div class="btns">
|
||||
<button class="hover cancel-btn">Cancel</button>
|
||||
<button class="hover submit-btn">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="prompt" class="popup">
|
||||
<h4 id="prompt_message">Some input required</h4>
|
||||
<label class="input">
|
||||
<input id="prompt_field" type="text">
|
||||
</label>
|
||||
<div class="btns">
|
||||
<button class="hover cancel-btn">Cancel</button>
|
||||
<button class="hover submit-btn">Ok</button>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<sm-popup id="prompt">
|
||||
<h4 id="prompt_message">Some input required</h4>
|
||||
<sm-input id="prompt_field"></sm-input>
|
||||
<div class="btns">
|
||||
<button class="hover cancel-btn">Cancel</button>
|
||||
<button class="hover submit-btn">Ok</button>
|
||||
</div>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<sm-notifications id="show_message"></sm-notifications>
|
||||
<!-- Loading screen-->
|
||||
<div class="popup-container solid-background hide">
|
||||
<div id="main_loader" class="popup">
|
||||
<svg id="loader" viewBox="0 0 73 73">
|
||||
<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" />
|
||||
</svg>
|
||||
<h4 id="tip_container">Loading Blockchain UPI </h4>
|
||||
<sm-button onclick="signOut()">Reset</sm-button>
|
||||
</div>
|
||||
</div>
|
||||
<section id="main_loader" class="grid hide-completely">
|
||||
<svg id="loader" viewBox="0 0 73 73">
|
||||
<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" />
|
||||
</svg>
|
||||
<h4 id="tip_container">Loading Blockchain UPI </h4>
|
||||
<sm-button onclick="signOut()">Sign Out</sm-button>
|
||||
</section>
|
||||
<!-- Sign in popup-->
|
||||
<div class="popup-container solid-background hide">
|
||||
<div id="sign_in_popup" class="popup">
|
||||
<div class="container-header">
|
||||
<h3>Sign In</h3>
|
||||
</div>
|
||||
<h4 class="expand light-text">Welcome to RanchiMall Blockchain UPI.<br>Please enter your FLO private key to
|
||||
continue.</h4>
|
||||
<form class="expand" autocomplete="off" onsubmit="return false">
|
||||
<label class="input">
|
||||
<input id="get_priv_key_field" type="password" minlength="40" required>
|
||||
<div class="placeholder">Private Key</div>
|
||||
</label>
|
||||
<button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
<sm-popup id="sign_in_popup">
|
||||
<div class="container-header">
|
||||
<h3>Sign In</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="cash_transfer" class="popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
<h4 class="expand light-text">Welcome to RanchiMall Blockchain UPI.<br>Please enter your FLO private key to
|
||||
continue.</h4>
|
||||
<sm-input id="get_priv_key_field" placeholder="Private Key" type="password" required animate></sm-input>
|
||||
<button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
|
||||
Sign In
|
||||
</button>
|
||||
</sm-popup>
|
||||
<sm-popup id="cash_transfer">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Send Rupee</h4>
|
||||
<button id="send_tokens_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="expand primary-btn">
|
||||
Send
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
<h4>Send Rupee</h4>
|
||||
<button id="send_tokens_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="expand primary-btn">
|
||||
Send
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Send Rupees to any FLO address.<br>
|
||||
*Requires Rupee to be deposited first.
|
||||
</p>
|
||||
<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" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="deposit_rupee">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Deposit rupee</h4>
|
||||
<button id="request_tokens_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
Continue
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</header>
|
||||
<section id="deposit_amount_section">
|
||||
<p>
|
||||
Send Rupees to any FLO address.<br>
|
||||
*Requires Rupee to be deposited first.
|
||||
Deposit rupee through UPI to use as digital currency powered by FLO blockchain.
|
||||
</p>
|
||||
<form autocomplete="off" onsubmit="return false">
|
||||
<label class="input">
|
||||
<input floId id="token_receiver" type="text" required>
|
||||
<div class="placeholder">Reciever's FLO ID</div>
|
||||
</label>
|
||||
<label class="input">
|
||||
<input id="token_amount" inputmode="numeric" type="number" min="1" required>
|
||||
<div class="placeholder">Amount</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="deposit_rupee" class="popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
<sm-input id="token_amount_to_buy" placeholder="Amount" type="number" min="1" required animate></sm-input>
|
||||
</section>
|
||||
<section id="upi_txId_section" class="hide-completely top-padding">
|
||||
<p id="send_amount_to_deposit"></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">
|
||||
<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>
|
||||
<h4>Deposit rupee</h4>
|
||||
<button id="request_tokens_btn" class="action expand" type="submit" disabled>
|
||||
</div>
|
||||
<sm-input id="deposited_rupee_txid" placeholder="UPI Transaction ID" pattern="^[a-zA-z0-9]+" disabled required animate></sm-input>
|
||||
</section>
|
||||
</sm-popup>
|
||||
<sm-popup id="withdraw_rupee">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Withdraw rupee</h4>
|
||||
<button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
withdraw
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Withdraw or redeem your Rupee back to your specified UPI address.
|
||||
</p>
|
||||
<sm-input id="user_withdraw_upi" placeholder="Reciever's UPI address" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" required animate></sm-input>
|
||||
<sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="request_rupee">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Request rupee</h3>
|
||||
<button id="request_rupee_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
Continue
|
||||
request
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<form id="deposit_amount_section" autocomplete="off" onsubmit="return false">
|
||||
<p>
|
||||
Deposit rupee through UPI to use as digital currency powered by FLO blockchain.
|
||||
</p>
|
||||
<label class="input">
|
||||
<input id="token_amount_to_buy" inputmode="numeric" type="number" min="1" required>
|
||||
<div class="placeholder">Amount</div>
|
||||
</label>
|
||||
</form>
|
||||
<form id="upi_txId_section" class="hide-completely top-padding" autocomplete="off" onsubmit="return false">
|
||||
<p id="send_amount_to_deposit"></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">
|
||||
<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>
|
||||
<label class="input">
|
||||
<input id="deposited_rupee_txid" pattern="^[a-zA-z0-9]+" type="text" disabled required>
|
||||
<div class="placeholder">UPI Transaction Id</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="withdraw_rupee" class="popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</header>
|
||||
<p>
|
||||
Request Rupee from other's using FLO address.
|
||||
</p>
|
||||
<sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input>
|
||||
<sm-input id="requested_amount" placeholder="Amount" type="number" min="1" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<sm-popup id="pay_anyone">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Pay through cashier</h4>
|
||||
<button id="cnf_cash_payment" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
pay
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
<h4>Withdraw rupee</h4>
|
||||
<button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
withdraw
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
Withdraw or redeem your Rupee back to your specified UPI address.
|
||||
</p>
|
||||
<form autocomplete="off" onsubmit="return false">
|
||||
<label class="input">
|
||||
<input id="user_withdraw_upi" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" type="text" required>
|
||||
<div class="placeholder">Reciever's UPI address</div>
|
||||
</label>
|
||||
<label class="input">
|
||||
<input id="withdraw_cash_amount" type="number" min="1" inputmode="numeric" required>
|
||||
<div class="placeholder">amount</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="request_rupee" class="popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Request rupee</h3>
|
||||
<button id="request_rupee_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
request
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
Request Rupee from other's using FLO address.
|
||||
</p>
|
||||
<form autocomplete="off" onsubmit="return false">
|
||||
<label class="input">
|
||||
<input floId id="requested_address" minlength="20" type="text" required>
|
||||
<div class="placeholder">Request from</div>
|
||||
</label>
|
||||
<label class="input">
|
||||
<input id="requested_amount" type="number" min="1" inputmode="numeric" required>
|
||||
<div class="placeholder">amount</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-container hide">
|
||||
<div id="pay_anyone" class="popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Pay through cashier</h4>
|
||||
<button id="cnf_cash_payment" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
pay
|
||||
</h4>
|
||||
<svg viewBox="0 0 73 73" class="loader">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be
|
||||
sent as Rupee.
|
||||
</p>
|
||||
<p id="pay_cashier_info"></p>
|
||||
<form autocomplete="off" onsubmit="return false">
|
||||
<label class="input">
|
||||
<input floId id="recvr_id" type="text" required>
|
||||
<div class="placeholder">Reciever's FLO ID</div>
|
||||
</label>
|
||||
<label class="input">
|
||||
<input id="recvr_amount_to_pay" type="number" min="1" inputmode="numeric" required>
|
||||
<div class="placeholder">Amount</div>
|
||||
</label>
|
||||
<label class="input">
|
||||
<input id="paid_cashier_upi" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" type="text" required>
|
||||
<div class="placeholder">Sender's UPI address</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be
|
||||
sent as Rupee.
|
||||
</p>
|
||||
<p id="pay_cashier_info"></p>
|
||||
<sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animaate></sm-input>
|
||||
<sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" required animate></sm-input>
|
||||
<sm-input id="paid_cashier_upi" placeholder="Sender's UPI address" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" required animate></sm-input>
|
||||
</sm-popup>
|
||||
<!-- Report popup-->
|
||||
<div class="popup-container hide">
|
||||
<div class="popup" id="report_popup">
|
||||
<div class="container-header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Report</h4>
|
||||
<button id="report_btn" class="primary-btn">report</button>
|
||||
</div>
|
||||
<textarea name="complaint" placeholder="Please describe issue in detail." id="complaint_field"
|
||||
rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<sm-popup id="report_popup">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="hidePopup()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Report</h4>
|
||||
<button id="report_btn" class="primary-btn">report</button>
|
||||
</header>
|
||||
<textarea name="complaint" placeholder="Please describe issue in detail." id="complaint_field"
|
||||
rows="10"></textarea>
|
||||
</sm-popup>
|
||||
|
||||
<header id="main_header" class="flex hide-completely">
|
||||
<svg viewBox="0 0 180 105.7" class="hide-completely">
|
||||
@ -395,7 +327,7 @@
|
||||
<h4>pay through cashier</h4>
|
||||
</a>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</sm-carousel>
|
||||
</div>
|
||||
<div class="user-panel">
|
||||
<h5 class="light-text">My FLO ID</h5>
|
||||
@ -767,14 +699,14 @@
|
||||
<script id="onLoadStartUp">
|
||||
const userFloIdContainers = document.querySelectorAll('.user-flo-id')
|
||||
function onLoadStartUp() {
|
||||
showPopup('main_loader', 'no')
|
||||
showLoader()
|
||||
console.log("Starting the app! Please Wait!")
|
||||
floDapps.launchStartUp().then(async result => {
|
||||
console.log(`Welcome ${myFloID}`)
|
||||
await token_app.actions.doShreeGanesh();
|
||||
userFloIdContainers.forEach(container => container.textContent = myFloID)
|
||||
refresh_balance()
|
||||
hidePopup()
|
||||
hideLoader()
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
</script>
|
||||
@ -1251,65 +1183,44 @@
|
||||
zIndex = 10;
|
||||
|
||||
function showPopup(popup, permission) {
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
let thisPopup = document.getElementById(popup);
|
||||
thisPopup.parentNode.classList.remove('hide');
|
||||
thisPopup.classList.add('no-transformations');
|
||||
popupStack.push({
|
||||
popup,
|
||||
permission
|
||||
})
|
||||
zIndex++;
|
||||
thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
|
||||
document.getElementById('main_page')
|
||||
setTimeout(() => {
|
||||
thisPopup.querySelectorAll('.input').forEach(input => {
|
||||
animateInput(input)
|
||||
formValidation(input.firstElementChild)
|
||||
})
|
||||
}, 100);
|
||||
if (popup === 'main_loader') {
|
||||
loader.classList.add('animate-loader')
|
||||
document.querySelector('main').classList.add('hide-completely')
|
||||
document.querySelector('#main_header').classList.add('hide-completely')
|
||||
document.querySelector('#navbar').classList.add('hide-completely')
|
||||
}
|
||||
zIndex++
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
thisPopup.show(permission, popupStack)
|
||||
return thisPopup;
|
||||
}
|
||||
|
||||
// hides the popup or modal
|
||||
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)
|
||||
return;
|
||||
let {
|
||||
popup,
|
||||
permission
|
||||
permission, popup
|
||||
} = popupStack.pop();
|
||||
thisPopup = document.getElementById(popup);
|
||||
thisPopup.closest('.popup-container').classList.add('hide');
|
||||
thisPopup.closest('.popup').classList.remove('no-transformations');
|
||||
let thisPopup = document.getElementById(popup),
|
||||
submitButton = thisPopup.querySelector('button[type="submit"]')
|
||||
if(submitButton)
|
||||
submitButton.disabled = true;
|
||||
thisPopup.hide()
|
||||
zIndex--
|
||||
setTimeout(() => {
|
||||
clearAllInputs(thisPopup)
|
||||
zIndex--;
|
||||
thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
|
||||
if (thisPopup.querySelector('.action')) {
|
||||
btnLoading(thisPopup.querySelector('.action'), 'stop')
|
||||
thisPopup.querySelector("button[type='submit']").disabled = true;
|
||||
}
|
||||
}, 400)
|
||||
if (popup === 'main_loader' || popup === 'sign_in_popup') {
|
||||
if (popup === 'sign_in_popup') {
|
||||
loader.classList.remove('animate-loader')
|
||||
document.querySelector('main').classList.remove('hide-completely')
|
||||
document.querySelector('#navbar').classList.remove('hide-completely')
|
||||
document.querySelector('#main_header').classList.remove('hide-completely')
|
||||
}
|
||||
if (popup === 'prompt') {
|
||||
if (thisPopup.querySelector('input').value == '')
|
||||
if (thisPopup.querySelector('sm-input').value == '')
|
||||
thisPopup.querySelector('.cancel-btn').click()
|
||||
}
|
||||
if (popup === 'cash_transfer') {
|
||||
@ -1326,13 +1237,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('mousedown', e => {
|
||||
if (e.target.classList.contains('popup-container') && popupStack.peek() !== undefined && popupStack
|
||||
.peek().permission !== 'no') {
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
|
||||
function btnLoading(btn, option) {
|
||||
if (typeof btn === 'string')
|
||||
btn = document.getElementById(btn);
|
||||
@ -1345,6 +1249,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
const loaderPage = document.getElementById('main_loader')
|
||||
function showLoader(){
|
||||
loaderPage.classList.remove('hide-completely')
|
||||
loader.classList.add('animate-loader')
|
||||
document.querySelector('main').classList.add('hide-completely')
|
||||
document.querySelector('#navbar').classList.add('hide-completely')
|
||||
document.querySelector('#main_header').classList.add('hide-completely')
|
||||
}
|
||||
function hideLoader(){
|
||||
loaderPage.classList.add('hide-completely')
|
||||
loader.classList.remove('animate-loader')
|
||||
document.querySelector('main').classList.remove('hide-completely')
|
||||
document.querySelector('#navbar').classList.remove('hide-completely')
|
||||
document.querySelector('#main_header').classList.remove('hide-completely')
|
||||
}
|
||||
|
||||
|
||||
function setAttributes(el, attrs) {
|
||||
for (var key in attrs) {
|
||||
@ -1353,12 +1273,6 @@
|
||||
}
|
||||
|
||||
function clearAllInputs(parent) {
|
||||
parent.querySelectorAll("input").forEach((field) => {
|
||||
field.value = '';
|
||||
if (field.closest('.input')) {
|
||||
field.closest('.input').classList.remove('animate-label')
|
||||
}
|
||||
})
|
||||
if (parent.querySelectorAll("textarea"))
|
||||
parent.querySelectorAll("textarea").forEach((field) => {
|
||||
field.value = '';
|
||||
@ -1389,11 +1303,11 @@
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
popup.hide()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
popup.hide()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
@ -1403,7 +1317,7 @@
|
||||
let askPrompt = function (message, defaultVal) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('prompt'),
|
||||
input = popup.querySelector('input');
|
||||
input = popup.querySelector('sm-input');
|
||||
if (defaultVal)
|
||||
input.value = defaultVal;
|
||||
showPopup('prompt')
|
||||
@ -1411,15 +1325,16 @@
|
||||
input.addEventListener('keyup', e => {
|
||||
if (e.key === 'Enter') {
|
||||
resolve(input.value);
|
||||
hidePopup()
|
||||
popup.hide()
|
||||
}
|
||||
})
|
||||
popup.querySelector('#prompt_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
popup.hide()
|
||||
resolve(input.value);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
popup.hide()
|
||||
resolve(null);
|
||||
}
|
||||
})
|
||||
@ -1458,25 +1373,13 @@
|
||||
notify('Copied', 'success')
|
||||
}
|
||||
|
||||
// prevents non numerical input on firefox
|
||||
function preventNonNumericalInput(e) {
|
||||
e = e || window.event;
|
||||
let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which,
|
||||
charStr = String.fromCharCode(charCode);
|
||||
|
||||
if (!charStr.match(/[+-]?([0-9]*[.])?[0-9]+/))
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function areInputsEmpty(parent) {
|
||||
let allInputs = parent.querySelectorAll(".input input:not(:disabled)");
|
||||
return [...allInputs].every(input => input.checkValidity())
|
||||
let allInputs = parent.querySelectorAll("sm-input:not([disabled])");
|
||||
return [...allInputs].every(input => input.isValid)
|
||||
}
|
||||
|
||||
function formValidation(formElement, e) {
|
||||
if (formElement.getAttribute('type') === 'number' && typeof e !== 'undefined')
|
||||
preventNonNumericalInput(e);
|
||||
let parent = formElement.closest('.popup'),
|
||||
function formValidation(formElement) {
|
||||
let parent = formElement.closest('sm-popup'),
|
||||
submitBtn = parent.querySelector("button[type='submit']");
|
||||
if (!submitBtn) return;
|
||||
if (formElement.hasAttribute('floId')) {
|
||||
@ -1484,6 +1387,7 @@
|
||||
submitBtn.disabled = false;
|
||||
} else {
|
||||
submitBtn.disabled = true;
|
||||
return
|
||||
}
|
||||
}
|
||||
if (areInputsEmpty(parent))
|
||||
@ -1492,44 +1396,24 @@
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
|
||||
function animateInput(parent) {
|
||||
if (parent.firstElementChild.value !== '')
|
||||
parent.classList.add('animate-label')
|
||||
else
|
||||
parent.classList.remove('animate-label')
|
||||
}
|
||||
|
||||
let allForms = document.querySelectorAll('form'),
|
||||
payingRequested = false,
|
||||
currentPaymentRequest;
|
||||
const tokenReceiver = document.getElementById('token_receiver'),
|
||||
tokenAmount = document.getElementById('token_amount')
|
||||
window.addEventListener('load', () => {
|
||||
allForms.forEach((form) => {
|
||||
form.addEventListener('input', (e) => {
|
||||
if (e.target.closest('.input')) {
|
||||
let parent = e.target.closest('.input');
|
||||
animateInput(parent)
|
||||
formValidation(parent.firstElementChild, e)
|
||||
}
|
||||
})
|
||||
form.addEventListener('keyup', (e) => {
|
||||
if (e.target.closest('.input')) {
|
||||
if (e.key === 'Enter') {
|
||||
e.target.closest('.popup').querySelector("button[type='submit']")
|
||||
.click();
|
||||
}
|
||||
}
|
||||
})
|
||||
document.addEventListener('input', e => {
|
||||
if (e.target.closest('sm-input')) {
|
||||
formValidation(e.target.closest('sm-input'))
|
||||
}
|
||||
})
|
||||
allForms.forEach((form) => {
|
||||
form.addEventListener('blur', (e) => {
|
||||
if (e.target.closest('.input')) {
|
||||
let parent = e.target.closest('.input');
|
||||
if (parent.firstElementChild.value === '')
|
||||
parent.classList.remove('animate-label')
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.target.closest('sm-input')) {
|
||||
if (e.key === 'Enter') {
|
||||
e.target.closest('sm-popup').querySelector("button[type='submit']")
|
||||
.click();
|
||||
}
|
||||
}, true)
|
||||
}
|
||||
})
|
||||
|
||||
// Function for confirming deposit requests
|
||||
@ -1673,7 +1557,7 @@
|
||||
|
||||
function signIn() {
|
||||
return new Promise((resolve, reject) => {
|
||||
hidePopup()
|
||||
hideLoader()
|
||||
showPopup('sign_in_popup', 'no')
|
||||
let signInBtn = document.getElementById('sign_in_btn'),
|
||||
privateKeyInput = document.getElementById('get_priv_key_field')
|
||||
@ -10699,7 +10583,7 @@
|
||||
else {
|
||||
resolve(inputVal)
|
||||
hidePopup()
|
||||
showPopup('main_loader', 'no')
|
||||
showLoader()
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -11307,7 +11191,7 @@
|
||||
showPage(document.getElementById('home_page_btn'), 'home_page')
|
||||
}
|
||||
|
||||
hidePopup()
|
||||
//Hide loader
|
||||
|
||||
pay_through_cashier();
|
||||
},
|
||||
@ -11662,14 +11546,12 @@
|
||||
if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) {
|
||||
err_msg = `Invalid receiver FLO address.`;
|
||||
notify(err_msg, 'error');
|
||||
hidePopup();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof sender_token_balance !== "object") {
|
||||
err_msg = `Failed to load Sender balance.`;
|
||||
notify(err_msg, 'error');
|
||||
hidePopup()
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -11713,7 +11595,8 @@
|
||||
|
||||
async function refresh_balance(refreshButton) {
|
||||
try {
|
||||
refreshButton.textContent = 'Checking...'
|
||||
if (refreshButton)
|
||||
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(
|
||||
@ -11742,6 +11625,9 @@
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
if (refreshButton)
|
||||
refreshButton.textContent = 'Check Balance'
|
||||
notify('unable load balance')
|
||||
throw new Error(error);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user