Trade-listing
unknown
plain_text
7 months ago
7.0 kB
1
Indexable
Never
<%- include('../include/header.ejs') %> <style> .hide{ display: none !important; transition: all 0.2s ease-in; } .trade-listing-filter { display: flex; gap: 1rem; padding: 1rem; /* align-items: center; */ } /* .trade-listing-filter button { background-color: #6691e7; padding: 0.8rem 1.5rem !important; outline: none; border: none; border-radius: 8px; color: white; transition: all 0.2s ease-in; } .trade-listing-filter button:hover { background-color: #4d71b9; } .trade-listing-filter input[type="text"],.trade-listing-filter input[type="date"],.trade-listing-filter select { padding: 0.8rem 1.5rem !important; outline: none; border: none; border-radius: 8px; font-size: 15px; border: 1px solid rgba(0, 0, 0, 0.377); cursor: pointer; } */ .rad-label { display: flex; align-items: center; border-radius: 100px; padding: 14px 16px; margin: 10px 0; cursor: pointer; transition: .3s; border: 1px solid transparent !important; } .rad-label p { margin: 0; margin-left: 1rem; } .rad-label:hover { background: hsla(0, 0%, 63%, 0.14); } .rad-label-background { background-color: #00000028; } .rad-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; z-index: -1; } .rad-design { width: 22px; height: 22px; border-radius: 100px; background: linear-gradient(to right bottom, #7088d6, #405189); position: relative; } .rad-design::before { content: ''; display: inline-block; width: inherit; height: inherit; border-radius: inherit; background: hsl(0, 0%, 90%); transform: scale(1.1); transition: .3s; } .rad-input:checked+.rad-design::before { transform: scale(0); } .rad-text { /* color: hsl(0, 0%, 44%); */ margin-left: 14px; font-size: 15px; font-weight: 500; transition: .3s; } /* .rad-input:checked~.rad-text { color: red; } */ </style> </head> <body> <%- include('../include/navbar.ejs') %> <div class="main-content"> <div class="page-content"> <div class="container-fluid"> <!-- start page title --> <div class="row"> <div class="col-12"> <div class="page-title-box d-sm-flex align-items-center justify-content-between"> <h4 class="mb-sm-0">Trading Reports</h4> <div class="page-title-right"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"><a href="javascript: void(0);">Reports</a></li> <li class="breadcrumb-item active">Trading Reports</a></li> </ol> </div> </div> </div> </div> <!-- end page title --> <div class="row"> <form action="#" method="post" class="card trade-listing-filter"> <div class="row d-flex flex-column flex-lg-row"> <div class="col-auto d-flex"> <label class="rad-label rad-label-background"> <input type="radio" class="rad-input" name="rad" value="all" checked> <div class="rad-design"></div> <p class="rad-text">All</p> </label> <label class="rad-label"> <input type="radio" class="rad-input" name="rad" value="client"> <div class="rad-design"></div> <p class="rad-text">NSE</p> </label> <label class="rad-label"> <input type="radio" class="rad-input" name="rad" value="client"> <div class="rad-design"></div> <p class="rad-text">BSE</p> </label> </div> <div class="col-auto d-flex flex-column flex-lg-row gap-3"> <div style="display: flex; flex-direction: column;"> <label for="" class="form-label fw-semibold">Select Client code</label> <input type="text" placeholder="Enter client code" onkeyup="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);" class="clientCodeText"> </div> <div style="display: flex; flex-direction: column;"> <label for="" class="form-label fw-semibold">Date range</label> <input type="text" name="daterange" value="" id="datepicker" /> </div> <div style="display: flex; flex-direction: column;"> <label for="" class="form-label fw-semibold">Select</label> <select name="trade-listing-selector" id="trade-listing-selector"> <option value="Equity">Equity</option> <option value="nsefo">NSE F&O</option> <option value="nsecurder">NSE Currency Derivatives</option> <option value="nsecom">NSE Commodity</option> </select> </div> <div style="display: flex; flex-direction: column;" class="ScritpwiseDiv"> <label for="" class="form-label fw-semibold">Select</label> <select name="trade-listing-selector" id=""> <option value="Equity">Scritpwise</option> <option value="nsefo">Clientwise</option> </select> </div> </div> <div class="col-auto d-flex justify-content-center"> <button class="custom-primary-btn mt-4">Submit</button> </div> </div> </form> </div> </div> </div> </div> </body> <script> const selectElement = document.getElementById("trade-listing-selector"); let ScritpwiseDiv = document.querySelector(".ScritpwiseDiv"); console.log(ScritpwiseDiv); selectElement.addEventListener("change", function() { if (selectElement.value != 'Equity') { ScritpwiseDiv.classList.add('hide') } else { ScritpwiseDiv.classList.remove('hide') } }); </script> <script> const labels = document.querySelectorAll('.rad-label'); labels.forEach(function(item) { item.addEventListener('click', () => { labels.forEach(label => { label.classList.remove('rad-label-background'); }); item.checked = true item.classList.add('rad-label-background') }); }) </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <script> $(function() { $('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) { console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); }); }); </script> <%- include('../include/scripts.ejs') %>