1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audits - Equalify</title>
</head>
<body>
<header>
<nav aria-label="Main">
<ul>
<li><a href="#" aria-current="page">Audits</a></li>
<li><a href="#">Logs</a></li>
<li><a href="18-account.html">Account</a></li>
</ul>
</nav>
</header>
<main>
<h1>Audits</h1>
<nav aria-label="Audits Page">
<a href="#">New Audit</a>
</nav>
<article>
<h2>All Audits</h2>
<input type="checkbox" name="toggle" id="toggle_view_options" />
<script>
document.addEventListener("DOMContentLoaded", function () {
const viewOptions = document.getElementById("view_options");
const toggleViewOptions = document.getElementById("toggle_view_options");
// Hide view options by default
viewOptions.style.display = "none";
viewOptions.setAttribute("aria-hidden", "true");
// Toggle visibility on checkbox change
toggleViewOptions.addEventListener("change", function () {
if (toggleViewOptions.checked) {
viewOptions.style.display = "block";
viewOptions.setAttribute("aria-hidden", "false");
} else {
viewOptions.style.display = "none";
viewOptions.setAttribute("aria-hidden", "true");
}
});
});
</script>
<label for="toggle_view_options">
Show View Options
</label>
<section id="view_options">
<h3>View Options</h3>
<form>
<div role="group" aria-labelledby="search-group">
<h4 id="search-group">Search</h4>
<label for="search">Audit Name:</label>
<input type="text" id="search">
</div>
<div role="group" aria-labelledby="sort-group">
<h4 id="sort-group">Sort</h4>
<input id="sort-az" name="sort" type="radio" checked>
<label for="sort-az">Audit Name (A to Z)</label>
<input id="sort-za" name="sort" type="radio">
<label for="sort-za">Audit Name (Z to A)</label>
<input id="sort-progress-best" name="sort" type="radio">
<label for="sort-progress-best">Progress (Best to Worst)</label>
<input id="sort-progress-worst" name="sort" type="radio">
<label for="sort-progress-worst">Progress (Worst to Best)</label>
<input id="sort-created-latest" name="sort" type="radio">
<label for="sort-created-latest">Created (Latest to Oldest)</label>
<input id="sort-created-oldest" name="sort" type="radio">
<label for="sort-created-oldest">Created (Oldest to Latest)</label>
<input id="sort-run-latest" name="sort" type="radio">
<label for="sort-run-latest">Last Run (Latest to Oldest)</label>
<input id="sort-run-oldest" name="sort" type="radio">
<label for="sort-run-oldest"> Last Run (Oldest to Latest)</label>
</div>
<button>Save View Options</button>
</form>
</section>
<section>
<h3>Audits Table</h3>
<input id="all-audits" type="checkbox" class="select_all"> <label for="all-audits">Select All Audits</label>
<table>
<thead>
<tr>
<th>Name</th>
<th>Pages</th>
<th>Progress</th>
<th>Status</th>
<th>Created</th>
<th>Last Run</th>
</tr>
</thead>
<tbody>
<tr>
<th role="rowheader"><input id="audit-1" type="checkbox"> <label for="audit-1"><a href="#">Lucy's Audit</a></label></th>
<td>2</td>
<td>0% Equalified</td>
<td>Idle</td>
<td>12-1-24 at 02:19:34</td>
<td>12-1-24 at 02:20:21</td>
</tr>
</tbody>
</table>
<nav aria-label="Audits Table">
<label for="item-count">Showing 1 of 1 Audits. Change Number of Audits Displayed:</label>
<select id="item-count">
<option selected>Up to 5</option>
</select>
</nav>
<script>
document.querySelectorAll('.select_all').forEach(selectAllCheckbox => {
selectAllCheckbox.addEventListener('change', function() {
const parent = this.closest('div, table, details, section');
const checkboxes = parent.querySelectorAll('input[type="checkbox"]:not(.select_all)');
checkboxes.forEach(checkbox => checkbox.checked = this.checked);
});
});
</script>
</section>
<section>
<h3>Manage Selected Audits</h3>
<nav aria-label="Manage Selected Audits">
<button>Run Audit</button>
</nav>
</section>
</article>
</main>
</body>
</html>