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