You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.0 KiB
87 lines
3.0 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Serial Information</title>
|
||
|
|
<!-- Required meta tags -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
|
||
|
|
<!-- Bootstrap CSS -->
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h1>Serial Information</h1>
|
||
|
|
|
||
|
|
<!-- Button group for filtering -->
|
||
|
|
<div class="btn-group mb-3">
|
||
|
|
<button type="button" class="btn btn-primary filter" data-filter="all">All</button>
|
||
|
|
<button type="button" class="btn btn-primary filter" data-filter="serial001">Serial 001</button>
|
||
|
|
<button type="button" class="btn btn-primary filter" data-filter="serial002">Serial 002</button>
|
||
|
|
<button type="button" class="btn btn-primary filter" data-filter="serial003">Serial 003</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="table table-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Serial Number</th>
|
||
|
|
<th>Description</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr class="filter-item serial001">
|
||
|
|
<td>001</td>
|
||
|
|
<td><a href="#">Serial 001 Information</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="filter-item serial002">
|
||
|
|
<td>002</td>
|
||
|
|
<td><a href="#">Serial 002 Information</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="filter-item serial003">
|
||
|
|
<td>003</td>
|
||
|
|
<td><a href="#">Serial 003 Information</a></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="card h-100">
|
||
|
|
<img src="{{ item.image }}" class="card-img-top" alt="{{ item.title }}">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title"><a href="{{ item.href }}">{{ item.title }}</a></h5>
|
||
|
|
<p class="card-text">{{ item.description }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<small class="text-muted">{{ item.date }}</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper-base.min.js"
|
||
|
|
integrity="sha384-GCUZeyb8ZgWw+/sO62C/NzCHQvT8CZTVSd8zRn77mDyBkGyMUwzA8bjoCIp1afmU"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
|
||
|
|
integrity="sha384-LofhOvz9f0uYN7V+eLhqJF7iG0QikIKgv7VYlWlqAz7VX9/ZLyya0TpRG2x/sxIS"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<!-- Filter logic with jQuery -->
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('.filter').click(function() {
|
||
|
|
var filter = $(this).data('filter');
|
||
|
|
if (filter == 'all') {
|
||
|
|
$('.filter-item').show();
|
||
|
|
} else {
|
||
|
|
$('.filter-item').hide();
|
||
|
|
$('.' + filter).show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|