@@ -22,4 +22,51 @@ <h1 class="header-text">2024 All Parking Violations</h1>
2222 </ header >
2323 < div class ="separator-bar "> </ div >
2424
25- < html >
25+ < main class ="container ">
26+ < section class ="table-section ">
27+ < h2 class ="section-title "> 2024 Parking Summonses</ h2 >
28+ < p class ="section-description "> Explore 2024 parking violations by street name or violation type.</ p >
29+
30+ < div class ="table-controls ">
31+ < div class ="search-box ">
32+ < input type ="text " id ="searchInput " placeholder ="Search Street Name.. " class ="search-input ">
33+ </ div >
34+
35+ < div class ="dropdown-container ">
36+ < button id ="violationDropdownBtn " class ="dropdown-btn "> Filter by Violation ▼</ button >
37+ < div id ="violationDropdown " class ="dropdown-menu " style ="display: none; ">
38+ < div class ="dropdown-header ">
39+ < button id ="selectAllBtn " class ="select-btn "> Select All</ button >
40+ < button id ="deselectAllBtn " class ="select-btn "> Deselect All</ button >
41+ </ div >
42+ < div id ="violationCheckboxes " class ="violation-checkboxes ">
43+ <!-- Checkboxes will be generated here -->
44+ </ div >
45+ </ div >
46+ </ div >
47+
48+ < div class ="filter-info ">
49+ < span > Showing < span id ="rowCount "> 0</ span > of < span id ="totalCount "> 0</ span > violations</ span >
50+ </ div >
51+ </ div >
52+
53+ < div class ="table-wrapper ">
54+ < table id ="dataTable " class ="data-table ">
55+ < thead id ="tableHead ">
56+ <!-- Headers will be generated from CSV -->
57+ </ thead >
58+ < tbody id ="tableBody ">
59+ <!-- Data will be populated here -->
60+ </ tbody >
61+ </ table >
62+ </ div >
63+
64+ < div class ="table-footer ">
65+ < p class ="no-results " id ="noResults " style ="display: none; "> No violations found matching your search.</ p >
66+ </ div >
67+ </ section >
68+ </ main >
69+
70+ < script src ="searchable-table.js "> </ script >
71+ </ body >
72+ </ html >
0 commit comments