137 lines
5.6 KiB
HTML
137 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Car Inventory</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome for Icons -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
|
<!-- Custom CSS -->
|
|
<style>
|
|
.color-circle {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1px solid #ccc;
|
|
display: inline-block;
|
|
}
|
|
.table-hover tbody tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.badge {
|
|
font-size: 0.9rem;
|
|
}
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
}
|
|
.table thead th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.table tbody td {
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container my-5">
|
|
<h1 class="text-center mb-4">Car Inventory</h1>
|
|
|
|
<!-- Search and Filter Section -->
|
|
<div class="row mb-4 g-3">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text" class="form-control" placeholder="Search by VIN, Make, or Model">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select">
|
|
<option>All Years</option>
|
|
<option>2023</option>
|
|
<option>2022</option>
|
|
<option>2021</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<button class="btn btn-primary w-100"><i class="fas fa-filter"></i> Filter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Car Listing Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Image</th>
|
|
<th>Make & Model</th>
|
|
<th>Year</th>
|
|
<th>VIN</th>
|
|
<th>Exterior Color</th>
|
|
<th>Interior Color</th>
|
|
<th>Location</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Example Row -->
|
|
<tr>
|
|
<td>1</td>
|
|
<td><img src="https://via.placeholder.com/100" alt="Car Image" class="img-thumbnail" style="width: 100px;"></td>
|
|
<td>Toyota Camry</td>
|
|
<td>2023</td>
|
|
<td>1HGCM82633A123456</td>
|
|
<td><span class="color-circle" style="background-color: #0000ff;"></span> Blue</td>
|
|
<td><span class="color-circle" style="background-color: #ffffff;"></span> White</td>
|
|
<td>Main Showroom</td>
|
|
<td><span class="badge bg-success">Available</span></td>
|
|
<td>
|
|
<a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i> View</a>
|
|
<a href="#" class="btn btn-sm btn-outline-warning"><i class="fas fa-edit"></i> Edit</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Add more rows here -->
|
|
<tr>
|
|
<td>2</td>
|
|
<td><img src="https://via.placeholder.com/100" alt="Car Image" class="img-thumbnail" style="width: 100px;"></td>
|
|
<td>Honda Accord</td>
|
|
<td>2022</td>
|
|
<td>1HGCM82633A654321</td>
|
|
<td><span class="color-circle" style="background-color: #ff0000;"></span> Red</td>
|
|
<td><span class="color-circle" style="background-color: #000000;"></span> Black</td>
|
|
<td>Downtown Showroom</td>
|
|
<td><span class="badge bg-warning">Reserved</span></td>
|
|
<td>
|
|
<a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i> View</a>
|
|
<a href="#" class="btn btn-sm btn-outline-warning"><i class="fas fa-edit"></i> Edit</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Page navigation" class="mt-4">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true"><i class="fas fa-chevron-left"></i></a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |