-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
406 lines (389 loc) · 15.1 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>H.A.R.D. Hack | UCSD</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Hard Hack is a UCSD hardware-focused hackathon."
/>
<meta
name="keywords"
content="Hard Hack, UCSD, UCSD Hard Hack, Hard Hack San Diego, Hardware Hackathon, Hard Hack 2023, Hard Hack website, Hard Hack instagram, Hard Hack media, Hard Hack at UCSD, Hard Hack at San Diego, Hackathon, Hackathon UCSD"
/>
<meta name="author" content="Hard Hack" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="fonts.css" />
<link rel="stylesheet" href="./assets/modules/dropdown/dropdown.css" />
<link rel="stylesheet" href="./assets/modules/heading/heading.css" />
<script src="./assets/libs/jquery.min.js"></script>
<script src="index.js"></script>
<script src="./assets/modules/dropdown/dropdown.js"></script>
<script src="./assets/modules/heading/heading.js"></script>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./assets/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./assets/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="./assets/favicon/site.webmanifest" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</head>
<!-- START OF BODY -->
<body>
<div id="menu-bar" class="background-element">
<a href="/index"><span>Home</span></a>
<a href="/sponsors"><span>Sponsor Us</span></a>
<a href="/submissions"><span>Submissions</span></a>
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSfA1I-pSimuTlpifzKSWF5s5FZ08zvofOefbBSUjUbdeaurdg/viewform"
target="_blank"
><span>Submit Your Project</span>
</a>
</div>
<div id="dropdown-menu-bar" class="background-element">
<div
class="hamburger-icon"
style="position: absolute; z-index: 1; right: 0px; margin: 1em 1.5em"
>
<div class="hamburger-bar1"></div>
<div class="hamburger-bar2"></div>
<div class="hamburger-bar3"></div>
</div>
<div
id="dropdown-menu-bar-items"
style="
background-image: url(./assets/images/background.png);
position: relative;
width: 100%;
height: 0px;
overflow: hidden;
"
>
<div>
<div style="height: 68px"></div>
<a href="/index"><p>Home</p></a>
<a href="/sponsors"><p>Sponsor Us</p></a>
<a href="/submissions"><p>Submissions</p></a>
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSfA1I-pSimuTlpifzKSWF5s5FZ08zvofOefbBSUjUbdeaurdg/viewform"
target="_blank"
><p>Submit Your Project</p>
</a>
</div>
</div>
</div>
<div id="background">
<img
class="background-element"
src="./assets/images/hard_hack_small_logo.png"
style="width: 10%; min-width: 50px; top: max(3vh, 20px); left: 20px"
/>
</div>
<div id="cover-page">
<div id="cover-flex">
<div>
<div style="max-height: 60vh; display: flex; flex-direction: column">
<img
class="center"
src="./assets/images/hard_hack_logo.png"
style="
max-height: 400px;
min-height: 157px;
display: block;
flex: 6 6 60%;
width: 50vw;
object-fit: contain;
"
/>
<p
style="
font-size: max(12px, min(2.5vw, min(3vh, 1.25em)));
margin: min(8px, 2vh) auto;
width: min(50vw, 480px);
height: 20%;
flex: 2 2 20%;
"
>
San Diego’s largest<br />hardware focused hackathon
</p>
<h3
id="eventdate"
style="font-size: max(16px, min(2vw, 4vh)); flex: 2 2 20%"
>
April 13 - 14
</h3>
</div>
</div>
</div>
<a
id="apply-link"
href="https://forms.gle/J1aCmrzgfmGcwAFN9"
style="display: block; font-size: min(2.5vh, 1em); position: sticky"
target="_blank"
><button
class="big-button center main-font"
style="font-weight: 700; font-size: max(16px, min(5vw, 1.5em))"
>
Apply Now
</button></a
>
</div>
<div id="about-page">
<h1 style="margin-bottom:1em">About</h1>
<p
style="
font-size: 1em;
font-family: Poppins;
font-weight: 400;
padding-bottom: max(3em, 3vh);
max-width: min(700px, 80vw);
margin: 0 auto;
text-align: left;
"
>
H.A.R.D. Hack is a hardware hackathon that HKN holds annually in collaboration
with IEEE and Triton Neurotech. During this 36 hour Hackathon, participants
across experience levels have the opportunity to work in teams to develop a
prototype or proof-of-concept project related to a given theme and track
which will be announced closer to the event.
<br />
<br />
The event features technical and professional workshops, networking opportunities
and social events for participants to get to know each other, learn about
hardware and embedded systems prototyping and have a great time having fun
with friends during the weekend. Top builds that align with the project theme
will earn a prize! In previous years, winning teams have won speakers, mice,
and other fun tech.
<br />
<br />
Group up into teams of 4 and compete with your fellow engineering students
overnight. Anyone can attend, regardless of skill level, major, or university.
We provide the materials, tools, and sustenance (food) needed to make a hardware hack!
Come out and build something cool!
</p>
<div
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-bottom: 2em;
flex-wrap: wrap;
"
>
<img
src="assets/images/hknlogo.png"
style="height: auto; width: 100px; flex-shrink: 0"
/>
<img
src="assets/images/ieeelogo.png"
style="height: auto; width: 150px; flex-shrink: 0"
/>
<img
src="assets/images/tntlogo.png"
style="height: auto; width: 100px; flex-shrink: 0"
/>
</div>
<!-- VIEW PREVIOUS PROJECTS BUTTONS -->
<a
id="2020-projects-link"
href="https://h-a-r-d-hack-2020.devpost.com/"
target="_blank"
style="
display: block;
font-size: min(1.8vh, 0.7em);
position: sticky;
padding-bottom: max(2em, 2vh);
"
><button
class="projects-button center main-font"
style="font-weight: 700; font-size: max(16px, min(5vw, 1.5em))"
>
View 2020 Projects
</button></a
>
<a
id="2019-projects-link"
href="https://hard-hack-2019.devpost.com/"
target="_blank"
style="
display: block;
margin-bottom: 5em;
font-size: min(1.8vh, 0.7em);
position: sticky;
"
><button
class="projects-button center main-font"
style="font-weight: 700; font-size: max(16px, min(5vw, 1.5em))"
>
View 2019 Projects
</button></a
>
</div>
<!-- FAQ -->
<div id="faq-page">
<h1 style="margin-bottom:1em">FAQ</h1>
<dropdown-box
header="What is a hackathon?"
text="A hackathon is a gathering where people collaboratively build a project from the ground-up over a short period of time. While working on a particular project, the idea is for each group member to have the ability and freedom to work on whatever they want."
></dropdown-box>
<dropdown-box
header="Do I need any prior experience to participate in Hard Hack?"
text="No, prior experience is not required to participate in the event. To cater to all experience levels, we have separate judging categories for Beginner, Intermediate and Advanced teams. Additionally, we have workshops planned throughout the event for participants to learn new technical and professional skills. What you get out of Hark Hack is completely up to you, it could be a learning opportunity, networking event, competition or just a fun way to spend your weekend with friends!"
></dropdown-box>
<dropdown-box
header="Is it free?"
text="Yes! There is no cost to participate in the event, all costs are covered by the ECE department and Associated Students UCSD. The only perceived cost to participants is the time and effort you put into your project and networking with other teams, organizers, volunteers and Professors during the event."
></dropdown-box>
<dropdown-box
header="Is HARD hack in-person, hybrid, or virtual?"
text="Hard hack will be in-person."
></dropdown-box>
<dropdown-box
header="What do I bring?"
text="Though we don’t require you to bring anything for the event apart from yourself and maybe your brain… here are a few recommended items that might make your experience at the event even better: sleeping bag, pillow, blanket, comfortable clothing, toiletries, water bottles, energy drinks and snacks. There will be water refill stations and we will be providing drinks and snacks."
></dropdown-box>
<dropdown-box
header="What parts will I have access to?"
text="Parts are being inventoried right now, we have a lot of Arduinos and basic components for use as well as quite a few sensors. During the event, we will have a dedicated parts room with a database of parts you can search through. If there is any specialized hardware you wish to use for your project, feel free to reach out to us to ask if we have it in stock, or you are welcome to bring some of your own parts as well!"
></dropdown-box>
<dropdown-box
header="Do I need a team?"
text="Teams are up to 4 people, so feel free to work by yourself, in a pair, or with a full team of 4! However, it is recommended to form a team of 4 just because it's you and 3 other people working on one project versus just yourself."
></dropdown-box>
<dropdown-box
header="What are the prizes?"
text="Prizes have not been decided yet, however, this year’s hackathon will have customized wooden plaques for all winning teams. Prizes will be announced during the opening ceremony of the event!"
></dropdown-box>
<dropdown-box
header="What are the themes/tracks?"
text="Make sure to follow our Instagram account before Week 2 of Spring quarter, we will be doing a theme and track reveal leading up to the event!!"
></dropdown-box>
<dropdown-box
header="Where is it?"
text="Qualcomm Room, first floor of Jacobs Hall at UC San Diego"
></dropdown-box>
<dropdown-box
header="When is it?"
text="April 13, 2024 8AM - April 14, 2024 12PM"
></dropdown-box>
<dropdown-box
header="Where can I apply to be a mentor or judge?"
text="Email <a href='mailto:[email protected]'>[email protected]</a> if you are interested in volunteering as a mentor and/or presiding as a judge."
></dropdown-box>
</div>
<!-- ASK QUESTIONS -->
<div class="center" id="questions-div" style="padding-bottom: 4em">
<h1 style="margin-bottom: 1em">Any More Questions?</h1>
<form id="questionsForm">
<input
type="text"
id="email"
placeholder="Email"
style="
width: min(80%, 600px);
height: 36px;
margin-bottom: 16px;
border-radius: 8px;
padding-left: 10px;
padding-right: 10px;
border: none;
"
/>
<br />
<textarea
type="text"
id="question"
rows="10"
cols="50"
placeholder="Enter Your Question Here..."
style="width: min(80%, 600px); padding: 10px; border-radius: 8px"
></textarea>
</form>
<br />
<button onclick="submitForm()" class="projects-button center main-font">
Submit Form
</button>
<p id="error"></p>
</div>
<script>
function clearMessage() {
document.getElementById("error").innerHTML = "";
}
function submitForm() {
console.log("pressed");
const email = document.getElementById("email").value;
const question = document.getElementById("question").value;
if (email == "") {
document.getElementById("error").innerHTML =
"Email Field Cannot Be Empty";
} else if (question == "") {
document.getElementById("error").innerHTML =
"Question Field Cannot Be Empty";
} else {
let url =
"https://docs.google.com/forms/d/e/1FAIpQLScq_QdWo8Y_mPnKSTRerhu11__t2NwnedWEzKvqf5_13xtTgQ/formResponse?usp=pp_url";
url +=
"&entry.333490010=" +
encodeURIComponent(email) +
"&entry.1301356340=" +
encodeURIComponent(question) +
"&submit=Submit";
fetch(url);
document.getElementById("error").innerHTML =
"Your Question Was Successfully Submitted!";
document.getElementById("questionsForm").reset();
setTimeout(clearMessage, 5000);
}
}
</script>
<!-- SOCIALS -->
<!-- <div id="socials">
<p
class="center"
style="
text-align: center;
font-family: Poppins;
width: max(45vw, 300px);
"
>
If you have any more questions, feel free to email us at
<a
style="font-family: Poppins; color: white"
href="mailto:[email protected]"
>.
</p>
<br />
<div id="icons">
<a href="mailto:[email protected]">
<img class="email" src="./assets/social_icons/email.svg"
/></a>
<a
href="https://www.instagram.com/hardhackucsd/"
target="_blank"
rel="noopener noreferrer"
>
<img class="instagram" src="./assets/social_icons/instagram.svg"
/></a>
</div>
</div> -->
</body>
</html>