fund page
unknown
plain_text
2 years ago
14 kB
5
Indexable
<%- include('layouts/htmlHeader.ejs') %> <style> input[type="number"]::placeholder { /* Firefox, Chrome, Opera */ text-align: center; } .font-style{ font-size: 13px; font-weight: bold !important; } .font-style-thin{ font-size: 30px; font-weight: 400 !important; } input[type="radio"] { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */ transform: scale(1.2); accent-color: #0f9cbc; } .selected{ border: 1px solid #0f9cbca1; background-color: #0f9cbc0e; } .selectedBank{ border: 1px solid #0f9cbca1; background-color: #0f9cbc0e; } .custom-text-b-15{ font-size: 15px; font-weight: bold; } </style> <div class="main-content"> <div class="addFundHeader d-flex justify-content-between" style="background-color: #F1F1F6; padding: 1rem 1rem; align-items: center;"> <p class="custom-text-m-15">Securities Wallet</p> <div style="display: flex; flex-direction: column; justify-content: right; text-align: right;"> <p class="custom-text-m-12">Ledger Balance </p> <p id='myTotalFund' style="font-size: 20px;font-weight: 600;">₹ 5000</p> </div> </div> <div class="addFundBody"> <div> <div class="row"> <div class="col-lg-12"> <div class="alert alert-dismissible fade show" id ="msg" style="display: none;margin-top: 25px; margin-bottom: 0px!important;border-radius: 10px; background-color: #fceced;" role="alert"> <!-- <img src="https://i.imgur.com/sOiQr4G.png" alt="alert"> --> <!-- <p id="msg" style="margin-bottom: 0px!important;"></p> --> </div> </div> </div> <div class="addFundBodyPrice"> <p class="custom-text-m-15">Add Funds</p> <div style="display: flex;align-items: center;justify-content: center;"> <p style="font-size: 20px;font-weight: 500;">₹</p> <input type="number" id="amount" name="amount" placeholder="0"> </div> </div> <div class="addFundBodyPriceTag" style=" display: flex; justify-content: center; gap: 0.5rem; padding: 0.7rem 0; "> <span class="badge rounded-pill badge-soft-dark" onclick="add_fund(10000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+10,000</span> <span class="badge rounded-pill badge-soft-dark" onclick="add_fund(25000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+25,000</span> <span class="badge rounded-pill badge-soft-dark" onclick="add_fund(50000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+50,000</span> <span class="badge rounded-pill badge-soft-dark" onclick="add_fund(100000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+100,000</span> </div> </div> <div style="display: flex; flex-direction: column; width: 100%; padding: 1rem 0; gap: 1rem;"> <div class="bankAccountDiv"> <p class="custom-text-b-15" style="margin-bottom: 10px !important;">Bank Account:</p> <label class="selectedBank" id="axisLabel" onclick="bankChangeFn('1')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;"> <div style="display: flex;gap: 0.5rem;align-items: center;"> <div style="display: flex;align-items: center;justify-content: center;width: 50px;"> <img src="https://i.imgur.com/NXoISvn.png" alt="bankAccount" height="30px"> </div> <div> <p style="font-size: 15px; font-weight: 600;">Axis bank</p> <p style="font-size: 15px; font-weight: 600;">************1234</p> </div> </div> <input type="radio" name="bank" id="axis" checked> </label> <label id="federalLabel" onclick="bankChangeFn('2')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;"> <div style="display: flex;gap: 0.5rem;align-items: center;"> <div style="display: flex;align-items: center;justify-content: center;width: 50px;"> <img src="https://i.imgur.com/H2LyFSo.png" alt="bankAccount" height="30px"> </div> <div> <p style="font-size: 15px; font-weight: 600;">Federal bank</p> <p style="font-size: 15px; font-weight: 600;">************1234</p> </div> </div> <input type="radio" name="bank" id="federal"> </label> </div> <div class="paymentDiv"> <p class="custom-text-b-15" style="margin-bottom: 10px !important;">Payment Method</p> <div style="display: flex;flex-direction: column;gap: 0.5rem ;"> <label id="upiLabel" onclick="paymentChangeFn('upi')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;" class="selected"> <div style="display: flex;gap: 0.5rem;align-items: center;"> <div style="display: flex;align-items: center;justify-content: center;width: 50px;"> <img src="https://i.imgur.com/fIOJxrt.png" alt="upi" height="30px"> </div> <p style="font-size: 15px; font-weight: 600;">Via UPI app</p> </div> <input type="radio" name="payment" id="upi" checked> </label> <label id="netBankingLabel" onclick="paymentChangeFn('netBanking')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;"> <div style="display: flex;gap: 0.5rem;align-items: center;"> <div style="display: flex;align-items: center;justify-content: center;width: 50px;"> <img src="https://i.imgur.com/en6ruBp.png" alt="netBanking" height="30px"> </div> <p style="font-size: 15px; font-weight: 600;">Net Banking</p> </div> <input type="radio" name="payment" id="netBanking"> </label> </div> </div> <div class="banksDiv"> <input type="hidden" id="bankname" name="bankname" value="<%- code %>"> </div> <div class="upiDiv add-fund-div-hide"> <p class="custom-text-m-15" style="margin-bottom: 10px !important;">UPI ID</p> <input type="text" class="upiTextInput" id="upi" name="upi"> </div> </div> <div class="btnDivBottom" style="position: absolute;bottom: 0%;width: 100%;left: 0;padding: 2rem 0rem;display: flex;justify-content: center;"> <button class="addFundBtn" onclick="addfund()" id="btndisplay" > Add Funds </button> </div> <div class="childDiv" style="display: none;flex-direction: column;text-align: center;justify-content: center;" id="overlay"> <lottie-player src="https://lottie.host/26a6468c-0598-4d71-b7a6-076ad3e36b6c/jBeEsTL7MM.json" background="transparent" speed="1" style="width: 70px; height: 70px; margin: auto;" loop autoplay></lottie-player> <p class="font-style" style="max-width: 500px;margin-top: 2rem;">Please Wait For Redirect to Payment Gateway..</p> </div> </div> </div> <%- include('layouts/htmlFooter.ejs') %> <script> let selectPickerPaymentDiv = document.querySelector('.selectpickerPayment') selectPickerPaymentDiv.addEventListener('change', function(){ if(selectPickerPaymentDiv.value == 'upi'){ document.querySelector('.banksDiv').classList.toggle('add-fund-div-hide') document.querySelector('.upiDiv').classList.toggle('add-fund-div-hide') }else{ document.querySelector('.banksDiv').classList.toggle('add-fund-div-hide') document.querySelector('.upiDiv').classList.toggle('add-fund-div-hide') } }) </script> <script> function add_fund(amount){ let amountSpan = document.querySelector('#amount') let storeAmount = amountSpan.value || 0 storeAmount = parseFloat(storeAmount) amountSpan.value = storeAmount + amount } // function withdrawal(percentage){ // let fundP = document.querySelector('#myTotalFund') // let myWallet = fundP.innerText; // myWallet = Number(myWallet) // let amount = (Number(percentage) * myWallet)/100 // let amountSpan = document.querySelector('#amount') // amountSpan.value = amount || 0 // } function bankcode() { let bankdetails=$("#bankdetails").val() let formdata={'bankdetails':bankdetails}; $.ajax({ type: "POST", url: "/fund/getbank", contentType:"application/json", dataType:"json", data: JSON.stringify(formdata), // serializes the form's elements. success: function(data) { $("#banknames").val(data.data.name) $("#bankname").val(data.data.code); } }); } </script> <script> function addfund(){ $("#msg").css("display", "none"); $("#msg").html(""); let clientcode=$("#clientcode").val(); let amount=$("#amount").val(); let bankdetails=$("#bankdetails").val(); let acc=bankdetails.split("-"); let account=acc[0]; let ifscode=acc[1]; let payment_type=$("#payment_type").val(); let bankname=$("#bankname").val(); let banknames=$("#banknames").val(); let upi=$("#upi").val(); let data={}; let clientname=$("#clientname").val(); let email=$("#email").val(); let mobile=$("#mobile").val(); let formdata={'clientcode':clientcode, 'amount':amount,'account':account,'ifscode':ifscode,'payment_type':payment_type,'bankname':bankname,'upi':upi,'clientname':clientname,'banknames':banknames,'email':email,'mobile':mobile}; if(amount=="" || amount==undefined || amount=="0") { $("#msg").css("display", "block"); $("#msg").html("Please Enter Amount"); return false; } $.ajax({ type: "POST", url: "/home/payment", contentType:"application/json", dataType:"json", data: JSON.stringify(formdata), // serializes the form's elements. beforeSend: function () { $("#btndisplay").css("display","none"); $("#overlay").css("display","flex"); }, success: function(data) { // $("#overlay").css("display","block"); if(data.status==200) { // $("#overlay").css("display","block"); window.location.replace(data.data); } else { $("#msg").css("display", "block"); $("#msg").html(data.message); setTimeout(function () { location.reload(true); }, 5000); } }, }); } </script> <script> function toggleSelect() { const selectOptions = document.querySelector('.select-options'); selectOptions.style.display = selectOptions.style.display === 'block' ? 'none' : 'block'; } // function selectOption(option) { // let selectedOptionInput = document.querySelector('#selected-option'); // selectedOptionInput.value = option; // let selectHeader = document.querySelector('.select-header'); // selectHeader.innerHTML = option; // toggleSelect(); // } let selectOptions = document.querySelectorAll('.select-options > div') selectOptions.forEach((item)=>{ item.addEventListener('click',()=>{ let selectedOptionInput = document.querySelector('#selected-option'); selectedOptionInput.value = item.innerText; let selectHeader = document.querySelector('.select-header'); selectHeader.innerHTML = item.innerText; toggleSelect(); }) }) </script> <script> function paymentChangeFn(param){ if(param == 'upi'){ document.querySelector('#upiLabel').classList.add('selected'); document.querySelector('#netBankingLabel').classList.remove('selected'); }else{ document.querySelector('#upiLabel').classList.remove('selected'); document.querySelector('#netBankingLabel').classList.add('selected'); } } </script> <script> function bankChangeFn(param){ if(param == '1'){ document.querySelector('#axisLabel').classList.add('selectedBank'); document.querySelector('#federalLabel').classList.remove('selectedBank'); }else{ document.querySelector('#axisLabel').classList.remove('selectedBank'); document.querySelector('#federalLabel').classList.add('selectedBank'); } } </script>
Editor is loading...