807 lines
40 KiB
HTML
807 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blockchain UPI</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
</head>
|
|
|
|
<body>
|
|
<audio id="notification_sound">
|
|
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
|
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
|
</audio>
|
|
<div class="popup-container hide">
|
|
<div id="confirmation" class="popup">
|
|
<p></p>
|
|
<div>
|
|
<button class="hover" onclick="hidePopup(this)">Cancel</button>
|
|
<button class="hover">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="show_message" class="hide">
|
|
<svg id="error_icon" class="notification-icon hide-completely" viewBox="0 0 100 100">
|
|
<title>Error icon</title>
|
|
<path
|
|
d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM46,27.18A.79.79,0,0,1,46.6,27h7.72a.79.79,0,0,1,.79.79l-1,28.76a.79.79,0,0,
|
|
1-.79.79H47.46a.77.77,0,0,1-.56-.23.73.73,0,0,1-.23-.56l-.86-28.76A.77.77,0,0,1,46,27.18Zm7.68,44.39A4.91,4.91,0,0,1,50,73.05a5.08,5.08,
|
|
0,0,1-5.21-5.21A5,5,0,0,1,50,62.63a5,5,0,0,1,3.73,1.45,5.18,5.18,0,0,1,1.42,3.76A5.11,5.11,0,0,1,53.72,71.57Z" />
|
|
</svg>
|
|
<svg id="done_icon" class="notification-icon" viewBox="0 0 100 100">
|
|
<title>Done icon</title>
|
|
<path
|
|
d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM80.85,32.37,40.3,72.92a1.24,1.24,0,0,1-1.75,0l-19.4-19.4a1.23,1.23,0,0,1,0-1.75l3.54-3.54a1.23,
|
|
1.23,0,0,1,1.74,0L38.55,62.35a1.24,1.24,0,0,0,1.75,0L75.57,27.08a1.23,1.23,0,0,1,1.74,0l3.54,3.54A1.23,1.23,0,0,1,80.85,32.37Z" />
|
|
</svg>
|
|
<div>
|
|
<h5>Notification</h5>
|
|
<span id="notification_text">Message</span>
|
|
</div>
|
|
<button id="hide_banner_btn">
|
|
<svg viewBox="0 0 50 50">
|
|
<title>Close this notification</title>
|
|
<line x1="50" y1="0" x2="0" y2="50" />
|
|
<line x1="0" y1="0" x2="50" y2="50" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="popup-container solid-background hide">
|
|
<div id="sign_in_popup" class="popup">
|
|
<div class="container-header">
|
|
<h1>Sign In</h1>
|
|
</div>
|
|
<p class="expand light-text">Welcome to RanchiMall Blockchain UPI</b></p>
|
|
<form class="expand" autocomplete="off" onsubmit="return false">
|
|
<div class="input">
|
|
<input id="get_priv_key_field" type="password" required>
|
|
<label>Private Key</label>
|
|
</div>
|
|
<div class="action expand" onclick="signIn(this)">
|
|
<button class="primary-btn expand" type="submit" disabled>
|
|
Sign In
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<header id="main_header" class="flex">
|
|
<svg viewBox="0 0 180 105.7" class="hide-completely">
|
|
<path d="M22.5,35.5C27.7,32.6,33.6,31,40,31c19.9,0,36,16.1,36,36c0,16.6-11.2,30.6-26.5,34.7" />
|
|
<path d="M4,4v63c0,16.2,10.7,30,25.5,34.4" />
|
|
<line x1="94" y1="67.1" x2="126" y2="67.1" />
|
|
<line x1="110" y1="50.5" x2="110" y2="83.8" />
|
|
<line x1="144" y1="67.1" x2="176" y2="67.1" />
|
|
<line x1="160" y1="50.5" x2="160" y2="83.8" />
|
|
</svg>
|
|
<div id="logo">
|
|
<svg id="main_logo" viewBox="0 0 27.25 32">
|
|
<title>RanchiMall</title>
|
|
<path
|
|
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
|
</svg>
|
|
<span>
|
|
<h5>RanchiMall</h5>
|
|
<h4>BLOCKCHAIN UPI</h4>
|
|
</span>
|
|
</div>
|
|
<div id="display_balance">
|
|
<h5>Rupee Tokens</h5>
|
|
<h3 id="token_balance">0</h3>
|
|
</div>
|
|
</header>
|
|
<nav id="navbar">
|
|
<div title="homepage" id="home_page_btn" class="navbar-item active" onclick="showPage(this, 'home_page')">
|
|
<svg class="icon" viewBox="0 0 64 64">
|
|
<path
|
|
d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
|
|
</svg>
|
|
<h5>Home</h5>
|
|
</div>
|
|
<div title="See all cash deposit requests" id="deposit_page_btn" class="navbar-item notification-dot"
|
|
onclick="showPage(this, 'deposit')">
|
|
<svg class="icon banking" viewBox="0 0 52 51.5">
|
|
<line x1="4" y1="28" x2="4" y2="19.5" />
|
|
<polyline points="4 6 4 1 51 1 51 48 4 48 4 41.5" />
|
|
<line x1="9" y1="50" x2="18" y2="50" />
|
|
<line x1="36" y1="50" x2="45" y2="50" />
|
|
<circle cx="27.5" cy="30" r="9.5" />
|
|
<circle cx="27.5" cy="30" r="3.5" />
|
|
<rect x="1" y="6" width="6" height="13.5" rx="2.76" />
|
|
<rect x="1" y="28" width="6" height="13.5" rx="2.76" />
|
|
</svg>
|
|
<h5>Deposit</h5>
|
|
</div>
|
|
<div title="See all cash withdraw requests" class="navbar-item notification-dot"
|
|
onclick="showPage(this, 'withdraw')">
|
|
<svg class="icon banking" viewBox="0 0 52 60">
|
|
<line x1="4" y1="33.5" x2="4" y2="25" />
|
|
<polyline points="41.52 6.5 51 6.5 51 53.5 41.69 53.5" />
|
|
<line x1="9" y1="55.5" x2="14" y2="55.5" />
|
|
<line x1="43" y1="55.5" x2="45" y2="55.5" />
|
|
<rect x="1" y="11.5" width="6" height="13.5" rx="2.76" />
|
|
<rect x="1" y="33.5" width="6" height="13.5" rx="2.76" />
|
|
<polyline points="3.81 11.5 3.81 6.5 41.5 1 41.69 59 3.81 53.5 3.81 47" />
|
|
<path
|
|
d="M35.64,39.19c0,6.31-3.25,11.45-7.22,11.48s-7-4.92-7-11.07,3.13-11.29,7.05-11.48S35.64,32.88,35.64,39.19Z"
|
|
transform="translate(-6 -2)" />
|
|
<path
|
|
d="M31.06,39.32c0,2.31-1.19,4.2-2.64,4.23s-2.62-1.79-2.62-4.08S27,35.3,28.42,35.24,31.06,37,31.06,39.32Z"
|
|
transform="translate(-6 -2)" />
|
|
</svg>
|
|
<h5>Withdraw</h5>
|
|
</div>
|
|
<div title="profile page" class="dropdown navbar-item" onclick="showPage(this, 'profile_page')">
|
|
<svg class="icon" id="profile_pic" viewBox="0 0 49.54 61.12">
|
|
<path
|
|
d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
|
|
transform="translate(-25.23 -20)" />
|
|
<path
|
|
d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
|
|
transform="translate(-25.23 -19.44)" />
|
|
</svg>
|
|
<h5>Cashier</h5>
|
|
</div>
|
|
</nav>
|
|
<main class="">
|
|
<section class="page" id="home_page">
|
|
<h1>What do we offer?</h1>
|
|
<p>
|
|
Your Rupee balance is digital footprint of actual cash.<br> Deposit, Withdraw or Pay Rupee digitally
|
|
using a FLO Blockchain address.
|
|
</p>
|
|
|
|
<h4>Go ahead and try something</h4>
|
|
|
|
<div class="options-tab">
|
|
<a class="option" href="#cash_transfer">Transfer cash</a>
|
|
<a class="option" href="#buy_rupee">buy rupee</a>
|
|
<a class="option" href="#withdraw_rupee">withdraw rupee</a>
|
|
<a class="option" href="#pay_anyone">pay through cashier</a>
|
|
</div>
|
|
<div id="cash_transfer" class="user-option">
|
|
<h2>Cash transfer</h2>
|
|
<form autocomplete="off" onsubmit="return false">
|
|
<div class="input">
|
|
<input id="token_reciever" type="text" required>
|
|
<label for="token_reciever">Reciever's FLO ID</label>
|
|
</div>
|
|
<div class="input">
|
|
<input id="token_amount" inputmode="numeric" type="number" required>
|
|
<label for="token_amount">Amount</label>
|
|
</div>
|
|
<div id="send-tokens_btn" class="action top-margin expand">
|
|
<button class="primary-btn expand" type="submit" disabled>
|
|
transfer
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="buy_rupee" class="user-option">
|
|
<h2>Buy rupee</h2>
|
|
<form autocomplete="off" onsubmit="return false">
|
|
<div class="input">
|
|
<input id="token_amount_to_buy" inputmode="numeric" type="number" required>
|
|
<label for="token_amount_to_buy">Amount</label>
|
|
</div>
|
|
<div id="request_tokens_btn" class="action top-margin expand">
|
|
<button class="primary-btn expand" type="submit" disabled>
|
|
buy
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="withdraw_rupee" class="user-option">
|
|
<h2>Withdraw rupee</h2>
|
|
<form autocomplete="off" onsubmit="return false">
|
|
<div class="input">
|
|
<input id="withdraw_cash_amount" type="text" required>
|
|
<label for="withdraw_cash_amount">Reciever's FLO ID</label>
|
|
</div>
|
|
<div class="input">
|
|
<input id="user_withdraw_upi" type="text" required>
|
|
<label for="user_withdraw_upi">Reciever's FLO ID</label>
|
|
</div>
|
|
<div id="withdraw_cash_btn" class="action top-margin expand">
|
|
<button class="primary-btn expand" type="submit" disabled>
|
|
withdraw
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="pay_anyone" class="user-option">
|
|
<h2>Pay anyone through cashier</h2>
|
|
<form autocomplete="off" onsubmit="return false">
|
|
<div class="input">
|
|
<input id="recvr_id" type="text" required>
|
|
<label for="recvr_id">Reciever's FLO ID</label>
|
|
</div>
|
|
<div class="input">
|
|
<input id="recvr_amount_to_pay" type="number" inputmode="numeric" required>
|
|
<label for="recvr_amount_to_pay">Amount</label>
|
|
</div>
|
|
<div class="input">
|
|
<input id="paid_cashier_upi_txid" type="text" required>
|
|
<label for="paid_cashier_upi_txid">UPI Txid/Ref Number</label>
|
|
</div>
|
|
<div id="cnf_cash_payment" class="action top-margin expand" onclick="confirm_pay_through_cashier_request()">
|
|
<button class="primary-btn expand" type="submit" disabled>
|
|
pay
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<section id="deposit" class="page hide-completely">
|
|
<div class="container-header">
|
|
<h2>Deposit Requests</h2>
|
|
<div id="fetch_deposits">
|
|
<button>
|
|
Load pending
|
|
</button>
|
|
</div>
|
|
<label class="search" id="search_deposit">
|
|
<input type="search" placeholder="Search">
|
|
</label>
|
|
</div>
|
|
<div id="deposit_illustration" class="empty">
|
|
<svg viewBox="0 0 529.94 446.5">
|
|
<defs>
|
|
<style>
|
|
.a,
|
|
.b,
|
|
.c,
|
|
.d {
|
|
fill: none;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.a {
|
|
stroke-width: 9px;
|
|
}
|
|
|
|
.b,
|
|
.c {
|
|
stroke-width: 5px;
|
|
}
|
|
|
|
.c {
|
|
stroke-dasharray: 11.94 11.94;
|
|
}
|
|
|
|
.d {
|
|
stroke-width: 3px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<title>Empty icon</title>
|
|
<polyline class="a"
|
|
points="508.5 289 220.5 217 4.5 289 293.5 361 370.38 335.47 220.5 298 143.05 323.82 220.5 298 220.5 217 4.5 289 4.5 370 292.5 442 508.5 370 508.5 289 293.5 361 292.5 442" />
|
|
<path class="b" d="M947.54,629.34q0-3,.05-6" transform="translate(-703.5 -300.22)" />
|
|
<path class="c"
|
|
d="M948.09,611.41c5.42-83.07,49.82-144.78,102.21-154.63,57.46-10.81,101.53-.27,88.07,42.61-7.82,24.88-50.89,36.71-71.95,5.86-26.87-39.37,12.95-108.88,71.46-131,17.38-6.57,37.33-14.37,53.89-30.53"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="b" d="M1195.9,339.41c1.32-1.47,2.62-3,3.88-4.58"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="d"
|
|
d="M1215,324.59c-2,3.62-6.21,5.12-9.34,3.36s-4-6.11-2-9.72,5.67-3.13,8.8-1.37S1217,321,1215,324.59Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<ellipse class="d" cx="1215.17" cy="310.95" rx="4.5" ry="4"
|
|
transform="translate(-354.28 918.17) rotate(-60.69)" />
|
|
<path class="d"
|
|
d="M1231.68,321.5c1.44-1.68-3.48-3-6.84-5.84s-8.44-.9-9.87.78,1.31,2.43,4.67,5.3S1230.25,323.18,1231.68,321.5Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="d"
|
|
d="M1197.61,302.37c.69-2.09,4.36,1.43,8.56,2.81s5.16,6.73,4.47,8.83-2.76.14-7-1.23S1196.93,304.47,1197.61,302.37Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
</svg>
|
|
<h2 class="light-text">No deposit requests.</h2>
|
|
</div>
|
|
<div id="deposit_request_container">
|
|
</div>
|
|
</section>
|
|
<section id="withdraw" class="page hide-completely">
|
|
<div class="container-header">
|
|
<h2>Withdraw Requests</h2>
|
|
<div id="fetch_withdraws" class="action">
|
|
<button>
|
|
Load pending
|
|
</button>
|
|
<svg viewBox="0 0 73 73" class="loader">
|
|
<path
|
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
|
</svg>
|
|
</div>
|
|
<label class="search" id="search_withdraw">
|
|
<input type="search" placeholder="Search">
|
|
</label>
|
|
</div>
|
|
<div id="withdraw_illustration" class="empty">
|
|
<svg viewBox="0 0 529.94 446.5">
|
|
<defs>
|
|
<style>
|
|
.a,
|
|
.b,
|
|
.c,
|
|
.d {
|
|
fill: none;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.a {
|
|
stroke-width: 9px;
|
|
}
|
|
|
|
.b,
|
|
.c {
|
|
stroke-width: 5px;
|
|
}
|
|
|
|
.c {
|
|
stroke-dasharray: 11.94 11.94;
|
|
}
|
|
|
|
.d {
|
|
stroke-width: 3px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<title>Empty icon</title>
|
|
<polyline class="a"
|
|
points="508.5 289 220.5 217 4.5 289 293.5 361 370.38 335.47 220.5 298 143.05 323.82 220.5 298 220.5 217 4.5 289 4.5 370 292.5 442 508.5 370 508.5 289 293.5 361 292.5 442" />
|
|
<path class="b" d="M947.54,629.34q0-3,.05-6" transform="translate(-703.5 -300.22)" />
|
|
<path class="c"
|
|
d="M948.09,611.41c5.42-83.07,49.82-144.78,102.21-154.63,57.46-10.81,101.53-.27,88.07,42.61-7.82,24.88-50.89,36.71-71.95,5.86-26.87-39.37,12.95-108.88,71.46-131,17.38-6.57,37.33-14.37,53.89-30.53"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="b" d="M1195.9,339.41c1.32-1.47,2.62-3,3.88-4.58"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="d"
|
|
d="M1215,324.59c-2,3.62-6.21,5.12-9.34,3.36s-4-6.11-2-9.72,5.67-3.13,8.8-1.37S1217,321,1215,324.59Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<ellipse class="d" cx="1215.17" cy="310.95" rx="4.5" ry="4"
|
|
transform="translate(-354.28 918.17) rotate(-60.69)" />
|
|
<path class="d"
|
|
d="M1231.68,321.5c1.44-1.68-3.48-3-6.84-5.84s-8.44-.9-9.87.78,1.31,2.43,4.67,5.3S1230.25,323.18,1231.68,321.5Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
<path class="d"
|
|
d="M1197.61,302.37c.69-2.09,4.36,1.43,8.56,2.81s5.16,6.73,4.47,8.83-2.76.14-7-1.23S1196.93,304.47,1197.61,302.37Z"
|
|
transform="translate(-703.5 -300.22)" />
|
|
</svg>
|
|
<h2 class="light-text">No withdraw requests.</h2>
|
|
</div>
|
|
<div id="withdraw_request_container">
|
|
</div>
|
|
</section>
|
|
<section id="profile_page" class="page hide-completely">
|
|
<div class="container-header">
|
|
<h2>Profile</h2>
|
|
</div>
|
|
<h5>FLO ID</h5>
|
|
<h4>FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd</h4>
|
|
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
|
|
</section>
|
|
</main>
|
|
<script id="ui_functions">
|
|
let frag = document.createDocumentFragment(),
|
|
currentTimeout,
|
|
notificationSound = document.getElementById('notification_sound');
|
|
const render = {
|
|
// returns an order element;
|
|
depositRequest: function (txid, upiId, floId, currency, amount) {
|
|
let card = document.createElement('div'), currencySymbol;
|
|
card.classList.add('request')
|
|
currency === 'INR' ? currencySymbol = '₹' : currencySymbol = '$';
|
|
card.innerHTML = ` <h5>FLO ID</h5>
|
|
<h4 class="breakable">${floId}</h4>
|
|
<h5>UPI ID</h5>
|
|
<h3 class="breakable">${upiId}</h3>
|
|
<h5>Amount</h5>
|
|
<h3>${currencySymbol}${amount}</h3>
|
|
<button id="" class="confirm-deposit-btn">
|
|
Confirm
|
|
</button>`;
|
|
return card;
|
|
},
|
|
withdrawRequest: function (txid, upiId, floId, currency, amount) {
|
|
let card = document.createElement('div'), currencySymbol;
|
|
card.classList.add('request')
|
|
currency === 'INR' ? currencySymbol = '₹' : currencySymbol = '$';
|
|
card.innerHTML = ` <h5>FLO ID</h5>
|
|
<h4 class="breakable">${floId}</h4>
|
|
<h5>UPI ID</h5>
|
|
<h3 class="breakable">${upiId}</h3>
|
|
<h5>Amount</h5>
|
|
<h3>${currencySymbol}${amount}</h3>
|
|
<h5>Transaction ID</h5>
|
|
<h4 class="breakable">${txid}</h4>
|
|
<button id="" class="confirm-withdraw-btn"">
|
|
Confirm
|
|
</button>`;
|
|
return card;
|
|
},
|
|
}
|
|
|
|
//Checks for internet connection status
|
|
if (!navigator.onLine)
|
|
notify('error', 'There seems to be a problem connecting to the internet.', 'fixed', true)
|
|
window.addEventListener('offline', () => {
|
|
notify('error', 'There seems to be a problem connecting to the internet.', 'fixed', true)
|
|
})
|
|
window.addEventListener('online', () => {
|
|
notify('', 'We are back online.', '', true)
|
|
})
|
|
// function required for popups or modals to appear
|
|
function showPopup(popup, permission) {
|
|
let thisPopup = document.getElementById(popup);
|
|
thisPopup.parentNode.classList.remove('hide');
|
|
thisPopup.classList.add('no-transformations');
|
|
window.onmousedown = function (event) {
|
|
if (event.target == thisPopup.parentNode && permission !== 'no')
|
|
hidePopup(popup, permission);
|
|
}
|
|
}
|
|
|
|
// hides the popup or modal
|
|
function hidePopup(pop, permission) {
|
|
let popup;
|
|
typeof pop === 'string' ? popup = document.getElementById(pop) : popup = pop.closest('.popup');
|
|
if (permission === 'no') return;
|
|
popup.closest('.popup-container').classList.add('hide');
|
|
popup.closest('.popup').classList.remove('no-transformations');
|
|
setTimeout(() => {
|
|
clearAllInputs(popup)
|
|
if (popup.querySelector('.btn')) {
|
|
popup.querySelector('.btn').classList.remove('clip')
|
|
popup.querySelector('.loader').classList.remove('animate-loader')
|
|
popup.querySelector(".action button").disabled = true;
|
|
}
|
|
}, 400)
|
|
}
|
|
|
|
function setAttributes(el, attrs) {
|
|
for (var key in attrs) {
|
|
el.setAttribute(key, attrs[key]);
|
|
}
|
|
}
|
|
|
|
function clearAllInputs(parent) {
|
|
parent.querySelectorAll("input").forEach((field) => {
|
|
if (field.getAttribute('type') !== 'radio') {
|
|
field.value = '';
|
|
if (field.closest('.input')) {
|
|
field.closest('.input').classList.remove('animate-label')
|
|
}
|
|
}
|
|
else
|
|
field.checked = false
|
|
})
|
|
}
|
|
|
|
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
|
function notify(mode, message, behavior, sound) {
|
|
let banner = document.getElementById('show_message'),
|
|
back;
|
|
if (mode === 'error') {
|
|
banner.querySelector('#error_icon').classList.remove('hide-completely')
|
|
banner.querySelector('#done_icon').classList.add('hide-completely')
|
|
}
|
|
else {
|
|
banner.querySelector('#error_icon').classList.add('hide-completely')
|
|
banner.querySelector('#done_icon').classList.remove('hide-completely')
|
|
}
|
|
|
|
banner.style.background = back;
|
|
banner.classList.add('no-transformations')
|
|
banner.classList.remove('hide')
|
|
banner.querySelector('#notification_text').textContent = message.charAt(0).toUpperCase() + message.slice(1);
|
|
if (navigator.onLine && sound) {
|
|
notificationSound.currentTime = 0;
|
|
notificationSound.play();
|
|
}
|
|
banner.querySelector('#hide_banner_btn').onclick = function () {
|
|
banner.classList.add('hide')
|
|
banner.classList.remove('no-transformations')
|
|
}
|
|
clearTimeout(currentTimeout)
|
|
if (behavior === 'fixed') return;
|
|
currentTimeout = setTimeout(() => {
|
|
banner.classList.add('hide')
|
|
banner.classList.remove('no-transformations')
|
|
}, 4000)
|
|
}
|
|
|
|
// displays a popup for asking permission. Use this instead of JS confirm
|
|
let askConfirmation = function (message) {
|
|
return new Promise((resolve, reject) => {
|
|
let popup = document.getElementById('confirmation');
|
|
showPopup('confirmation')
|
|
popup.children[0].textContent = message;
|
|
popup.children[1].firstElementChild.onclick = function () {
|
|
hidePopup('confirmation')
|
|
resolve(false)
|
|
}
|
|
popup.children[1].children[1].onclick = function () {
|
|
hidePopup('confirmation')
|
|
resolve(true);
|
|
}
|
|
})
|
|
}
|
|
function enableBtn(btn) {
|
|
if (typeof btn === 'string')
|
|
btn = document.getElementById(btn);
|
|
if (btn.disabled)
|
|
btn.disabled = false;
|
|
}
|
|
|
|
function disableBtn(btn) {
|
|
if (typeof btn === 'string')
|
|
btn = document.getElementById(btn);
|
|
if (!btn.disabled)
|
|
btn.disabled = true;
|
|
}
|
|
function btnLoading(btn, option) {
|
|
if (typeof btn === 'string')
|
|
btn = document.getElementById(btn);
|
|
if (option === 'start') {
|
|
btn.firstElementChild.focus();
|
|
btn.children[0].classList.add('clip')
|
|
btn.children[1].classList.add('animate-loader')
|
|
}
|
|
else {
|
|
disableBtn(btn.children[0])
|
|
btn.children[0].classList.remove('clip')
|
|
btn.children[1].classList.remove('animate-loader')
|
|
}
|
|
}
|
|
|
|
// prevents non numerical input on firefox
|
|
function preventNonNumericalInput(e) {
|
|
e = e || window.event;
|
|
let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which,
|
|
charStr = String.fromCharCode(charCode);
|
|
|
|
if (!charStr.match(/[+-]?([0-9]*[.])?[0-9]+/))
|
|
e.preventDefault();
|
|
}
|
|
|
|
function areInputsEmpty(parent) {
|
|
let allInputs = parent.querySelectorAll(".input input"),
|
|
allRadios = parent.querySelectorAll("input[type='radio']"),
|
|
radioStatus, inputStatus, counter = 0;
|
|
inputStatus = [...allInputs].every(input => input.checkValidity())
|
|
|
|
allRadios.forEach(radio => {
|
|
if (radio.checked)
|
|
counter++;
|
|
})
|
|
if (counter == allRadios.length / 2)
|
|
radioStatus = true;
|
|
if (inputStatus && radioStatus)
|
|
return true
|
|
else false
|
|
}
|
|
|
|
function formValidation(formElement, e) {
|
|
if (formElement.getAttribute('type') === 'number')
|
|
preventNonNumericalInput(e);
|
|
let parent = formElement.closest('form'),
|
|
submitBtn = parent.querySelector(".action button");
|
|
if (areInputsEmpty(parent))
|
|
submitBtn.disabled = false;
|
|
else
|
|
submitBtn.disabled = true;
|
|
}
|
|
|
|
let allForms = document.querySelectorAll('form');
|
|
window.addEventListener('load', () => {
|
|
allForms.forEach((form) => {
|
|
form.addEventListener('input', (e) => {
|
|
if (e.target.closest('.input')) {
|
|
let parent = e.target.closest('.input');
|
|
if (parent.firstElementChild.value !== '')
|
|
parent.classList.add('animate-label')
|
|
else
|
|
parent.classList.remove('animate-label')
|
|
formValidation(parent.firstElementChild, e)
|
|
if (e.key === 'Enter') {
|
|
parent.closest('form').querySelector("button[type='submit']").click();
|
|
}
|
|
}
|
|
})
|
|
})
|
|
allForms.forEach((form) => {
|
|
form.addEventListener('blur', (e) => {
|
|
if (e.target.closest('.input')) {
|
|
let parent = e.target.closest('.input');
|
|
if (parent.firstElementChild.value === '')
|
|
parent.classList.remove('animate-label')
|
|
}
|
|
}, true)
|
|
})
|
|
|
|
// Function for confirming deposit requests
|
|
document.getElementById('deposit_request_container').addEventListener('click', (e) => {
|
|
let container = document.getElementById('deposit_request_container');
|
|
if (e.target.closest('.confirm-deposit-btn'))
|
|
askConfirmation('Confirm this deposit request?').then((result) => {
|
|
if (result) {
|
|
let depositRequestId = e.target.closest('.confirm-deposit-btn').id;
|
|
btnLoading(e.target.closest('.confirm-deposit-btn'), 'start')
|
|
setTimeout(() => {
|
|
e.target.closest('.request').remove();
|
|
notify('', `Request id: ${depositRequestId} confirmed.`, '', true)
|
|
checkBalance();
|
|
if (container.children.length === 0) {
|
|
document.getElementById('deposit_illustration').classList.remove('hide-completely')
|
|
document.getElementById('search_deposit').classList.add('hide-completely')
|
|
}
|
|
}, 1000)
|
|
}
|
|
})
|
|
})
|
|
|
|
// Function for confirming withdraw requests
|
|
document.getElementById('withdraw_request_container').addEventListener('click', (e) => {
|
|
let container = document.getElementById('withdraw_request_container');
|
|
if (e.target.closest('.confirm-withdraw-btn'))
|
|
askConfirmation('Confirm this withdraw request?').then((result) => {
|
|
if (result) {
|
|
let withdrawRequestId = e.target.closest('.confirm-withdraw-btn').id;
|
|
btnLoading(e.target.closest('.confirm-withdraw-btn'), 'start')
|
|
setTimeout(() => {
|
|
e.target.closest('.request').remove();
|
|
notify('', `Request id: ${withdrawRequestId} confirmed.`, '', true)
|
|
if (container.children.length === 0) {
|
|
document.getElementById('withdraw_illustration').classList.remove('hide-completely')
|
|
document.getElementById('search_withdraw').classList.add('hide-completely')
|
|
}
|
|
}, 1000)
|
|
}
|
|
})
|
|
})
|
|
|
|
//renders deposit requests
|
|
document.getElementById('deposit_request_container').innerHTML = '';
|
|
for (let i = 0; i < 6; i++) {
|
|
frag.append(render.depositRequest('s6f5h4s65f4h6s5465s4', '7744023898@paytm', 'FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd', 'INR', '50000'))
|
|
}
|
|
if (frag.children.length === 0) {
|
|
document.getElementById('deposit_illustration').classList.remove('hide-completely')
|
|
document.getElementById('search_deposit').classList.add('hide-completely')
|
|
}
|
|
else {
|
|
document.getElementById('search_withdraw').classList.remove('hide-completely')
|
|
document.getElementById('deposit_illustration').classList.add('hide-completely')
|
|
}
|
|
document.getElementById('deposit_request_container').append(frag);
|
|
|
|
//renders deposit requests
|
|
document.getElementById('withdraw_request_container').innerHTML = '';
|
|
for (let i = 0; i < 4; i++) {
|
|
frag.append(render.withdrawRequest('s6f5h4s65f4h6s5465s4kdvbskjbvjasbdvbadbvjabdjvajdbksvjbskjb', '7744023898@paytm', 'FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd', 'INR', '50000'))
|
|
}
|
|
if (frag.children.length === 0) {
|
|
document.getElementById('withdraw_request_container').innerHTML = ``;
|
|
document.getElementById('search_withdraw').classList.add('hide-completely')
|
|
}
|
|
else {
|
|
document.getElementById('search_withdraw').classList.remove('hide-completely')
|
|
document.getElementById('withdraw_illustration').classList.add('hide-completely')
|
|
}
|
|
|
|
document.getElementById('withdraw_request_container').append(frag);
|
|
})
|
|
|
|
let allPages = document.querySelectorAll('.page'),
|
|
allTabs = document.querySelectorAll('.navbar-item');
|
|
function showPage(btn, page) {
|
|
let thisBtn;
|
|
typeof btn === 'string' ? thisbtn = document.getElementById(btn) : thisBtn = btn;
|
|
allPages.forEach((page) => {
|
|
page.classList.add('hide-completely')
|
|
})
|
|
allTabs.forEach((tab) => {
|
|
tab.classList.remove('active')
|
|
})
|
|
document.getElementById(page).classList.remove('hide-completely')
|
|
thisBtn.classList.add('active', 'shrink')
|
|
if (page === 'send_token') {
|
|
document.getElementById('deposit_page_btn').classList.remove('shrink')
|
|
}
|
|
}
|
|
|
|
let balDisplay = document.getElementById('token_balance'),
|
|
userFloId = 'FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX';
|
|
function checkBalance() {
|
|
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?floAddress=${userFloId}&token=rupee`)
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log('Looks like there was a problem. Status Code: ' +
|
|
response.status);
|
|
return;
|
|
}
|
|
// Examine the text in the response
|
|
response.json().then(function (data) {
|
|
balDisplay.textContent = data.balance;
|
|
});
|
|
}
|
|
)
|
|
.catch(function (err) {
|
|
console.log('Fetch Error :-S', err);
|
|
});
|
|
}
|
|
|
|
// exchange execute option functions
|
|
|
|
function buyCrypto(btn) {
|
|
let parentPopup = btn.closest('.popup'),
|
|
selectedCrypto = parentPopup.querySelector("input[name='crypto']:checked").value,
|
|
selectedCurrency = parentPopup.querySelector("input[name='currency']:checked").value,
|
|
buyWorth = parentPopup.querySelector('.input input').value;
|
|
console.log(selectedCrypto, selectedCurrency, buyWorth)
|
|
btnLoading(btn, 'start')
|
|
|
|
//if operation completes{
|
|
setTimeout(() => {
|
|
btnLoading(btn, 'stop')
|
|
hidePopup(parentPopup)
|
|
notify('', 'Bought Crypto')
|
|
}, 1000)
|
|
//}
|
|
/*else{
|
|
notify('error', 'Error message')
|
|
}*/
|
|
}
|
|
|
|
|
|
function signIn(btn) {
|
|
let parentPopup = btn.closest('form');
|
|
btnLoading(btn, 'start')
|
|
|
|
//if operation completes{
|
|
setTimeout(() => {
|
|
btnLoading(btn, 'stop')
|
|
hidePopup(parentPopup)
|
|
notify('', 'Signed In')
|
|
document.querySelector('main').classList.remove('hide-completely')
|
|
document.getElementById('deposit_page_btn').click()
|
|
}, 1000)
|
|
//}
|
|
}
|
|
|
|
function signOut() {
|
|
askConfirmation('Do you want to sign out?').then((result) => {
|
|
if (result) {
|
|
notify('', 'Signed out')
|
|
document.querySelector('main').classList.add('hide-completely')
|
|
showPopup('sign_in_popup')
|
|
}
|
|
})
|
|
}
|
|
checkBalance()
|
|
</script>
|
|
</body>
|
|
|
|
</html> |