0.5.16
style (user): dark mode improvements
This commit is contained in:
sairaj mote
parent
c997335914
commit
02e9a6626b
32
css/main.css
32
css/main.css
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
font-size: clamp(16px, 1.2vmax, 40px);
|
||||
}
|
||||
|
||||
body {
|
||||
@ -91,7 +91,7 @@ p {
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -631,9 +631,9 @@ details p {
|
||||
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 {
|
||||
padding: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in_page .info h1 {
|
||||
@ -644,10 +644,11 @@ details p {
|
||||
}
|
||||
#sign_in_page .sign-in-box {
|
||||
width: 100%;
|
||||
margin: 0 -2rem;
|
||||
z-index: 1;
|
||||
margin-top: auto;
|
||||
justify-self: center;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -713,7 +714,7 @@ details p {
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
#sign_in_page .sign-in-box #sign_in_with {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
@ -733,7 +734,7 @@ details p {
|
||||
|
||||
#main_header {
|
||||
align-items: center;
|
||||
padding: clamp(1rem, 2vw, 2rem) 1rem;
|
||||
padding: 1.5rem 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@ -1184,7 +1185,7 @@ sm-panel {
|
||||
width: auto;
|
||||
}
|
||||
.copy-row h4 {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
.copy-row .icon {
|
||||
@ -1760,7 +1761,7 @@ sm-panel {
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 0.6rem !important;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.person-name {
|
||||
@ -1881,12 +1882,17 @@ sm-panel {
|
||||
}
|
||||
|
||||
#sign_in_page {
|
||||
padding: 0 6vw;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
#sign_in_page .info {
|
||||
padding: 0;
|
||||
}
|
||||
#sign_in_page .sign-in-box {
|
||||
align-self: auto;
|
||||
width: 26rem;
|
||||
padding: 2rem;
|
||||
margin-top: unset;
|
||||
min-height: 80vh;
|
||||
min-width: 26rem;
|
||||
box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
|
||||
@ -2077,16 +2083,6 @@ sm-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1900px) {
|
||||
:root {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 2400px) {
|
||||
:root {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 320px) {
|
||||
:root {
|
||||
font-size: 14px;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
font-size: 16px;
|
||||
font-size: clamp(16px, 1.2vmax, 40px);
|
||||
}
|
||||
body {
|
||||
--accent-color: #2752ca;
|
||||
@ -87,7 +87,7 @@ p {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
strong{
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
@ -647,8 +647,8 @@ details{
|
||||
background: url(sign-in-bg.svg) center, rgba(var(--foreground-color), 1);
|
||||
background-size: cover;
|
||||
z-index: 5;
|
||||
padding: 0 6vw;
|
||||
.info{
|
||||
padding: 1.5rem;
|
||||
align-items: center;
|
||||
h1{
|
||||
line-height: 1.1;
|
||||
@ -659,10 +659,11 @@ details{
|
||||
}
|
||||
.sign-in-box{
|
||||
width: 100%;
|
||||
margin: 0 -2rem;
|
||||
z-index: 1;
|
||||
margin-top: auto;
|
||||
justify-self: center;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
sm-input{
|
||||
@ -729,7 +730,7 @@ details{
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
#sign_in_with{
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -751,7 +752,7 @@ details{
|
||||
|
||||
#main_header {
|
||||
align-items: center;
|
||||
padding: clamp(1rem, 2vw, 2rem) 1rem;
|
||||
padding: 1.5rem 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@ -1202,7 +1203,7 @@ sm-panel{
|
||||
gap: 0.5rem;
|
||||
width: auto;
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@ -1795,7 +1796,7 @@ sm-panel{
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 0.6rem !important;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
color: white;
|
||||
}
|
||||
.person-name{
|
||||
font-size: 0.85rem;
|
||||
@ -1915,11 +1916,16 @@ sm-panel{
|
||||
margin-left: 4rem;
|
||||
}
|
||||
#sign_in_page{
|
||||
padding: 0 6vw;
|
||||
grid-auto-flow: column;
|
||||
.info{
|
||||
padding: 0;
|
||||
}
|
||||
.sign-in-box{
|
||||
align-self: auto;
|
||||
width: 26rem;
|
||||
padding: 2rem;
|
||||
margin-top: unset;
|
||||
min-height: 80vh;
|
||||
min-width: 26rem;
|
||||
box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
|
||||
@ -2113,16 +2119,6 @@ sm-panel{
|
||||
}
|
||||
|
||||
}
|
||||
@media only screen and (min-width: 1900px){
|
||||
:root {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 2400px){
|
||||
:root {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
:root{
|
||||
|
||||
31
index.html
31
index.html
@ -5,14 +5,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RanchiMall Pay</title>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-86RVPYPYDP"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-86RVPYPYDP');
|
||||
</script>
|
||||
<link
|
||||
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">
|
||||
@ -65,7 +57,7 @@
|
||||
<sm-button onclick="signOut()">Sign Out</sm-button>
|
||||
</section>
|
||||
<!-- Sign in page-->
|
||||
<section id="sign_in_page" class="grid space-between hide-completely">
|
||||
<section id="sign_in_page" class="grid hide-completely">
|
||||
<div class="info">
|
||||
<h4>RanchiMall Pay</h4>
|
||||
<h1>Send & request money <br> using <br> UPI on Blockchain</h1>
|
||||
@ -90,12 +82,12 @@
|
||||
</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>
|
||||
<p>Create your FLO public and private key pair. <strong>Don't forget to store them
|
||||
securely.<br>Once lost, private key can't be recovered.</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>
|
||||
<h5>FLO ID (User 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">
|
||||
@ -104,7 +96,7 @@
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Private key</h5>
|
||||
<h5>Private key (Password)</h5>
|
||||
<div class="copy-row">
|
||||
<h4 id="generated_key" class="copy"></h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
|
||||
@ -154,7 +146,7 @@
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Send Rupee</h4>
|
||||
<h4>Send</h4>
|
||||
<button id="send_tokens_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="expand primary-btn">
|
||||
Send
|
||||
@ -255,7 +247,7 @@
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Withdraw rupee</h4>
|
||||
<h4>Withdraw</h4>
|
||||
<button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
withdraw
|
||||
@ -302,7 +294,7 @@
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
<h4>Request rupee</h3>
|
||||
<h4>Request</h3>
|
||||
<button id="request_rupee_btn" class="action expand" type="submit" disabled>
|
||||
<h4 class="primary-btn expand">
|
||||
request
|
||||
@ -1163,7 +1155,7 @@
|
||||
<sm-switch id="haptic_feedback_switcher" class="justify-right" checked></sm-switch>
|
||||
</div>
|
||||
<div class="user-option">
|
||||
<h4 class="top-margin">My UPIs</h4>
|
||||
<h4 class="top-margin">My UPI ID</h4>
|
||||
<div class="upi-container"></div>
|
||||
<p class="empty-state">Add your UPI addresses for withdrawing money from wallet back to your bank account.</p>
|
||||
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address
|
||||
@ -13443,7 +13435,6 @@
|
||||
try {
|
||||
const send_tokens_btn = document.getElementById('send_tokens_btn');
|
||||
send_tokens_btn.onclick = async function () {
|
||||
btnLoading('send_tokens_btn', 'start')
|
||||
const token_sender = myFloID;
|
||||
const token_receiver = document.getElementById('token_receiver').value.trim();
|
||||
const token_amount = parseInt(document.getElementById('token_amount').value);
|
||||
@ -13462,7 +13453,7 @@
|
||||
}
|
||||
|
||||
if (typeof sender_token_balance !== "object") {
|
||||
err_msg = `Failed to load Sender balance.`;
|
||||
err_msg = `Failed to load balance.`;
|
||||
notify(err_msg, 'error');
|
||||
return false;
|
||||
}
|
||||
@ -13475,6 +13466,8 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
btnLoading('send_tokens_btn', 'start')
|
||||
|
||||
let flo_txid = await floBlockchainAPI.sendTx(myFloID, token_receiver, 0.001, myPrivKey,
|
||||
flo_comment)
|
||||
console.log(flo_txid);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user