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

0.0.89

Browse Source
This commit is contained in:
sairaj mote 2020-10-26 03:59:30 +05:30
parent 4468a4b130
commit a3099fded8
6 changed files with 153 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.js
View File

@ -246,8 +246,6 @@ border: none;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
background: rgba(var(--text-color), 0.06);
-webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
font-family: var(--font-family);
width: 100%;
outline: none;

55
css/main.css
View File

@ -540,22 +540,55 @@ details p {
line-height: 1.4;
}
#sign_in_popup::part(background) {
#sign_in_page {
position: fixed;
gap: 2rem;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
align-items: center;
justify-content: space-between;
background: url(sign-in-bg.svg) no-repeat center, rgba(var(--foreground-color), 1);
background-size: cover;
z-index: 5;
padding: 0 6vw;
}
#sign_in_page .info h1 {
line-height: 1.1em;
font-weight: 800;
font-size: clamp(1.5rem, 8vw, 4rem);
}
#sign_in_page .sign-in-box {
background: rgba(var(--foreground-color), 1);
z-index: 1;
padding: 3rem 2rem;
border-radius: 1rem;
box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
justify-self: center;
align-items: center;
text-align: center;
}
#sign_in_popup h3 {
margin-top: 2rem;
#sign_in_page .sign-in-box sm-input {
text-align: left;
}
#sign_in_popup h4 {
#sign_in_page .sign-in-box form {
width: 100%;
}
#sign_in_page .sign-in-box h3 {
margin-top: 1rem;
font-weight: 700;
}
#sign_in_page .sign-in-box h4 {
font-weight: 500;
margin-bottom: 3rem;
margin-top: 0.5rem;
}
#sign_in_popup button {
margin: 1rem 0;
}
#sign_in_popup p {
#sign_in_page .sign-in-box button {
margin-top: 1rem;
margin-bottom: 0 !important;
}
#sign_in_page .sign-in-box p {
margin-bottom: 0.5rem;
}
.primary-btn {
@ -1698,6 +1731,10 @@ sm-panel {
margin-left: 4rem;
}
#sign_in_page {
grid-auto-flow: column;
}
sm-popup {
background: rgba(var(--foreground-color), 1);
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

71
css/main.scss
View File

@ -556,26 +556,56 @@ details{
}
}
#sign_in_popup {
&::part(background){
#sign_in_page {
position: fixed;
gap: 2rem;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
align-items: center;
justify-content: space-between;
background: url(sign-in-bg.svg) no-repeat center, rgba(var(--foreground-color), 1);
background-size: cover;
z-index: 5;
padding: 0 6vw;
.info{
h1{
line-height: 1.1em;
font-weight: 800;
font-size: clamp(1.5rem, 8vw, 4rem);
}
}
.sign-in-box{
background: rgba(var(--foreground-color), 1);
}
h3 {
margin-top: 2rem;
}
h4 {
font-weight: 500;
margin-bottom: 3rem;
}
button {
margin: 1rem 0;
}
p {
margin-top: 1rem;
margin-bottom: 0 !important;
z-index: 1;
padding: 3rem 2rem;
border-radius: 1rem;
box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
justify-self: center;
align-items: center;
text-align: center;
sm-input{
text-align: left;
}
form{
width: 100%;
}
h3 {
margin-top: 1rem;
font-weight: 700;
}
h4 {
font-weight: 500;
margin-bottom: 3rem;
margin-top: 0.5rem;
}
button {
margin-top: 1rem;
}
p {
margin-bottom: 0.5rem;
}
}
}
@ -1737,6 +1767,9 @@ sm-panel{
padding: 0 2rem;
margin-left: 4rem;
}
#sign_in_page{
grid-auto-flow: column;
}
sm-popup{
background: rgba(var(--foreground-color), 1);
}

1
css/sign-in-bg.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a,.b,.c{opacity:0.6;}.a{fill:url(#a);}.b{fill:url(#b);}.c{fill:url(#c);}</style><linearGradient id="a" x1="222.28" y1="490.07" x2="392.81" y2="490.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#662d91"/><stop offset="1" stop-color="#ff7bac"/></linearGradient><linearGradient id="b" x1="-116.86" y1="38.37" x2="869.09" y2="38.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1b1464"/><stop offset="1" stop-color="#ed1e79"/></linearGradient><linearGradient id="c" x1="1406.14" y1="835.71" x2="1784.51" y2="1294.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4145a"/><stop offset="0.99" stop-color="#f7931e"/></linearGradient></defs><title>sign-in-bg</title><path class="a" d="M226.53,423.18c-19.65,20.72,31.9,140.63,92.68,136.47,43.87-3,84.77-70.12,70.82-94.66-5.28-9.29-16.61-9.31-44.3-14.22C260.17,435.57,236.83,412.31,226.53,423.18Z"/><path class="b" d="M-110.68-19.48c28.79-111.07,152-161.1,230.4-193,285.16-115.83,551.79,33.94,599,60.48,63.85,35.86,158.51,89,149.76,135.36-16.21,85.87-359.81.52-576,210.24-75.17,72.92-83,131.12-144,138.24C27.63,346-152.55,142-110.68-19.48Z"/><path class="c" d="M717.8,1107.08c-17.52-81.33,84.59-196.52,201.6-239,242.11-88,432.84,177,601.92,83.52C1634.54,889,1583.59,751.06,1757.48,580c43.66-42.94,163.34-160.65,241.92-129.6,116.44,46,165.06,427.55-5.76,650.88-204.9,267.88-643.48,200.88-921.6,158.4C945.66,1240.41,739.74,1209,717.8,1107.08Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

81
index.html
View File

@ -41,19 +41,24 @@
<h4 id="tip_container">Loading RanchiMall Pay</h4>
<sm-button onclick="signOut()">Sign Out</sm-button>
</section>
<!-- Sign in popup-->
<sm-popup id="sign_in_popup">
<div class="container-header">
<h3>Sign In</h3>
<!-- Sign in page-->
<section id="sign_in_page" class="grid">
<div class="info">
<h4>RanchiMall Pay</h4>
<h1>Send & request money <br> using <br> UPI on Blockchain</h1>
</div>
<h4 class="expand light-text">Welcome to RanchiMall Pay.<br>Please enter your FLO private key to
continue.</h4>
<sm-input id="get_priv_key_field" privateKey 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>
<div class="sign-in-box flex direction-column">
<h3>Sign In</h3>
<h4 class="expand light-text">Welcome to RanchiMall Pay.</h4>
<form action="" onsubmit="return false">
<sm-input id="get_priv_key_field" privateKey placeholder="FLO Private Key" type="password" required animate>
</sm-input>
<button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
Sign In
</button>
</form>
</div>
</section>
<sm-popup id="qr_code_popup">
<header class="popup-header" slot="header">
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
@ -516,6 +521,17 @@
</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">
@ -554,17 +570,6 @@
<div class="left">
<h4>Rupee actions</h4>
<section class="options-tab">
<div class="option" 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>
<h4>Scan QR</h4>
</div>
<div class="option" onclick="showPopup('send_rupee_popup')">
<svg class="icon" viewBox="0 0 64 64">
<path
@ -1930,6 +1935,11 @@
document.querySelector('#main_header').classList.remove('hide-completely')
}
const mobileCheck = () => {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
function setAttributes(el, attrs) {
for (var key in attrs) {
@ -2082,7 +2092,7 @@
}
function formValidation(formElement) {
let parent = formElement.closest('sm-popup'),
let parent = formElement.closest('sm-popup') || formElement.closest('form'),
submitBtn = parent.querySelector("button[type='submit']");
if (!submitBtn) return;
if (areInputsValid(parent))
@ -2151,7 +2161,8 @@
document.addEventListener('keyup', (e) => {
if (e.target.closest('sm-input')) {
if (e.key === 'Enter') {
e.target.closest('sm-popup').querySelector("button[type='submit']")
let parent = e.target.closest('sm-popup') || e.target.closest('form')
parent.querySelector("button[type='submit']")
.click();
}
}
@ -2646,15 +2657,27 @@
function signIn() {
return new Promise((resolve, reject) => {
hideLoader()
showPopup('sign_in_popup', true)
showSignIn()
let signInBtn = document.getElementById('sign_in_btn'),
privateKeyInput = document.getElementById('get_priv_key_field')
signInBtn.onclick = () => {
resolve(privateKeyInput.value)
hideSignIn()
showLoader()
}
})
}
const signInPage = document.getElementById('sign_in_page')
function showSignIn(){
signInPage.classList.remove('hide-completely')
}
function hideSignIn(){
signInPage.classList.add('hide-completely')
signInPage.querySelector('sm-input').value= ''
}
async function signOutSequence(){
delete token_app.master_configurations;
await floDapps.clearCredentials()
@ -11684,8 +11707,6 @@
reject(null)
else {
resolve(inputVal)
hidePopup()
showLoader()
}
})
}
@ -12303,6 +12324,10 @@
})
userType.forEach(user => user.textContent = 'Me')
defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
if(mobileCheck())
document.getElementById('scanner_icon').classList.remove('hide-completely')
else
document.getElementById('scanner_icon').classList.add('hide-completely')
renderUserUPI()
renderAllContacts()