0.2.0
feat (user) : add on boarding experience for desktop UI
This commit is contained in:
sairaj mote
parent
f7f4398d3c
commit
a4ad1bc9c6
@ -20,7 +20,7 @@ smButton.innerHTML = `
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
:host([variant='primary']) .button{
|
||||
background: hsl(var(--hue), var(--saturation), var(--lightness));
|
||||
background: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
:host([variant='outlined']) .button{
|
||||
@ -91,9 +91,6 @@ span.ripple {
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
:host([variant="primary"]:not([disabled])) .button:hover{
|
||||
background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
|
||||
}
|
||||
}
|
||||
@media (hover: none){
|
||||
:host(:not([disabled])) .button:active{
|
||||
@ -146,33 +143,6 @@ customElements.define('sm-button',
|
||||
}))
|
||||
}
|
||||
}
|
||||
createRipple(event){
|
||||
const target = this.shadowRoot.querySelector('.button')
|
||||
const ripple = target.querySelector('.ripple');
|
||||
const circle = document.createElement("span");
|
||||
const diameter = Math.max(target.clientWidth, target.clientHeight);
|
||||
const radius = diameter / 2;
|
||||
circle.style.width = circle.style.height = `${diameter}px`;
|
||||
circle.style.left = `${event.clientX - (target.offsetLeft + radius)}px`;
|
||||
circle.style.top = `${event.clientY - (target.offsetTop + radius)}px`;
|
||||
circle.classList.add("ripple");
|
||||
const rippleAnimation = circle.animate([
|
||||
|
||||
{
|
||||
transform: 'scale(4)',
|
||||
opacity: 0
|
||||
}
|
||||
],
|
||||
{
|
||||
duration: 400,
|
||||
fill: "forwards",
|
||||
easing: 'ease-in'
|
||||
})
|
||||
target.append(circle);
|
||||
rippleAnimation.onfinish = () => {
|
||||
circle.remove()
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.isDisabled = false
|
||||
@ -180,7 +150,6 @@ customElements.define('sm-button',
|
||||
if (this.hasAttribute('disabled') && !this.isDisabled)
|
||||
this.isDisabled = true
|
||||
this.addEventListener('click', (e) => {
|
||||
this.createRipple(e)
|
||||
this.dispatch()
|
||||
})
|
||||
this.addEventListener('keyup', (e) => {
|
||||
|
||||
80
css/main.css
80
css/main.css
@ -201,6 +201,7 @@ span.ripple {
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
sm-button[variant=outlined] {
|
||||
@ -218,6 +219,7 @@ sm-button[variant=outlined] {
|
||||
stroke-dasharray: 230;
|
||||
padding: 2px;
|
||||
justify-self: center;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
@ -241,6 +243,54 @@ sm-button[variant=outlined] {
|
||||
stroke-dashoffset: -220;
|
||||
}
|
||||
}
|
||||
#on_boarding {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 0.8rem;
|
||||
box-shadow: 0.1em 0.2em 1em rgba(var(--text-color), 0.16);
|
||||
padding: 1.5rem;
|
||||
background: var(--accent-color);
|
||||
z-index: 50;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
#on_boarding::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
left: -0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: inherit;
|
||||
box-shadow: -0.1em 0 1em rgba(var(--text-color), 0.16);
|
||||
}
|
||||
#on_boarding::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 2rem;
|
||||
background: inherit;
|
||||
}
|
||||
#on_boarding h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
#on_boarding p {
|
||||
color: inherit;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
#on_boarding .icon {
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
padding: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -441,16 +491,6 @@ textarea {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
sm-popup .illustration {
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
padding: 1rem;
|
||||
stroke: var(--accent-color);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
sm-popup sm-input:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -700,6 +740,7 @@ details p {
|
||||
}
|
||||
#navbar .navbar-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
@ -711,6 +752,7 @@ details p {
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
#navbar .navbar-item h5 {
|
||||
margin-top: 0.4em;
|
||||
@ -1063,9 +1105,18 @@ sm-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.page {
|
||||
padding: 1rem 1.5rem;
|
||||
padding-bottom: 5rem;
|
||||
animation: fade-in 0.4s;
|
||||
}
|
||||
.page .container-header {
|
||||
display: grid;
|
||||
@ -1649,6 +1700,8 @@ sm-panel {
|
||||
}
|
||||
|
||||
.person {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -1657,9 +1710,6 @@ sm-panel {
|
||||
width: 5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.person:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.person-initials, #person_initials {
|
||||
display: flex;
|
||||
@ -1816,6 +1866,10 @@ sm-panel {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
#on_boarding {
|
||||
width: 26rem;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -197,6 +197,7 @@ span.ripple{
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
sm-button[variant="outlined"]{
|
||||
@ -214,6 +215,7 @@ sm-button[variant="outlined"]{
|
||||
stroke-dasharray: 230;
|
||||
padding: 2px;
|
||||
justify-self: center;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
@ -241,6 +243,54 @@ sm-button[variant="outlined"]{
|
||||
}
|
||||
}
|
||||
|
||||
#on_boarding{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 0.8rem;
|
||||
box-shadow: 0.1em 0.2em 1em rgba(var(--text-color), 0.16);
|
||||
padding: 1.5rem;
|
||||
background: var(--accent-color);
|
||||
z-index: 50;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
left: -0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: inherit;
|
||||
box-shadow: -0.1em 0 1em rgba(var(--text-color), 0.16);
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 2rem;
|
||||
background: inherit;
|
||||
}
|
||||
h4{
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
p{
|
||||
color: inherit;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.icon{
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
padding: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -454,16 +504,6 @@ textarea {
|
||||
}
|
||||
|
||||
sm-popup{
|
||||
.illustration{
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
padding: 1rem;
|
||||
stroke: var(--accent-color);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
sm-input:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -716,6 +756,7 @@ details{
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
.navbar-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
@ -727,6 +768,7 @@ details{
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
h5 {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
@ -1076,9 +1118,19 @@ sm-panel{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes fade-in{
|
||||
from{
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 1rem 1.5rem;
|
||||
padding-bottom: 5rem;
|
||||
animation: fade-in 0.4s;
|
||||
.container-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -1685,6 +1737,8 @@ sm-panel{
|
||||
}
|
||||
}
|
||||
.person{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -1692,9 +1746,6 @@ sm-panel{
|
||||
transition: transform 0.3s;
|
||||
width: 5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
&:active{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
.person-initials, #person_initials{
|
||||
display: flex;
|
||||
@ -1848,6 +1899,10 @@ sm-panel{
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
#on_boarding{
|
||||
width: 26rem;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
1
css/welcome.svg
Normal file
1
css/welcome.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>welcome</title><path d="M31.64,126S61,90.77,61,90.61a44,44,0,0,0,2-13.27V3.65A1.65,1.65,0,0,0,61.41,2h0A5.66,5.66,0,0,0,55.85,6.5L46.71,43.13,45.8,72.32A10.83,10.83,0,0,1,42,79.71L13.93,104.42" style="fill:#ffd2a1"/><path d="M62.6,4V81.45a17.45,17.45,0,0,1-2.38,8.8L56,97.52a6.76,6.76,0,0,1-.67.92L31.14,126.05l-7.55-10L52.9,85.94a12.61,12.61,0,0,0,3.56-8.38l-.77-34.82a5.3,5.3,0,0,1,0-.69l3.74-40,.67.2A1.88,1.88,0,0,1,62.6,4Z" style="fill:#e8a380"/><path d="M61.41,0a7.66,7.66,0,0,0-7.5,6L44.77,42.65a2,2,0,0,0-.05.42l-.91,29.09a8.83,8.83,0,0,1-3.09,6L12.61,102.92a2,2,0,1,0,2.64,3L43.34,81.23a12.82,12.82,0,0,0,4.46-8.85l.91-29L57.81,6.9A3.67,3.67,0,0,1,61.07,4V31.43a2.2,2.2,0,0,0-.27.26C53.3,40.25,53.3,55.75,53.3,65a2,2,0,0,0,4,0c0-7.25,0-18.54,3.77-26.41V77.4a35.07,35.07,0,0,1-8.91,22.49l-22,24.78a2,2,0,0,0,.17,2.82,2,2,0,0,0,2.82-.17l22-24.77a39.12,39.12,0,0,0,9.92-25V3.65A3.65,3.65,0,0,0,61.41,0Z"/><path d="M57.68,109.08h0c-2.37,2.11-6.31,1.58-8.79-1.16L29.72,86.76C27.23,84,27.13,80.08,29.5,78h0c2.37-2.1,6.31-1.58,8.8,1.17L57.47,100.3C60,103.05,60.05,107,57.68,109.08Z" style="fill:#fbb03b"/><path d="M58.72,101.69,48.83,90.77c1.8,2,1.39,5.24-.9,7.27l-.28.25c-2.29,2-5.6,2.08-7.4.1l9.89,10.92c1.8,2,5.11,1.93,7.4-.1l.28-.25C60.12,106.92,60.52,103.67,58.72,101.69Z" style="fill:#f7931e"/><path d="M50.68,118.08h0c-2.37,2.11-6.31,1.58-8.79-1.16L22.72,95.76C20.23,93,20.13,89.08,22.5,87h0c2.37-2.1,6.31-1.58,8.8,1.17L50.47,109.3C53,112.05,53.05,116,50.68,118.08Z" style="fill:#fbb03b"/><path d="M51.72,110.69,41.83,99.77c1.8,2,1.39,5.24-.9,7.27l-.28.25c-2.29,2-5.6,2.08-7.4.1l9.89,10.92c1.8,2,5.11,1.93,7.4-.1l.28-.25C53.12,115.92,53.52,112.67,51.72,110.69Z" style="fill:#f7931e"/><path d="M60,99,40.78,77.8c-3.22-3.55-8.42-4.14-11.6-1.31a7.16,7.16,0,0,0-2.38,5.05A8.34,8.34,0,0,0,27,83.76a7.33,7.33,0,0,0-5.81,1.73,7.16,7.16,0,0,0-2.38,5.05,9.15,9.15,0,0,0,2.44,6.57L40.4,118.26a9.23,9.23,0,0,0,6.76,3.1,7.08,7.08,0,0,0,7.23-6.83,8.43,8.43,0,0,0-.2-2.23,8,8,0,0,0,1,.06,7.08,7.08,0,0,0,7.23-6.83A9.22,9.22,0,0,0,60,99Zm-10.6,17.63c-1.55,1.37-4.23.92-6-1L24.2,94.42a5.16,5.16,0,0,1-1.41-3.67,3.23,3.23,0,0,1,1-2.27,3.27,3.27,0,0,1,2.21-.8,5.25,5.25,0,0,1,3.78,1.81L49,110.64a5.13,5.13,0,0,1,1.41,3.67A3.19,3.19,0,0,1,49.35,116.59Zm8-9c-1.55,1.37-4.23.92-6-1L32.2,85.42a5.16,5.16,0,0,1-1.41-3.67,3.23,3.23,0,0,1,1-2.27,3.27,3.27,0,0,1,2.21-.8,5.25,5.25,0,0,1,3.78,1.81L57,101.64a5.13,5.13,0,0,1,1.41,3.67A3.19,3.19,0,0,1,57.35,107.59Z"/><path d="M96.36,126S67,90.77,67,90.61a44,44,0,0,1-2-13.27V3.65A1.65,1.65,0,0,1,66.59,2h0A5.66,5.66,0,0,1,72.15,6.5l9.14,36.63.91,29.19A10.83,10.83,0,0,0,86,79.71l28.11,24.71" style="fill:#ffd2a1"/><path d="M65.4,4V81.45a17.45,17.45,0,0,0,2.38,8.8L72,97.52a6.76,6.76,0,0,0,.67.92l24.16,27.61,7.55-10L75.1,85.94a12.61,12.61,0,0,1-3.56-8.38l.77-34.82a5.3,5.3,0,0,0,0-.69l-3.74-40-.67.2A1.88,1.88,0,0,0,65.4,4Z" style="fill:#e8a380"/><path d="M66.59,0a7.66,7.66,0,0,1,7.5,6l9.14,36.64a2,2,0,0,1,0,.42l.91,29.09a8.83,8.83,0,0,0,3.09,6l28.11,24.71a2,2,0,1,1-2.64,3L84.66,81.23a12.82,12.82,0,0,1-4.46-8.85l-.91-29L70.19,6.9A3.67,3.67,0,0,0,66.93,4V31.43a2.2,2.2,0,0,1,.27.26c7.5,8.56,7.5,24.06,7.5,33.32a2,2,0,0,1-4,0c0-7.25,0-18.54-3.77-26.41V77.4a35.07,35.07,0,0,0,8.91,22.49l22,24.78a2,2,0,0,1-.17,2.82,2,2,0,0,1-2.82-.17l-22-24.77a39.12,39.12,0,0,1-9.92-25V3.65A3.65,3.65,0,0,1,66.59,0Z"/><path d="M70.32,109.08h0c2.37,2.11,6.31,1.58,8.79-1.16L98.28,86.76c2.49-2.74,2.59-6.68.22-8.78h0c-2.37-2.1-6.31-1.58-8.8,1.17L70.53,100.3C68.05,103.05,68,107,70.32,109.08Z" style="fill:#fbb03b"/><path d="M69.28,101.69l9.89-10.92c-1.8,2-1.39,5.24.9,7.27l.28.25c2.29,2,5.6,2.08,7.4.1l-9.89,10.92c-1.8,2-5.11,1.93-7.4-.1l-.28-.25C67.88,106.92,67.48,103.67,69.28,101.69Z" style="fill:#f7931e"/><path d="M77.32,118.08h0c2.37,2.11,6.31,1.58,8.79-1.16l19.17-21.16c2.49-2.74,2.59-6.68.22-8.78h0c-2.37-2.1-6.31-1.58-8.8,1.17L77.53,109.3C75.05,112.05,75,116,77.32,118.08Z" style="fill:#fbb03b"/><path d="M76.28,110.69l9.89-10.92c-1.8,2-1.39,5.24.9,7.27l.28.25c2.29,2,5.6,2.08,7.4.1l-9.89,10.92c-1.8,2-5.11,1.93-7.4-.1l-.28-.25C74.88,115.92,74.48,112.67,76.28,110.69Z" style="fill:#f7931e"/><path d="M68.05,99,87.22,77.8c3.22-3.55,8.42-4.14,11.6-1.31a7.16,7.16,0,0,1,2.38,5.05,8.34,8.34,0,0,1-.19,2.22,7.33,7.33,0,0,1,5.81,1.73,7.16,7.16,0,0,1,2.38,5.05,9.15,9.15,0,0,1-2.44,6.57L87.6,118.26a9.23,9.23,0,0,1-6.76,3.1,7.08,7.08,0,0,1-7.23-6.83,8.43,8.43,0,0,1,.2-2.23,8,8,0,0,1-1,.06,7.08,7.08,0,0,1-7.23-6.83A9.22,9.22,0,0,1,68.05,99Zm10.6,17.63c1.55,1.37,4.23.92,6-1L103.8,94.42a5.16,5.16,0,0,0,1.41-3.67,3.23,3.23,0,0,0-1-2.27,3.27,3.27,0,0,0-2.21-.8,5.25,5.25,0,0,0-3.78,1.81L79,110.64a5.13,5.13,0,0,0-1.41,3.67A3.19,3.19,0,0,0,78.65,116.59Zm-8-9c1.55,1.37,4.23.92,6-1L95.8,85.42a5.16,5.16,0,0,0,1.41-3.67,3.23,3.23,0,0,0-1-2.27,3.27,3.27,0,0,0-2.21-.8,5.25,5.25,0,0,0-3.78,1.81L71,101.64a5.13,5.13,0,0,0-1.41,3.67A3.19,3.19,0,0,0,70.65,107.59Z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
191
index.html
191
index.html
@ -32,6 +32,19 @@
|
||||
</div>
|
||||
</sm-popup>
|
||||
<sm-notifications id="show_message"></sm-notifications>
|
||||
<div id="on_boarding" class="flex direction-column hide">
|
||||
<svg class="icon justify-right" onclick="finishOnBoarding()" 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 id="feature_title">Get Started</h4>
|
||||
<p id="feature_details">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eaque tempore cumque?</p>
|
||||
<div class="flex space-between">
|
||||
<sm-button id="prev_tut_button" onclick="previousTutorial()" variant="primary">Back</sm-button>
|
||||
<sm-button id="next_tut_button" onclick="nextTutorial()" variant="no-outline">Next</sm-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Loading screen-->
|
||||
<section id="main_loader" class="grid hide-completely">
|
||||
<svg id="loader" viewBox="0 0 73 73">
|
||||
@ -176,7 +189,7 @@
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Deposit money through UPI.
|
||||
Add balance to your RanchiMall pay wallet. This money can be used directly within our apps ecosystem.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
@ -233,7 +246,7 @@
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Withdraw or redeem your rupee to your specified UPI address.
|
||||
Withdraw or redeem money back to your specified UPI address.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
@ -279,7 +292,7 @@
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
Request rupee from other's using FLO address.
|
||||
Request money from others using their FLO address.
|
||||
</p>
|
||||
<details>
|
||||
<summary>
|
||||
@ -323,8 +336,7 @@
|
||||
What is this?
|
||||
</summary>
|
||||
<p>
|
||||
Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be
|
||||
sent as Rupee.
|
||||
Don't have enough wallet balance? Pay to our cashier through UPI and our cashier will complete that transaction on your behalf.
|
||||
</p>
|
||||
</details>
|
||||
<details>
|
||||
@ -547,7 +559,7 @@
|
||||
</svg>
|
||||
<h5>Home</h5>
|
||||
</div>
|
||||
<div title="requests page" class="navbar-item user-option" onclick="showPage('request_page', this)">
|
||||
<div title="requests page" id="request_page_btn" class="navbar-item user-option" onclick="showPage('request_page', this)">
|
||||
<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" />
|
||||
@ -589,7 +601,7 @@
|
||||
</svg>
|
||||
<h5>Complaints</h5>
|
||||
</div>
|
||||
<div title="profile page" class="navbar-item" onclick="showPage('settings_page', this)">
|
||||
<div title="profile page" id="profile_page_btn" class="navbar-item" onclick="showPage('settings_page', this)">
|
||||
<svg viewBox="0 0 64 64" class="icon">
|
||||
<path d="M31.6,0.5c8.3,0,14.2,5.6,14.2,15S41.1,32.9,32,32.9s-13.8-8-13.8-17.3s5.9-15,14.2-15" />
|
||||
<path d="M25.4,33.4c-2.5,4.7-10.5,7.1-16.4,9.7c-2.4,1-4.4,14-1.6,14c7.7,4.4,16.4,6.6,25.2,6.4
|
||||
@ -603,14 +615,14 @@
|
||||
<div class="left">
|
||||
<h4>Rupee actions</h4>
|
||||
<section class="options-tab">
|
||||
<div class="option" onclick="showPopup('send_rupee_popup')">
|
||||
<div class="option" id="send_rupee_option" onclick="showPopup('send_rupee_popup')">
|
||||
<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')">
|
||||
<div class="option" id="deposit_rupee_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" />
|
||||
@ -623,7 +635,7 @@
|
||||
</svg>
|
||||
<h4>deposit</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('withdraw_rupee')">
|
||||
<div class="option" id="withdraw_rupee_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" />
|
||||
@ -637,14 +649,14 @@
|
||||
</svg>
|
||||
<h4>Withdraw</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('request_rupee')">
|
||||
<div class="option" id="request_rupee_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')">
|
||||
<div class="option" id="pay_rupee_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>
|
||||
@ -2203,14 +2215,13 @@
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.option, .activity')) {
|
||||
createRipple(e, e.target.closest('.option, .activity'))
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (e.target.closest('.option, .activity, .person, .navbar-item, sm-button')) {
|
||||
createRipple(e, e.target.closest('.option, .activity, .person, .navbar-item, sm-button'))
|
||||
}
|
||||
})
|
||||
|
||||
function createRipple(event, target){
|
||||
const ripple = target.querySelector('.ripple');
|
||||
const circle = document.createElement("span");
|
||||
const diameter = Math.max(target.clientWidth, target.clientHeight);
|
||||
const radius = diameter / 2;
|
||||
@ -2218,7 +2229,6 @@
|
||||
circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
|
||||
circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
|
||||
circle.classList.add("ripple");
|
||||
const duration = radius > 200 ? 1200 : 600
|
||||
const rippleAnimation = circle.animate([
|
||||
|
||||
{
|
||||
@ -2227,7 +2237,7 @@
|
||||
}
|
||||
],
|
||||
{
|
||||
duration,
|
||||
duration: 1000,
|
||||
fill: "forwards",
|
||||
easing: 'ease-out'
|
||||
})
|
||||
@ -2410,6 +2420,146 @@
|
||||
|
||||
})
|
||||
|
||||
const onBoarding = [
|
||||
{
|
||||
id: '',
|
||||
title: 'Welcome',
|
||||
details: 'We are glad that you chose our service.<br>This service can be used throughout our <strong>ecosystem</strong> to pay/receive money.'
|
||||
},
|
||||
{
|
||||
id: 'send_rupee_option',
|
||||
title: 'Send money',
|
||||
details: 'Send money to any FLO addres. This uses wallet balance to send money.'
|
||||
},
|
||||
{
|
||||
id: 'deposit_rupee_option',
|
||||
title: 'Deposit money',
|
||||
details: 'Add balance to your RanchiMall pay wallet. This money can be used directly within our apps ecosystem.'
|
||||
},
|
||||
{
|
||||
id: 'withdraw_rupee_option',
|
||||
title: 'Withdraw money',
|
||||
details: `Withdraw or redeem money back to your specified UPI address.`
|
||||
},
|
||||
{
|
||||
id: 'request_rupee_option',
|
||||
title: 'Request money',
|
||||
details: `Request money from others using their FLO address. Requested money will be stored in wallet balance.`
|
||||
},
|
||||
{
|
||||
id: 'pay_rupee_option',
|
||||
title: 'Pay through cashier',
|
||||
details: `Don't have enough wallet balance? Pay to our cashier through UPI and our cashier will complete that transaction on your behalf.`
|
||||
},
|
||||
{
|
||||
id: 'request_page_btn',
|
||||
title: `Request page`,
|
||||
details: 'This will show all the payment requests you received from other users and shop keepers.'
|
||||
},
|
||||
{
|
||||
id: 'activity_page_btn',
|
||||
title: 'Activity page',
|
||||
details: 'This page displays all the transactions such as sent, received money etc.'
|
||||
},
|
||||
{
|
||||
id: 'profile_page_btn',
|
||||
title: 'Profile page',
|
||||
details: 'This page contains all the personal data as well as app settings.'
|
||||
}
|
||||
]
|
||||
|
||||
const onBoardingPanel = document.getElementById('on_boarding'),
|
||||
featureTitle = document.getElementById('feature_title'),
|
||||
featureDetails = document.getElementById('feature_details'),
|
||||
nextTutButton = document.getElementById('next_tut_button'),
|
||||
prevTutButton = document.getElementById('prev_tut_button')
|
||||
|
||||
|
||||
let currentFeatureIndex = 0;
|
||||
|
||||
function startOnBoarding(){
|
||||
onBoardingPanel.classList.remove('hide')
|
||||
currentFeatureIndex = 0
|
||||
showTutorial(0)
|
||||
}
|
||||
function finishOnBoarding(){
|
||||
onBoardingPanel.classList.add('hide')
|
||||
currentFeatureIndex = 0
|
||||
}
|
||||
function nextTutorial(){
|
||||
showTutorial(+1)
|
||||
}
|
||||
function previousTutorial(){
|
||||
showTutorial(-1)
|
||||
}
|
||||
function showTutorial(index = 0){
|
||||
if(currentFeatureIndex === onBoarding.length - 1 && index > 0){
|
||||
finishOnBoarding()
|
||||
}
|
||||
index = Math.min(Math.max(index + currentFeatureIndex,0), onBoarding.length-1)
|
||||
if(index === 0)
|
||||
prevTutButton.classList.add('hide')
|
||||
else
|
||||
prevTutButton.classList.remove('hide')
|
||||
if(index === onBoarding.length - 1){
|
||||
nextTutButton.textContent = `Got it`
|
||||
}
|
||||
else{
|
||||
if(nextTutButton.textContent !== 'Next')
|
||||
nextTutButton.textContent = 'Next'
|
||||
}
|
||||
const flyOut = [
|
||||
{
|
||||
transform: 'translateX(-1rem)',
|
||||
opacity: 0
|
||||
}
|
||||
]
|
||||
const flyIn = [
|
||||
{
|
||||
transform: 'translateX(1rem)',
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform: 'translateX(0)',
|
||||
opacity: 1
|
||||
}
|
||||
]
|
||||
const options = {
|
||||
duration: 300,
|
||||
fill: "forwards",
|
||||
easing: 'ease'
|
||||
}
|
||||
let titleAnime
|
||||
if(currentFeatureIndex > index){
|
||||
titleAnime = featureTitle.animate(flyIn, options)
|
||||
featureDetails.animate(flyIn, options).reverse()
|
||||
titleAnime.reverse()
|
||||
}
|
||||
else{
|
||||
titleAnime = featureTitle.animate(flyOut, options)
|
||||
featureDetails.animate(flyOut, options)
|
||||
}
|
||||
titleAnime.onfinish = () => {
|
||||
featureTitle.textContent = onBoarding[index].title
|
||||
featureDetails.innerHTML = onBoarding[index].details
|
||||
if(onBoarding[index].id !== ''){
|
||||
const targetOption = document.getElementById(onBoarding[index].id)
|
||||
const targetPosition = targetOption.getBoundingClientRect()
|
||||
onBoardingPanel.setAttribute('style', `transform: translate(${targetPosition.left + targetPosition.width}px, ${targetPosition.top}px)`)
|
||||
}
|
||||
if(currentFeatureIndex > index){
|
||||
featureTitle.animate(flyOut, options).reverse()
|
||||
featureDetails.animate(flyOut, options).reverse()
|
||||
}
|
||||
else{
|
||||
featureTitle.animate(flyIn, options)
|
||||
featureDetails.animate(flyIn, options)
|
||||
}
|
||||
currentFeatureIndex = index
|
||||
}
|
||||
}
|
||||
showTutorial(0)
|
||||
|
||||
const transactionSuccessSection = document.getElementById('success_section'),
|
||||
transactionFailedSection = document.getElementById('failure_section'),
|
||||
transactionSuccessId = document.getElementById('successful_transaction_id'),
|
||||
@ -12442,6 +12592,10 @@
|
||||
new QRCode(document.getElementById('my_qr_code'), myFloID);
|
||||
|
||||
showPage('home_page', 'home_page_btn')
|
||||
if(localStorage.getItem(`${myFloID}IsNew`) === null || localStorage.getItem(`${myFloID}IsNew`) === 'true'){
|
||||
startOnBoarding()
|
||||
//localStorage.setItem(`${myFloID}IsNew`, false)
|
||||
}
|
||||
hideLoader()
|
||||
|
||||
request_rupee_token()
|
||||
@ -13499,6 +13653,7 @@
|
||||
}
|
||||
|
||||
function showActivities(showRefresh = false){
|
||||
if(activityLoaded && !showRefresh) return
|
||||
if(!activityLoaded || showRefresh){
|
||||
depositActivityContainer.innerHTML = ''
|
||||
withdrawActivityContainer.innerHTML = ''
|
||||
|
||||
Loading…
Reference in New Issue
Block a user