110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>User Database</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="scripts.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar">
|
|
<ul class="nav-links">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Users</a></li>
|
|
<li><a href="#">Stuff</a></li>
|
|
<li><a href="#">Things</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="subNavContainer">
|
|
<h1 style="color: #333333; margin: 0.5rem;">User Database</h1>
|
|
<form class="search-form" id="search-form">
|
|
<label for="search">Search:</label>
|
|
<input type="text" id="search" name="search" placeholder="Enter search term...">
|
|
<input type="button" value="Search" onclick="searchUsers()">
|
|
</form>
|
|
<script>
|
|
const searchForm = document.getElementById('search-form');
|
|
searchForm.addEventListener('submit', function (event) {
|
|
event.preventDefault(); // prevent the form from submitting
|
|
|
|
searchUsers();
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- <nav class="subnav">
|
|
<ul class="subnav-links">
|
|
<li><a href="#" class="active">All</a></li>
|
|
<li><a href="#">Alpha</a></li>
|
|
<li><a href="#">Echo</a></li>
|
|
<li><a href="#">NCO</a></li>
|
|
<li><a href="#">RRC</a></li>
|
|
<li><a href="#">HHC</a></li>
|
|
</ul>
|
|
</nav> -->
|
|
|
|
<button id="filterButton" onclick="showFilters()"><img src="filterButton.png" style="height: 30px;"></button>
|
|
|
|
<div id="filter-box" style="display:none;">
|
|
<div>
|
|
<h2 class="subnav-Header">Filters</h2>
|
|
<nav class="subnav">
|
|
<ul class="subnav-links">
|
|
<li><a href="#" class="active">All</a></li>
|
|
<li><a href="#">Alpha</a></li>
|
|
<li><a href="#">Echo</a></li>
|
|
<li><a href="#">NCO</a></li>
|
|
<li><a href="#">RRC</a></li>
|
|
<li><a href="#">HHC</a></li>
|
|
<li><a href="#">Recruit</a></li>
|
|
<li><a href="#">Discharged</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div>
|
|
<h2 class="subnav-Header">Sort</h2>
|
|
<nav class="subnav">
|
|
<ul class="subnav-links">
|
|
<li><a href="#" class="active">None</a></li>
|
|
<li><a href="#">Name</a></li>
|
|
<li><a href="#">Rank</a></li>
|
|
<li><a href="#">Join Date</a></li>
|
|
<li><a href="#">LOA Until</a></li>
|
|
<li><a href="#">Last Active</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<button onclick="showFilters()" style="height: fit-content;">X</button>
|
|
</div>
|
|
<script> function showFilters() {
|
|
var filterBox = document.getElementById("filter-box");
|
|
if (filterBox.style.display === "none") {
|
|
filterBox.style.display = "flex";
|
|
} else {
|
|
filterBox.style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<table id="userTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Member</th>
|
|
<th>Unit</th>
|
|
<th>Rank</th>
|
|
<th>Join Date</th>
|
|
<th>LOA Until</th>
|
|
<th>Last Active</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
</tbody>
|
|
</table>
|
|
<script>
|
|
const allUsers = getUsers();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |