0.1.0
This commit is contained in:
sairaj mote
parent
c1f38a21c6
commit
f7f4398d3c
90
css/main.css
90
css/main.css
@ -558,63 +558,107 @@ details p {
|
||||
|
||||
#sign_in_page {
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
gap: 2rem;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
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: url(sign-in-bg.svg) center, rgba(var(--foreground-color), 1);
|
||||
background-size: cover;
|
||||
z-index: 5;
|
||||
padding: 0 6vw;
|
||||
}
|
||||
#sign_in_page .info {
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in_page .info h1 {
|
||||
line-height: 1.1em;
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.5rem, 8vw, 4rem);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#sign_in_page .info h4 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
#sign_in_page .sign-in-box {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
width: 100%;
|
||||
margin: 0 -2rem;
|
||||
z-index: 1;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-input {
|
||||
text-align: left;
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-panel {
|
||||
width: 100%;
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-tab-header {
|
||||
margin: 0;
|
||||
background: none;
|
||||
align-self: flex-start;
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-tab-header::part(tab-header) {
|
||||
padding-bottom: 0.4rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-tab::part(tab) {
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
#sign_in_page .sign-in-box sm-tab-panels {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box form {
|
||||
width: 100%;
|
||||
}
|
||||
#sign_in_page .sign-in-box h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box h3 {
|
||||
margin-top: 1rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
#sign_in_page .sign-in-box h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box h5 {
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
#sign_in_page .sign-in-box .copy-row h4 {
|
||||
max-width: 34ch;
|
||||
}
|
||||
#sign_in_page .sign-in-box .copy-row:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box button {
|
||||
width: auto;
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 1.6rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box p {
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 35ch;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#sign_in_page .sign-in-box p:last-of-type {
|
||||
margin-top: 1.5rem;
|
||||
#sign_in_page .sign-in-box #credentials_section {
|
||||
border-top: 1px rgba(var(--text-color), 0.2) solid;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
from {
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.primary-btn {
|
||||
padding: 0.6rem 1.2rem !important;
|
||||
background: var(--accent-color);
|
||||
@ -1751,6 +1795,14 @@ sm-panel {
|
||||
#sign_in_page {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
#sign_in_page .sign-in-box {
|
||||
align-self: auto;
|
||||
width: 26rem;
|
||||
padding: 2rem;
|
||||
min-height: 80vh;
|
||||
min-width: 26rem;
|
||||
box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
|
||||
}
|
||||
|
||||
sm-popup {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
@ -1810,10 +1862,6 @@ sm-panel {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
#sign_in_popup {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
#home_page {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -573,62 +573,106 @@ details{
|
||||
|
||||
#sign_in_page {
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
gap: 2rem;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
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: url(sign-in-bg.svg) center, rgba(var(--foreground-color), 1);
|
||||
background-size: cover;
|
||||
z-index: 5;
|
||||
padding: 0 6vw;
|
||||
.info{
|
||||
align-items: center;
|
||||
h1{
|
||||
line-height: 1.1em;
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.5rem, 8vw, 4rem);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h4{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.sign-in-box{
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
width: 100%;
|
||||
margin: 0 -2rem;
|
||||
z-index: 1;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
sm-input{
|
||||
text-align: left;
|
||||
}
|
||||
sm-panel{
|
||||
width: 100%;
|
||||
}
|
||||
sm-tab-header{
|
||||
margin: 0;
|
||||
background: none;
|
||||
align-self: flex-start;
|
||||
&::part(tab-header){
|
||||
padding-bottom: 0.4rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
sm-tab::part(tab){
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
sm-tab-panels{
|
||||
margin-top: 3rem;
|
||||
}
|
||||
form{
|
||||
width: 100%;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
font-weight: 700;
|
||||
h2{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h3{
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h5{
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
.copy-row{
|
||||
h4{
|
||||
max-width: 34ch;
|
||||
}
|
||||
}
|
||||
.copy-row:not(:last-of-type){
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
button {
|
||||
width: auto;
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 1.6rem;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
&:last-of-type{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
max-width: 35ch;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#credentials_section{
|
||||
border-top: 1px rgba(var(--text-color), 0.2) solid;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes slide-down{
|
||||
from{
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
to{
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1784,6 +1828,14 @@ sm-panel{
|
||||
}
|
||||
#sign_in_page{
|
||||
grid-auto-flow: column;
|
||||
.sign-in-box{
|
||||
align-self: auto;
|
||||
width: 26rem;
|
||||
padding: 2rem;
|
||||
min-height: 80vh;
|
||||
min-width: 26rem;
|
||||
box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
|
||||
}
|
||||
}
|
||||
sm-popup{
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
@ -1841,10 +1893,6 @@ sm-panel{
|
||||
.page {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
#sign_in_popup {
|
||||
width: 24rem;
|
||||
}
|
||||
#home_page {
|
||||
padding-top: 0.5rem;
|
||||
.left {
|
||||
|
||||
69
index.html
69
index.html
@ -42,22 +42,54 @@
|
||||
<sm-button onclick="signOut()">Sign Out</sm-button>
|
||||
</section>
|
||||
<!-- Sign in page-->
|
||||
<section id="sign_in_page" class="grid hide-completely">
|
||||
<section id="sign_in_page" class="grid space-between hide-completely">
|
||||
<div class="info">
|
||||
<h4>RanchiMall Pay</h4>
|
||||
<h1>Send & request money <br> using <br> UPI on Blockchain</h1>
|
||||
</div>
|
||||
<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>
|
||||
<p>New here? <a href="https://flo-webwallet.duckdns.org/" target="_blank">Get your sign-in credentials.</a></p>
|
||||
<div class="sign-in-box flex direction-column">
|
||||
<sm-tab-header target="user_entry">
|
||||
<sm-tab>Sign In</sm-tab>
|
||||
<sm-tab>Sign Up</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="user_entry">
|
||||
<sm-panel>
|
||||
<h3>Welcome back</h3>
|
||||
<p>Just enter your FLO private key to continue.</p>
|
||||
<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>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<h3>Get started</h3>
|
||||
<p>Create your FLO public and private key pair. <Strong>Don't forget to store them securely!</Strong></p>
|
||||
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get FLO credentials</sm-button>
|
||||
<section id="credentials_section" class="hide-completely">
|
||||
<h5>FLO ID</h5>
|
||||
<div class="copy-row">
|
||||
<h4 id="generated_id" class="copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
<title>Copy</title>
|
||||
<rect x="16" y="16" width="48" height="48" rx="6" />
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Private key</h5>
|
||||
<div class="copy-row">
|
||||
<h4 id="generated_key" class="copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
<title>Copy</title>
|
||||
<rect x="16" y="16" width="48" height="48" rx="6" />
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</sm-panel>
|
||||
</sm-tab-panels>
|
||||
</div>
|
||||
</section>
|
||||
<sm-popup id="qr_code_popup">
|
||||
@ -2690,6 +2722,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
const credentialsSection = document.getElementById('credentials_section'),
|
||||
generateFloId = document.getElementById('generate_flo_id'),
|
||||
generatedId = document.getElementById('generated_id'),
|
||||
generatedKey = document.getElementById('generated_key')
|
||||
|
||||
function generateId(){
|
||||
generateFloId.classList.add('hide-completely')
|
||||
credentialsSection.classList.remove('hide-completely')
|
||||
let {floID, privKey} = floCrypto.generateNewID()
|
||||
generatedId.textContent = floID
|
||||
generatedKey.textContent = privKey
|
||||
}
|
||||
|
||||
const signIn = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
hideLoader()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user