0.0.32
This commit is contained in:
sairaj mote
parent
983429d169
commit
d1405ccc10
233
components.js
233
components.js
@ -442,6 +442,7 @@ customElements.define('sm-input',
|
||||
if (oldValue !== newValue) {
|
||||
if (name === 'placeholder')
|
||||
this.shadowRoot.querySelector('.label').textContent = newValue;
|
||||
this.setAttribute('aria-label', newValue);
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1673,6 +1674,7 @@ smPopup.innerHTML = `
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
position: fixed;
|
||||
display: grid;
|
||||
}
|
||||
.popup-container{
|
||||
@ -1684,8 +1686,8 @@ smPopup.innerHTML = `
|
||||
right: 0;
|
||||
place-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
:host(.stacked) .popup{
|
||||
transform: scale(0.9) translateY(-2rem) !important;
|
||||
@ -1944,41 +1946,41 @@ const smCarousel = document.createElement('template')
|
||||
smCarousel.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
fill: none;
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
border-radius: 3rem;
|
||||
padding: 0.9rem;
|
||||
stroke: rgba(var(--foreground-color), 0.8);
|
||||
stroke-width: 14;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
background: rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0.2rem 0.2rem #00000020,
|
||||
0 0.5rem 1rem #00000040;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: scale(0);
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
fill: none;
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
border-radius: 3rem;
|
||||
padding: 0.9rem;
|
||||
stroke: rgba(var(--foreground-color), 0.8);
|
||||
stroke-width: 14;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
background: rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0.2rem 0.2rem #00000020,
|
||||
0 0.5rem 1rem #00000040;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: scale(0);
|
||||
z-index: 1;
|
||||
}
|
||||
.hide{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.expand{
|
||||
transform: scale(1)
|
||||
transform: scale(1)
|
||||
}
|
||||
.previous-item{
|
||||
left: 1rem;
|
||||
@ -1986,41 +1988,46 @@ transform: scale(1)
|
||||
.next-item{
|
||||
right: 1rem;
|
||||
}
|
||||
.left,.right{
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
.left{
|
||||
background: radial-gradient(closest-corner circle at -50%, rgba(var(--text-color), 0.3), transparent);
|
||||
}
|
||||
.right{
|
||||
right: 0;
|
||||
background: radial-gradient(farthest-side circle at 150%, rgba(var(--text-color), 0.3), transparent);
|
||||
}
|
||||
.carousel-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.carousel{
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
overflow: auto hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: auto hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.indicators{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
.dot{
|
||||
position: relative;
|
||||
padding: 0.2rem;
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.dot.active{
|
||||
transform: scale(1.5);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
slot::slotted(*){
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host([align-items="start"]) slot::slotted(*){
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
:host([align-items="center"]) slot::slotted(*){
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host([align-items="end"]) slot::slotted(*){
|
||||
scroll-snap-align: end;
|
||||
@ -2054,19 +2061,18 @@ scroll-snap-align: end;
|
||||
}
|
||||
</style>
|
||||
<div class="carousel-container">
|
||||
<div class="left"></div>
|
||||
<svg class="icon previous-item" viewBox="4 0 64 64">
|
||||
<title>Previous</title>
|
||||
<polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
|
||||
</svg>
|
||||
<div part="carousel" class="carousel">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<svg class="icon next-item" viewBox="-6 0 64 64">
|
||||
<title>Next</title>
|
||||
<polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
|
||||
</svg>
|
||||
<div class="right"></div>
|
||||
<svg class="icon previous-item" viewBox="4 0 64 64">
|
||||
<title>Previous</title>
|
||||
<polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
|
||||
</svg>
|
||||
<div part="carousel" class="carousel">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<svg class="icon next-item" viewBox="-6 0 64 64">
|
||||
<title>Next</title>
|
||||
<polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
|
||||
</svg>
|
||||
<div class="indicators"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2076,6 +2082,10 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['indicator']
|
||||
}
|
||||
|
||||
scrollLeft = () => {
|
||||
this.carousel.scrollBy({
|
||||
top: 0,
|
||||
@ -2098,32 +2108,50 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
this.carouselSlot = this.shadowRoot.querySelector('slot')
|
||||
this.nextArrow = this.shadowRoot.querySelector('.next-item')
|
||||
this.previousArrow = this.shadowRoot.querySelector('.previous-item')
|
||||
this.nextGradient = this.shadowRoot.querySelector('.right')
|
||||
this.previousGradient = this.shadowRoot.querySelector('.left')
|
||||
this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
|
||||
this.carouselItems
|
||||
this.indicators
|
||||
this.showIndicator = false
|
||||
this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
|
||||
const firstElementObserver = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting) {
|
||||
this.previousArrow.classList.remove('expand')
|
||||
this.previousGradient.classList.add('hide')
|
||||
}
|
||||
else {
|
||||
this.previousArrow.classList.add('expand')
|
||||
this.previousGradient.classList.remove('hide')
|
||||
}
|
||||
}, {
|
||||
root: this.carouselContainer,
|
||||
threshold: 0.9
|
||||
})
|
||||
const lastElementObserver = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting) {
|
||||
this.nextArrow.classList.remove('expand')
|
||||
this.nextGradient.classList.add('hide')
|
||||
}
|
||||
else {
|
||||
this.nextArrow.classList.add('expand')
|
||||
this.nextGradient.classList.remove('hide')
|
||||
}
|
||||
let frag = document.createDocumentFragment();
|
||||
if (this.hasAttribute('indicator'))
|
||||
this.showIndicator = true
|
||||
|
||||
|
||||
let firstVisible = false,
|
||||
lastVisible = false
|
||||
const allElementsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if(this.showIndicator)
|
||||
if (entry.isIntersecting) {
|
||||
this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
|
||||
}
|
||||
else
|
||||
this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
|
||||
if (!entry.target.previousElementSibling)
|
||||
if(entry.isIntersecting) {
|
||||
this.previousArrow.classList.remove('expand')
|
||||
firstVisible = true
|
||||
}
|
||||
else {
|
||||
this.previousArrow.classList.add('expand')
|
||||
firstVisible = false
|
||||
}
|
||||
if (!entry.target.nextElementSibling)
|
||||
if(entry.isIntersecting) {
|
||||
this.nextArrow.classList.remove('expand')
|
||||
lastVisible = true
|
||||
}
|
||||
else {
|
||||
this.nextArrow.classList.add('expand')
|
||||
|
||||
lastVisible = false
|
||||
}
|
||||
if (firstVisible && lastVisible)
|
||||
this.indicatorsContainer.classList.add('hide')
|
||||
else
|
||||
this.indicatorsContainer.classList.remove('hide')
|
||||
})
|
||||
}, {
|
||||
root: this.carouselContainer,
|
||||
threshold: 0.9
|
||||
@ -2139,8 +2167,18 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
|
||||
this.carouselSlot.addEventListener('slotchange', e => {
|
||||
this.carouselItems = this.carouselSlot.assignedElements()
|
||||
firstElementObserver.observe(this.carouselItems[0])
|
||||
lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
|
||||
this.carouselItems.forEach(item => allElementsObserver.observe(item))
|
||||
if(this.showIndicator){
|
||||
this.indicatorsContainer.innerHTML = ``
|
||||
this.carouselItems.forEach((item, index) => {
|
||||
let dot = document.createElement('div')
|
||||
dot.classList.add('dot')
|
||||
frag.append(dot)
|
||||
item.setAttribute('rank', index)
|
||||
})
|
||||
this.indicatorsContainer.append(frag)
|
||||
this.indicators = this.indicatorsContainer.children
|
||||
}
|
||||
})
|
||||
|
||||
this.addEventListener('keyup', e => {
|
||||
@ -2154,6 +2192,15 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
this.previousArrow.addEventListener('click', this.scrollLeft)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === 'indicator') {
|
||||
if (this.hasAttribute('indicator'))
|
||||
this.showIndicator = true
|
||||
else
|
||||
this.showIndicator = false
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.nextArrow.removeEventListener('click', this.scrollRight)
|
||||
this.previousArrow.removeEventListener('click', this.scrollLeft)
|
||||
|
||||
24
css/main.css
24
css/main.css
@ -568,7 +568,6 @@ details p {
|
||||
#home_page .left {
|
||||
padding: 1.5rem 0;
|
||||
width: auto;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
#home_page .left h3, #home_page .left h4, #home_page .left p {
|
||||
@ -578,9 +577,6 @@ details p {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#home_page sm-carousel::part(carousel) {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#home_page .user-panel {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
@ -638,6 +634,12 @@ details p {
|
||||
.options-tab {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.options-tab > .grid {
|
||||
min-width: 100vw;
|
||||
padding: 0 1.5rem;
|
||||
grid-auto-flow: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.options-tab .option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -645,12 +647,12 @@ details p {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 0.4rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 5rem;
|
||||
min-width: 5rem;
|
||||
text-transform: capitalize;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.options-tab .option .icon {
|
||||
@ -1007,6 +1009,7 @@ sm-panel {
|
||||
}
|
||||
#home_page .left, #deposit .left {
|
||||
grid-area: left;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
sm-select {
|
||||
@ -1077,6 +1080,17 @@ sm-panel {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 24rem;
|
||||
}
|
||||
|
||||
.options-tab > .grid {
|
||||
gap: 1rem;
|
||||
min-width: auto;
|
||||
}
|
||||
.options-tab .grid:first-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.options-tab .grid:last-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 800px) {
|
||||
.complaint {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -598,7 +598,6 @@ details{
|
||||
.left {
|
||||
padding: 1.5rem 0;
|
||||
width: auto;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.6rem;
|
||||
h3, h4, p {
|
||||
padding: 0 1.5rem;
|
||||
@ -608,10 +607,6 @@ details{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
sm-carousel::part(carousel) {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.user-panel{
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
@ -668,6 +663,12 @@ details{
|
||||
|
||||
.options-tab {
|
||||
margin: 1rem 0;
|
||||
& > .grid{
|
||||
min-width: 100vw;
|
||||
padding: 0 1.5rem;
|
||||
grid-auto-flow: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -675,12 +676,12 @@ details{
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 0.4rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 5rem;
|
||||
min-width: 5rem;
|
||||
text-transform: capitalize;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
height: 3rem;
|
||||
@ -1082,6 +1083,7 @@ sm-panel{
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
.left {
|
||||
grid-area: left;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1156,6 +1158,18 @@ sm-panel{
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 24rem;
|
||||
}
|
||||
.options-tab{
|
||||
& > .grid{
|
||||
gap: 1rem;
|
||||
min-width: auto;
|
||||
}
|
||||
.grid:first-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.grid:last-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
|
||||
103
index.html
103
index.html
@ -363,55 +363,59 @@
|
||||
<section class="page hide-completely" id="home_page">
|
||||
<div class="left">
|
||||
<h4>Rupee actions</h4>
|
||||
<sm-carousel class="options-tab">
|
||||
<div class="option" onclick="showPopup('cash_transfer')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Send</h4>
|
||||
<sm-carousel class="options-tab" indicator>
|
||||
<div class="grid">
|
||||
<div class="option" onclick="showPopup('cash_transfer')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Send</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('deposit_rupee')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>deposit</title>
|
||||
<path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
|
||||
</svg>
|
||||
<h4>deposit</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('withdraw_rupee')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>withdraw</title>
|
||||
<path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
|
||||
</svg>
|
||||
<h4>Withdraw</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('request_rupee')">
|
||||
<svg class="icon request-icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Request</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('deposit_rupee')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>deposit</title>
|
||||
<path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
|
||||
</svg>
|
||||
<h4>deposit</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('withdraw_rupee')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>withdraw</title>
|
||||
<path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
|
||||
<line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
|
||||
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
|
||||
<path
|
||||
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
|
||||
<path
|
||||
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
|
||||
<polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
|
||||
</svg>
|
||||
<h4>Withdraw</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('request_rupee')">
|
||||
<svg class="icon request-icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Request</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('pay_anyone')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
|
||||
<rect height="64" width="64" rx="8"></rect>
|
||||
</svg>
|
||||
<h4>pay through cashier</h4>
|
||||
</a>
|
||||
<div class="grid">
|
||||
<div class="option" onclick="showPopup('pay_anyone')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
|
||||
<rect height="64" width="64" rx="8"></rect>
|
||||
</svg>
|
||||
<h4>pay through cashier</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</div>
|
||||
@ -1269,7 +1273,6 @@
|
||||
zIndex = 10;
|
||||
|
||||
function showPopup(popup, permission) {
|
||||
console.log(popupStack)
|
||||
let thisPopup = document.getElementById(popup);
|
||||
zIndex++
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
@ -12123,7 +12126,7 @@
|
||||
}
|
||||
|
||||
const user_withdraw_upi = document.getElementById('user_withdraw_upi');
|
||||
user_withdraw_upi.value = get_user_payment_details();
|
||||
//user_withdraw_upi.value = get_user_payment_details();
|
||||
|
||||
} catch (error) {
|
||||
throw new Error(error)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user