0.2.0

feat (user) :  add on boarding experience for desktop UI

components.js

@@ -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) => {

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;

css/main.scss

@@ -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;

css/welcome.svg

@@ -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>

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
+                Don't have enough wallet balance? Pay to our cashier through UPI and our cashier will complete that transaction on your behalf.
-                sent as Rupee.
             </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) => {
+            document.addEventListener('mousedown', (e) => {
-                if (e.target.closest('.option, .activity')) {
+                if (e.target.closest('.option, .activity, .person, .navbar-item, sm-button')) {
-                    createRipple(e, e.target.closest('.option, .activity'))
+                    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 = ''