blueAI / flask-project /templates /leaderboard.html
ruchi
HTML templates with leaderboard for Atul
ceb518e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>BLUE AI</title>
<!-- Fav Icon -->
<link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link href="../static/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/css/flaticon.css" rel="stylesheet">
<link href="../static/css/owl.css" rel="stylesheet">
<link href="../static/css/bootstrap.css" rel="stylesheet">
<link href="../static/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">
<link href="../static/css/nice-select.css" rel="stylesheet">
<link href="../static/css/elpath.css" rel="stylesheet">
<link href="../static/css/color/theme-color.css" id="jssDefault" rel="stylesheet">
<link href="../static/css/switcher-style.css" rel="stylesheet">
<link href="../static/css/rtl.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<link href="../static/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/css/module-css/contact.css" rel="stylesheet">
<link href="../static/css/module-css/subscribe.css" rel="stylesheet">
<link href="../static/css/responsive.css" rel="stylesheet">
</head>
<!-- page wrapper -->
<body>
<div class="boxed_wrapper ltr">
<!-- preloader -->
<div class="loader-wrap">
<div class="preloader">
<div class="preloader-close">close</div>
<div id="handle-preloader" class="handle-preloader">
<div class="animation-preloader">
<div class="spinner"></div>
<div class="txt-loading">
<span data-text-preloader="b" class="letters-loading">
b
</span>
<span data-text-preloader="l" class="letters-loading">
l
</span>
<span data-text-preloader="u" class="letters-loading">
u
</span>
<span data-text-preloader="e" class="letters-loading">
e
</span>
<span data-text-preloader="a" class="letters-loading">
a
</span>
<span data-text-preloader="i" class="letters-loading">
i
</span>
</div>
</div>
</div>
</div>
</div>
<!-- preloader end -->
<!-- page-direction -->
<div class="page_direction">
<div class="demo-rtl direction_switch"><button class="rtl">RTL</button></div>
<div class="demo-ltr direction_switch"><button class="ltr">LTR</button></div>
</div>
<!-- page-direction end -->
<!-- switcher menu -->
<div class="switcher">
<div class="switch_btn">
<button><i class="fas fa-palette"></i></button>
</div>
<div class="switch_menu">
<!-- color changer -->
<div class="switcher_container">
<ul id="styleOptions" title="switch styling">
<li>
<a href="javascript: void(0)" data-theme="theme-color" class="theme-color"></a>
</li>
<li>
<a href="javascript: void(0)" data-theme="pink" class="pink-color"></a>
</li>
<li>
<a href="javascript: void(0)" data-theme="violet" class="violet-color"></a>
</li>
<li>
<a href="javascript: void(0)" data-theme="crimson" class="crimson-color"></a>
</li>
<li>
<a href="javascript: void(0)" data-theme="orange" class="orange-color"></a>
</li>
</ul>
</div>
</div>
</div>
<!-- end switcher menu -->
<!-- main header -->
<header class="main-header">
<!-- header-top -->
<div class="header-top">
<div class="large-container">
<div class="top-inner">
<ul class="links-list clearfix">
</ul>
<ul class="info-list clearfix">
{% if session['userName'] %}
<li>
<i class="icon-1"></i>
<a href="mailto:{{session['userName']}}">{{session['userName']}}</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<!-- header-lower -->
<div class="header-lower">
<div class="large-container">
<div class="outer-box">
<div class="logo-box">
<div class="shape"></div>
<figure class="logo"><a href="/"><img src="../static/images/logo.png" alt=""></a></figure>
</div>
<div class="menu-area">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</div>
<nav class="main-menu navbar-expand-md navbar-light clearfix">
<div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li><a href="index.html">Home</a>
</li>
<li><a href="newGame.html">Play</a></li>
<li class="current"><a href="leaderboard.html">Leaderboard</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="menu-right-content ml_70">
<a href="/login" class="theme-btn btn-two mr_20">Login</a>
<a href="/register" class="theme-btn btn-one">Register Your Team</a>
</div>
</div>
</div>
</div>
</div>
<!--sticky Header-->
<div class="sticky-header">
<div class="large-container">
<div class="outer-box">
<div class="logo-box">
<div class="shape"></div>
<figure class="logo"><a href="/"><img src="../static/images/logo.png" alt=""></a></figure>
</div>
<div class="menu-area">
<nav class="main-menu clearfix">
<!--Keep This Empty / Menu will come through Javascript-->
</nav>
<div class="menu-right-content ml_70">
<a href="/login" class="theme-btn btn-two mr_20">Login</a>
<a href="/register" class="theme-btn btn-one">Register Your Team</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- main-header end -->
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="menu-backdrop"></div>
<div class="close-btn"><i class="fas fa-times"></i></div>
<nav class="menu-box">
<div class="nav-logo"><a href="/"><img src="../static/images/logo.png" alt="" title=""></a></div>
<div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
<div class="contact-info">
<h4>Contact Info</h4>
<ul>
<li>Chicago 12, Melborne City, USA</li>
<li><a href="tel:+8801682648101">+88 01682648101</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div class="social-links">
<ul class="clearfix">
<li><a href="/"><span class="fab fa-twitter"></span></a></li>
<li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
<li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
<li><a href="/"><span class="fab fa-instagram"></span></a></li>
<li><a href="/"><span class="fab fa-youtube"></span></a></li>
</ul>
</div>
</nav>
</div><!-- End Mobile Menu -->
<!-- contact-section -->
<section class="contact-section pt_120 pb_120">
<div class="auto-container">
<div class="sec-title centred mb_70">
<h2>LEADERBOARD</h2>
</div>
<div id='table'>
<!-- Filter Inputs for each column -->
<div class="row mb-3">
<div class="col-md-2">
<input type="text" id="filterRank" class="form-control" placeholder="Filter by Rank">
</div>
<div class="col-md-2">
<input type="text" id="filterTeamName" class="form-control" placeholder="Filter by Team Name">
</div>
<div class="col-md-2">
<input type="text" id="filterProductName" class="form-control" placeholder="Filter by Product Name">
</div>
<div class="col-md-2">
<input type="text" id="filterProductType" class="form-control" placeholder="Filter by Product Type">
</div>
<div class="col-md-2">
<input type="text" id="filterTown" class="form-control" placeholder="Filter by Town">
</div>
<div class="col-md-2">
<input type="text" id="filterSubscribers" class="form-control" placeholder="Filter by Subscribers Count">
</div>
</div>
<!-- Bootstrap Table -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Team Name</th>
<th scope="col">Product Name</th>
<th scope="col">Product Type</th>
<th scope="col">Town</th>
<th scope="col">Subscribers Count</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Example Rows -->
<tr>
<td>1</td>
<td>Team Alpha</td>
<td>Product X</td>
<td>Software</td>
<td>New York</td>
<td>5000</td>
</tr>
<tr>
<td>2</td>
<td>Team Beta</td>
<td>Product Y</td>
<td>Hardware</td>
<td>Los Angeles</td>
<td>3000</td>
</tr>
<!-- Additional rows will go here -->
</tbody>
</table>
</div>
</div>
</section>
<!-- contact-section end -->
<!-- main-footer -->
<footer class="main-footer">
<div class="widget-section">
<div class="pattern-layer">
<div class="pattern-1" style="background-image: url(../static/images/shape/shape-8.png);"></div>
<div class="pattern-2" style="background-image: url(../static/images/shape/shape-9.png);"></div>
</div>
<div class="auto-container">
<div class="row clearfix">
<div class="col-lg-3 col-md-6 col-sm-12 footer-column">
<div class="footer-widget logo-widget">
<figure class="footer-logo"><a href="/"><img src="../static/images/logo-2.png" alt=""></a></figure>
<p>Blue AI presents GAIM. The ultimate marketing simulation tool</p>
<ul class="social-links">
<li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="/"><i class="fab fa-twitter"></i></a></li>
<li><a href="/"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom centred">
<div class="auto-container">
<div class="copyright"><p>Copyright 2024 by <a href="/">Blue AI</a>. All Right Reserved.</p></div>
</div>
</div>
</footer>
<!-- main-footer end -->
<!--Scroll to top-->
<div class="scroll-to-top">
<div>
<div class="scroll-top-inner">
<div class="scroll-bar">
<div class="bar-inner"></div>
</div>
<div class="scroll-bar-text">Go To Top</div>
</div>
</div>
</div>
<!-- Scroll to top end -->
</div>
<!-- jequery plugins -->
<script src="../static/js/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/owl.js"></script>
<script src="../static/js/wow.js"></script>
<script src="../static/js/validation.js"></script>
<script src="../static/js/jquery.fancybox.js"></script>
<script src="../static/js/appear.js"></script>
<script src="../static/js/isotope.js"></script>
<script src="../static/js/parallax-scroll.js"></script>
<script src="../static/js/jquery.nice-select.min.js"></script>
<script src="../static/js/jQuery.style.switcher.min.js"></script>
<!-- main-js -->
<script src="../static/js/script.js"></script>
<!-- jQuery for filtering functionality -->
<script>
$(document).ready(function() {
// Function to filter the table based on input fields
function filterTable() {
var rank = $('#filterRank').val().toLowerCase();
var teamName = $('#filterTeamName').val().toLowerCase();
var productName = $('#filterProductName').val().toLowerCase();
var productType = $('#filterProductType').val().toLowerCase();
var town = $('#filterTown').val().toLowerCase();
var subscribers = $('#filterSubscribers').val().toLowerCase();
$('#tableBody tr').filter(function() {
$(this).toggle(
$(this).find('td:nth-child(1)').text().toLowerCase().indexOf(rank) > -1 &&
$(this).find('td:nth-child(2)').text().toLowerCase().indexOf(teamName) > -1 &&
$(this).find('td:nth-child(3)').text().toLowerCase().indexOf(productName) > -1 &&
$(this).find('td:nth-child(4)').text().toLowerCase().indexOf(productType) > -1 &&
$(this).find('td:nth-child(5)').text().toLowerCase().indexOf(town) > -1 &&
$(this).find('td:nth-child(6)').text().toLowerCase().indexOf(subscribers) > -1
);
});
}
// Apply filter on input change
$('#filterRank, #filterTeamName, #filterProductName, #filterProductType, #filterTown, #filterSubscribers').on('keyup', filterTable);
});
</script>
</body><!-- End of .page_wrapper -->
</html>