-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (253 loc) · 14.4 KB
/
index.html
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hogwarts Students</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="robots" content="noindex, nofollow" />
</head>
<body>
<header>
<section id="hero">
<h1>Hacking Hogwarts</h1>
</section>
<nav>
<ul>
<li><a href="#" id="hack">EMMANUEL DON'T DO IT</a></li>
</ul>
</nav>
</header>
<main>
<div class="info_btn" data-popup="closed">
<div class="info_trigger">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_58_1510)">
<path
d="M12.5 24.3115C15.6826 24.3115 18.7348 23.0472 20.9853 20.7968C23.2357 18.5464 24.5 15.4941 24.5 12.3115C24.5 9.12893 23.2357 6.07668 20.9853 3.82624C18.7348 1.57581 15.6826 0.311523 12.5 0.311523C9.3174 0.311523 6.26516 1.57581 4.01472 3.82624C1.76428 6.07668 0.5 9.12893 0.5 12.3115C0.5 15.4941 1.76428 18.5464 4.01472 20.7968C6.26516 23.0472 9.3174 24.3115 12.5 24.3115V24.3115ZM13.895 10.1935L12.395 17.251C12.29 17.761 12.4385 18.0505 12.851 18.0505C13.142 18.0505 13.5815 17.9455 13.88 17.6815L13.748 18.3055C13.3175 18.8245 12.368 19.2025 11.5505 19.2025C10.496 19.2025 10.0475 18.5695 10.3385 17.224L11.4455 12.022C11.5415 11.5825 11.4545 11.4235 11.015 11.317L10.3385 11.1955L10.4615 10.624L13.8965 10.1935H13.895ZM12.5 8.56152C12.1022 8.56152 11.7206 8.40349 11.4393 8.12218C11.158 7.84088 11 7.45935 11 7.06152C11 6.6637 11.158 6.28217 11.4393 6.00086C11.7206 5.71956 12.1022 5.56152 12.5 5.56152C12.8978 5.56152 13.2794 5.71956 13.5607 6.00086C13.842 6.28217 14 6.6637 14 7.06152C14 7.45935 13.842 7.84088 13.5607 8.12218C13.2794 8.40349 12.8978 8.56152 12.5 8.56152V8.56152Z"
fill="#E4D3A0"
/>
</g>
<defs>
<clipPath id="clip0_58_1510">
<rect width="24" height="24" fill="white" transform="translate(0.5 0.311523)" />
</clipPath>
</defs>
</svg>
<span>Info</span>
</div>
<div class="info_content">
<article>
<h4>General:</h4>
<p data-info="total_students">Total Students: <span></span></p>
<p data-info="displayed_students">Students Displayed: <span></span></p>
<p data-info="expelled_students">Expelled Students: <span></span></p>
</article>
<article>
<h4>Students in:</h4>
<p data-info="gryffindor">Griffyndor: <span></span></p>
<p data-info="slytherin">Slytherin: <span></span></p>
<p data-info="hufflepuff">Hufflepuff: <span></span></p>
<p data-info="ravenclaw">Ravenclaw: <span></span></p>
</article>
</div>
</div>
<div id="opt_relative">
<aside id="options">
<div class="sort_btn" data-popup="closed">
<div class="sort_trigger">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4D3A0" />
<rect x="6.24023" y="7.35901" width="2.03287" height="11.756" fill="#4C111F" />
<rect x="10.9836" y="4.88498" width="2.03287" height="14.2301" fill="#4C111F" />
<rect x="15.7269" y="9.62833" width="2.03287" height="9.4867" fill="#4C111F" /></svg
><span>Sort</span>
</div>
<form>
<div class="sort_dir">
<input type="radio" id="sort_a-z" checked name="sort-op_dir" value="a-z" />
<label for="sort_a-z">a-z</label>
<input type="radio" id="sort_z-a" name="sort-op_dir" value="z-a" />
<label for="sort_z-a">z-a</label>
</div>
<div>
<input type="radio" checked id="sort_first-name" name="sort_option" value="firstName" />
<label for="sort_first-name">First name</label>
</div>
<div>
<input type="radio" id="sort_last-name" name="sort_option" value="lastName" />
<label for="sort_last-name">Last name</label>
</div>
<div>
<input type="radio" id="sort_house" name="sort_option" value="house" />
<label for="sort_house">House</label>
</div>
</form>
</div>
<div class="filter_btn" data-popup="closed">
<div class="filter_trigger">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4D3A0" />
<path
d="M13.0663 19.1933C13.1883 19.1335 13.2911 19.0407 13.3631 18.9254C13.4351 18.8102 13.4735 18.6771 13.4737 18.5412V14.6211C13.4737 14.4281 13.5511 14.2424 13.6896 14.1053L18.1999 9.64447C18.3365 9.50961 18.445 9.34899 18.5191 9.17192C18.5932 8.99485 18.6315 8.80484 18.6317 8.61288V6.72949C18.6313 6.63318 18.6119 6.5379 18.5747 6.44909C18.5374 6.36028 18.483 6.27968 18.4146 6.21193C18.3461 6.14417 18.265 6.09057 18.1758 6.05421C18.0866 6.01785 17.9911 5.99943 17.8948 6.00001H6.10526C5.69778 6.00001 5.36841 6.3257 5.36841 6.72949V8.61288C5.36841 8.99972 5.52388 9.37109 5.8002 9.64447L10.3105 14.1053C10.3788 14.1728 10.4331 14.2531 10.4701 14.3416C10.5072 14.4301 10.5263 14.5252 10.5263 14.6211V19.2707C10.5263 19.8122 11.1026 20.1645 11.5926 19.922L13.0663 19.1933Z"
fill="#4C111F"
/>
</svg>
<span>Filter</span>
</div>
<form>
<div>
<input type="radio" id="filter_none" name="filter_opt" checked value="none" />
<label for="filter_none">None</label>
</div>
<div>
<input type="radio" id="filter_prefects" name="filter_opt" value="prefects" />
<label for="filter_prefects">Prefects</label>
</div>
<div>
<input type="radio" id="filter_inquisition" name="filter_opt" value="inquisition" />
<label for="filter_inquisition">Inquisition Squad</label>
</div>
<div>
<input type="radio" id="filter_expelled" name="filter_opt" value="expelled" />
<label for="filter_expelled">Expelled Students</label>
</div>
<div>
<input type="radio" id="filter_gryffindor" name="filter_opt" value="gryffindor" />
<label for="filter_gryffindor">Gryffindor</label>
</div>
<div>
<input type="radio" id="filter_slytherin" name="filter_opt" value="slytherin" />
<label for="filter_slytherin">Slytherin</label>
</div>
<div>
<input type="radio" id="filter_hufflepuff" name="filter_opt" value="hufflepuff" />
<label for="filter_hufflepuff">Hufflepuff</label>
</div>
<div>
<input type="radio" id="filter_ravenclaw" name="filter_opt" value="ravenclaw" />
<label for="filter_ravenclaw">Ravenclaw</label>
</div>
</form>
</div>
<div class="search_btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4D3A0" />
<path
d="M18.9579 17.9937L14.4132 13.449C15.1185 12.5372 15.5 11.4225 15.5 10.25C15.5 8.84648 14.9522 7.53049 13.9617 6.53824C12.9712 5.546 11.6517 5 10.25 5C8.84823 5 7.52874 5.54775 6.53824 6.53824C5.546 7.52874 5 8.84648 5 10.25C5 11.6517 5.54775 12.9712 6.53824 13.9617C7.52874 14.954 8.84648 15.5 10.25 15.5C11.4225 15.5 12.5355 15.1185 13.4472 14.415L17.9919 18.9579C18.0053 18.9713 18.0211 18.9819 18.0385 18.9891C18.0559 18.9963 18.0746 19 18.0934 19C18.1123 19 18.131 18.9963 18.1484 18.9891C18.1658 18.9819 18.1816 18.9713 18.1949 18.9579L18.9579 18.1967C18.9713 18.1834 18.9819 18.1675 18.9891 18.1501C18.9963 18.1327 19 18.114 19 18.0952C19 18.0763 18.9963 18.0577 18.9891 18.0403C18.9819 18.0228 18.9713 18.007 18.9579 17.9937ZM13.022 13.022C12.28 13.7622 11.2965 14.17 10.25 14.17C9.20348 14.17 8.21999 13.7622 7.47799 13.022C6.73774 12.28 6.32999 11.2965 6.32999 10.25C6.32999 9.20348 6.73774 8.21824 7.47799 7.47799C8.21999 6.73774 9.20348 6.32999 10.25 6.32999C11.2965 6.32999 12.2817 6.73599 13.022 7.47799C13.7622 8.21999 14.17 9.20348 14.17 10.25C14.17 11.2965 13.7622 12.2817 13.022 13.022Z"
fill="#4C111F"
/>
</svg>
<form action="#">
<label for="search">Search</label>
<input type="text" id="search" name="search" />
</form>
</div>
</aside>
</div>
<div id="students_container" class="grid_3-1">
<section id="students"></section>
<aside id="info">
<div class="info_title">
<svg width="35" height="37.5" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_58_1538)">
<path
d="M12 24.3115C15.1826 24.3115 18.2348 23.0472 20.4853 20.7968C22.7357 18.5464 24 15.4941 24 12.3115C24 9.12893 22.7357 6.07668 20.4853 3.82624C18.2348 1.57581 15.1826 0.311523 12 0.311523C8.8174 0.311523 5.76516 1.57581 3.51472 3.82624C1.26428 6.07668 0 9.12893 0 12.3115C0 15.4941 1.26428 18.5464 3.51472 20.7968C5.76516 23.0472 8.8174 24.3115 12 24.3115V24.3115ZM13.395 10.1935L11.895 17.251C11.79 17.761 11.9385 18.0505 12.351 18.0505C12.642 18.0505 13.0815 17.9455 13.38 17.6815L13.248 18.3055C12.8175 18.8245 11.868 19.2025 11.0505 19.2025C9.996 19.2025 9.5475 18.5695 9.8385 17.224L10.9455 12.022C11.0415 11.5825 10.9545 11.4235 10.515 11.317L9.8385 11.1955L9.9615 10.624L13.3965 10.1935H13.395ZM12 8.56152C11.6022 8.56152 11.2206 8.40349 10.9393 8.12218C10.658 7.84088 10.5 7.45935 10.5 7.06152C10.5 6.6637 10.658 6.28217 10.9393 6.00086C11.2206 5.71956 11.6022 5.56152 12 5.56152C12.3978 5.56152 12.7794 5.71956 13.0607 6.00086C13.342 6.28217 13.5 6.6637 13.5 7.06152C13.5 7.45935 13.342 7.84088 13.0607 8.12218C12.7794 8.40349 12.3978 8.56152 12 8.56152V8.56152Z"
fill="#DDCD9F"
/>
</g>
<defs>
<clipPath id="clip0_58_1538">
<rect width="24" height="24" fill="white" transform="translate(0 0.311523)" />
</clipPath>
</defs>
</svg>
<h3>Info</h3>
</div>
<article>
<h4>General:</h4>
<p data-info="total_students">Total Students: <span></span></p>
<p data-info="displayed_students">Students Displayed: <span></span></p>
<p data-info="expelled_students">Expelled Students: <span></span></p>
</article>
<article>
<h4>Students in:</h4>
<p data-info="gryffindor">Griffyndor: <span></span></p>
<p data-info="slytherin">Slytherin: <span></span></p>
<p data-info="hufflepuff">Hufflepuff: <span></span></p>
<p data-info="ravenclaw">Ravenclaw: <span></span></p>
</article>
</aside>
</div>
<div id="popup_parent"></div>
<div class="notifications"></div>
</main>
<footer></footer>
<template id="popup_temp">
<div class="overlay">
<article class="student grid_3-2">
<div class="popup_content-left">
<div>
<img src="images/default.png" alt="student" class="portrait" />
</div>
<div>
<span class="label" data-label="first_name">First name:</span>
<h3 data-name-order="first" class="name"></h3>
<span class="label" data-label="middle_name">Middle name:</span>
<p data-name-order="middle" class="name"></p>
<span class="label" data-label="last_name">Last name:</span>
<p data-name-order="last" class="name"></p>
<span class="label" data-label="nick_name">Nickname: </span>
<p data-name-order="nick_name" class="name"></p>
</div>
<div>
<span class="label" data-label="blood-status">Blood-status:</span>
<p data-blood="blood" class="name"></p>
<span class="label" data-label="house">House:</span>
<p data-house="house" class="name"></p>
</div>
<div class="badges_container"><img src="" alt="banner" class="banner" /></div>
</div>
<div id="actions">
<a href="#" class="btn" data-action="prefect">Choose as Prefect</a>
<a href="#" class="btn" data-action="squad">Recruit to Inquisition Squad</a>
<a href="#" class="btn" data-action="expell">Expell Student</a>
<a href="#" class="btn" data-action="cancel">Cancel</a>
</div>
</article>
</div>
</template>
<template id="student_temp">
<article class="student grid_2-5">
<div>
<img src="images/default.png" alt="student" class="portrait" />
<span class="label" data-label="nick_name">Nickname: </span>
<p data-name-order="nick_name" class="name"></p>
</div>
<div class="flex_space-between">
<div>
<span class="label" data-label="first_name">First name:</span>
<h3 data-name-order="first" class="name"></h3>
<span class="label" data-label="middle_name">Middle name:</span>
<p data-name-order="middle" class="name"></p>
<span class="label" data-label="last_name">Last name:</span>
<p data-name-order="last" class="name"></p>
</div>
<div class="badges_container">
<img src="" alt="banner" class="banner" />
</div>
</div>
<div>
<div>
<span class="label" data-label="house">House:</span>
<p data-house="house" class="name"></p>
</div>
<a href="#" class="btn" data-stud-id="">See more</a>
</div>
</article>
</template>
<!-- Use type module so I can use many JS files and only declare one. Also makes the order of the files irrelevant -->
<script type="module" src="main.js"></script>
</body>
</html>