RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.3.6

Browse Source 
feat (user): add haptic feedback for transaction status
This commit is contained in:
sairaj mote 2020-11-14 20:07:01 +05:30
parent 41f5eee402
commit bc81e9e5ef
7 changed files with 70 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Asset 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

13
css/main.css
View File

@ -36,8 +36,8 @@ body[data-theme=dark] {
body[data-theme=dark] .flo-balance-card {
color: rgba(var(--text-color), 1);
}
body[data-theme=dark] #focus_illu {
opacity: 0.6;
body[data-theme=dark] #focus_illu:not(.hide) {
opacity: 0.7;
fill: rgba(var(--text-color), 0.5);
}
@ -276,6 +276,7 @@ sm-button[variant=outlined] {
background: var(--accent-color);
z-index: 10;
transition: transform 0.3s, opacity 0.3s;
width: 100%;
}
#on_boarding::after {
content: "";
@ -870,11 +871,13 @@ details p {
padding: 1rem;
justify-content: flex-end;
}
.balance span {
font-size: 0.7em;
}
.balance h4 {
font-size: 2rem;
font-size: 1.8rem;
font-family: "Roboto", sans-serif;
font-weight: 500;
text-shadow: 1px 0.1rem 0.2rem #00000040;
word-break: break-all;
flex: 1;
}
@ -1894,7 +1897,7 @@ sm-panel {
#on_boarding {
width: 26rem;
}
#on_boarding::before {
#on_boarding.indicating::before {
content: "";
position: absolute;
transform: rotate(45deg);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
css/main.scss
View File

@ -33,8 +33,8 @@ body[data-theme="dark"]{
.flo-balance-card{
color: rgba(var(--text-color), 1);
}
#focus_illu{
opacity: 0.6;
#focus_illu:not(.hide){
opacity: 0.7;
fill: rgba(var(--text-color), 0.5);
}
}
@ -274,6 +274,7 @@ sm-button{
background: var(--accent-color);
z-index: 10;
transition: transform 0.3s, opacity 0.3s;
width: 100%;
&::after{
content: '';
position: absolute;
@ -885,11 +886,13 @@ details{
border-radius: 1rem;
padding: 1rem;
justify-content: flex-end;
span{
font-size: 0.7em;
}
h4{
font-size: 2rem;
font-size: 1.8rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
text-shadow: 1px 0.1rem 0.2rem #00000040;
word-break: break-all;
flex: 1;
}
@ -1926,7 +1929,7 @@ sm-panel{
#on_boarding{
width: 26rem;
&::before{
&.indicating::before{
content: '';
position: absolute;
transform: rotate(45deg);

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
favicon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><title>favicon</title><path d="M65,0H14.79V128l27.38-13V90.5l-17-.08,17-21.64V25.15H62c13.6,0,22.92,7.08,22.92,18.08S75.58,61.3,62,61.3H55.12L34.78,86.45H65c27.76,0,48.25-17.88,48.25-43.22S92.72,0,65,0Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 298 B

73
index.html
View File

@ -9,6 +9,7 @@
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
</head>
<body onload="onLoadStartUp()" class="hide-completely">
@ -587,7 +588,7 @@
rows="10"></textarea>
</sm-popup>
<header id="main_header" class="flex hide-on-desktop">
<header id="main_header" class="flex hide-on-desktop space-between align-center">
<div class="logo">
<svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
@ -596,6 +597,16 @@
</svg>
<h4>RanchiMall Pay</h4>
</div>
<div id="scanner_icon" class="user-option hide-completely" onclick="showPopup('qr_code_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>scanner</title>
<path d="M24.5,63.5H5.58A5.08,5.08,0,0,1,.5,58.43V39.5" />
<path d="M63.5,39.5V58.43a5.08,5.08,0,0,1-5.08,5.07H39.5" />
<path d="M39.5.5H58.42A5.08,5.08,0,0,1,63.5,5.57V24.5" />
<path d="M.5,24.5V5.57A5.08,5.08,0,0,1,5.58.5H24.5" />
<line x1="12" y1="32" x2="52" y2="32" />
</svg>
</div>
</header>
<nav id="navbar" class="hide-completely">
<div class="logo hide-on-mobile">
@ -630,17 +641,6 @@
</svg>
<h5>requests</h5>
</div>
<div id="scanner_icon" class="navbar-item user-option hide-completely" onclick="showPopup('qr_code_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>scanner</title>
<path d="M24.5,63.5H5.58A5.08,5.08,0,0,1,.5,58.43V39.5" />
<path d="M63.5,39.5V58.43a5.08,5.08,0,0,1-5.08,5.07H39.5" />
<path d="M39.5.5H58.42A5.08,5.08,0,0,1,63.5,5.57V24.5" />
<path d="M.5,24.5V5.57A5.08,5.08,0,0,1,5.58.5H24.5" />
<line x1="12" y1="32" x2="52" y2="32" />
</svg>
<h5>Scan QR</h5>
</div>
<div title="activity page" id="activity_page_btn" class="navbar-item" onclick="showPage('activity_page', this)">
<svg class="icon" viewBox="0 0 64 64">
<path
@ -757,7 +757,7 @@
<div class="tt-icon">?</div>
<p class="tooltip-text">Your wallet balance</p>
</div>
<h5>Rupee</h5>
<h5>Wallet</h5>
<h4 class="token-balance">0</h4>
</div>
<div class="balance in-process-balance">
@ -1016,7 +1016,7 @@
<div class="tt-icon">?</div>
<p class="tooltip-text">Your wallet balance</p>
</div>
<h5>Rupee</h5>
<h5>Wallet</h5>
<h4 class="token-balance">0</h4>
</div>
<div class="balance flo-balance-card">
@ -1137,6 +1137,11 @@
<p>Toggle dark theme</p>
<sm-switch id="theme_switcher" class="justify-right"></sm-switch>
</div>
<h4>Haptic feedback</h4>
<div class="flex">
<p>Toggle haptic feedback. This will turn vibration feedback on/off.</p>
<sm-switch id="haptic_feedback_switcher" class="justify-right" checked></sm-switch>
</div>
<div class="user-option">
<h4 class="top-margin">My UPIs</h4>
<div class="upi-container"></div>
@ -1809,7 +1814,8 @@
notify('We are back online.', '', '', true)
})
let themeSwitcher = document.getElementById('theme_switcher')
const themeSwitcher = document.getElementById('theme_switcher'),
hapticFeedbackSwitcher = document.getElementById('haptic_feedback_switcher')
if (localStorage.theme === "dark") {
nightlight()
@ -1837,6 +1843,28 @@
}
})
let isHapticOn
if(localStorage.getItem('haptic') === null)
localStorage.setItem("haptic", "on");
if (localStorage.haptic === "on") {
isHapticOn = true
hapticFeedbackSwitcher.checked = true;
} else {
isHapticOn = false
hapticFeedbackSwitcher.checked = false;
}
hapticFeedbackSwitcher.addEventListener('change', function (e) {
if (this.checked) {
isHapticOn = true
localStorage.setItem("haptic", "on");
}
else {
isHapticOn = false
localStorage.setItem("haptic", "off");
}
})
// function required for popups or modals to appear
class Stack {
constructor() {
@ -2563,10 +2591,6 @@
function finishOnBoarding() {
onBoardingPanel.classList.add('hide')
focusIllu.classList.add('hide')
setTimeout(() => {
onBoardingPanel.setAttribute('style', 'transform: none')
focusIllu.setAttribute('style', 'transform: none')
}, 300);
currentFeatureIndex = 0
}
function nextTutorial() {
@ -2583,8 +2607,11 @@
if (index === 0){
prevTutButton.classList.add('hide')
focusIllu.classList.add('hide')
onBoardingPanel.classList.remove('indicating')
onBoardingPanel.setAttribute('style', `transform: translate(calc(50vw - ${onBoardingPanel.getBoundingClientRect().width/2}px), calc(50vh - ${onBoardingPanel.getBoundingClientRect().height/2}px))`)
}
else{
onBoardingPanel.classList.add('indicating')
prevTutButton.classList.remove('hide')
focusIllu.classList.remove('hide')
}
@ -2676,9 +2703,13 @@
else
transactionSuccessId.parentNode.classList.add('hide-completely')
if (status === 'success') {
if(isHapticOn)
window.navigator.vibrate(200)
transactionSuccessSection.classList.remove('hide-completely')
}
else {
if(isHapticOn)
window.navigator.vibrate([100, 100, 100])
transactionFailedSection.classList.remove('hide-completely')
}
showPopup('transaction_result')
@ -12743,7 +12774,7 @@
showPage('home_page', 'home_page_btn')
if (localStorage.getItem(`${myFloID}IsNew`) === null || localStorage.getItem(`${myFloID}IsNew`) === 'true') {
startOnBoarding()
//localStorage.setItem(`${myFloID}IsNew`, false)
localStorage.setItem(`${myFloID}IsNew`, false)
}
hideLoader()
@ -13455,7 +13486,7 @@
if (typeof get_user_rupee_balance === "object" && get_user_rupee_balance.balance >= 0) {
if (get_user_rupee_balance.balance === null)
get_user_rupee_balance.balance = 0;
document.querySelectorAll('.token-balance').forEach(bal => bal.textContent = get_user_rupee_balance.balance);
document.querySelectorAll('.token-balance').forEach(bal => bal.innerHTML = `<span>₹</span>${get_user_rupee_balance.balance}`);
}
console.log(get_user_flo_balance)