-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
525 lines (520 loc) · 20.8 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
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DandyHacks 2024</title>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/x-icon" href="favicon.png" />
</head>
<body
class="font-sans bg-no-repeat bg-[100%_auto] text-ice-dream bg-seashore bg-bowen-blue bg-center-top"
>
<nav
class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 text-fuchsia transition-transform md:px-12 translate-y-0"
>
<h3 class="text-2xl">
<a href="#hero">DandyHacks ‘24</a>
</h3>
<div>
<input
class="absolute z-50 w-8 h-8 opacity-0 peer lg:hidden"
type="checkbox"
/>
<div
class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 lg:hidden"
></div>
<img
class="relative z-40 lg:hidden"
src="img/icons/hamburger.png"
alt="A hamburger icon"
/>
<ul
class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 pb-16 text-3xl landscape:max-lg:overflow-auto transition-transform gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 peer-checked:translate-x-0 translate-x-72 lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-10 lg:transition-none"
>
<li
class="text-right hover:scale-110 transition-transform origin-center"
>
<a href="#about">About</a>
</li>
<!-- <li -->
<!-- class="text-right hover:scale-110 transition-transform origin-center" -->
<!-- > -->
<!-- <a -->
<!-- href="static/Newsletter_-_StuOrgs_Get_Connected_1_1.pdf" -->
<!-- target="_blank" -->
<!-- >Newsletter</a -->
<!-- > -->
<!-- </li> -->
<li
class="text-right hover:scale-110 transition-transform origin-center"
>
<a href="#tracks">Tracks</a>
</li>
<!-- <li -->
<!-- class="text-right hover:scale-110 transition-transform origin-center" -->
<!-- > -->
<!-- <a href="#schedule">Schedule</a> -->
<!-- </li> -->
<!-- <li -->
<!-- class="text-right hover:scale-110 transition-transform origin-center" -->
<!-- > -->
<!-- <a href="#prizes">Prizes</a> -->
<!-- </li> -->
<li
class="text-right hover:scale-110 transition-transform origin-center"
>
<a href="#past-projects">Past projects</a>
</li>
<li
class="text-right hover:scale-110 transition-transform origin-center"
>
<a href="#faq">FAQ</a>
</li>
<!-- <li -->
<!-- class="text-right hover:scale-110 transition-transform origin-center" -->
<!-- > -->
<!-- <a href="#sponsors">Sponsors</a> -->
<!-- </li> -->
</ul>
</div>
<a
id="mlh-trust-badge"
style="
display: block;
max-width: 100px;
min-width: 60px;
position: absolute;
right: 50px;
top: 100%;
width: 10%;
z-index: 20;
"
href="https://mlh.io/seasons/2025/events"
target="_blank"
><img
src="https://s3.amazonaws.com/logged-assets/trust-badge/2025/mlh-trust-badge-2025-white.svg"
alt="Major League Hacking 2025 Hackathon Season"
style="width: 100%"
/></a>
</nav>
<div id="hero" class="flex flex-col items-center justify-center h-screen">
<div class="flex flex-col gap-6">
<div class="flex flex-col items-center gap-4">
<h1
class="text-4xl md:text-6xl lg:text-8xl white-outline text-fuchsia"
>
DandyHacks ‘24
</h1>
<h2 class="text-2xl lg:text-4xl text-california-peach">
November 15-17
</h2>
</div>
<div
class="flex flex-col items-center justify-center md:flex-row gap-7 md:max-lg:bottom-14"
>
<a
class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl bg-dried-magenta"
href="https://forms.gle/J2veW5mU2rt1VE8v7"
target="_blank"
>Register</a
>
<a
class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl bg-fuchsia"
href="https://discord.gg/3Jah6YN3C3"
target="_blank"
>Join Discord</a
>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-center gap-[77px] relative">
<div
class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]"
>
<h2 class="text-2xl lg:text-5xl text-fuchsia">
<div id="about" class="absolute -top-20"></div>
What is DandyHacks?
</h2>
<div class="text-base lg:text-xl text-ice-dream">
<p>
DandyHacks is the University of Rochester’s annual 42-hour long
hackathon. This year will be our 11th anniversary, and we’re so
excited to hold this amazing milestone in-person! As a fully
student-led organization at a tier 1 research university, we embody
our school’s values, encouraging participants to question the world
and learn more.
<br />
<br />
DandyHacks is very beginner-friendly, and we welcome students from
all backgrounds and majors. Participating in DandyHacks is not just
about winning; it is about collaborating with peers, learning from
mentors, and gaining valuable experiences. This year, DandyHacks
will take place on Nov 15-17 in the Feldman Ballroom. We hope to see
you there!
</p>
</div>
</div>
<img
class="hidden hover-scale lg:block lg:relative lg:b-[150px] w-[360px] rotate-12"
src="img/FloatingFox.png"
alt="A floating fox"
/>
</div>
<div class="relative flex items-center justify-center text-xl">
<div
class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl text-bowen-blue"
>
<h2 class="text-5xl text-fuchsia">
<div id="tracks" class="absolute -top-20"></div>
Tracks
</h2>
<p class="text-ice-dream">
Choose one track to submit your project into. Each track will have
three top winners, and each project may only win in one track. Each
track will have different prizes, so pick and choose your track
depending on which prize you want to win!
</p>
<div
class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12"
>
<div
class="w-[298px] h-[448px] rounded-3xl bg-ice-dream p-6 hover-scale flex flex-col items-center"
>
<img
class="mb-4 h-60"
src="img/seashells.png"
alt="Two seashells, one orange and one pink, with some bubbles"
/>
<h3 class="mb-4 text-2xl text-center font-display text-fuchsia">
Community
</h3>
<p class="text-center">
How do we use technology to connect people?
</p>
</div>
<div
class="w-[298px] h-[448px] rounded-3xl bg-ice-dream p-6 hover-scale flex flex-col items-center"
>
<img
class="mb-4 h-60"
src="img/flower.png"
alt="A shell from which a dandelion emerges"
/>
<h3 class="mb-4 text-2xl text-center font-display text-fuchsia">
Entertainment
</h3>
<p class="text-center">
How can technology impact film, music, or video games?
</p>
</div>
<div
class="w-[298px] h-[448px] rounded-3xl bg-ice-dream p-6 hover-scale flex flex-col items-center"
>
<img
class="mb-4 h-60"
src="img/hog.png"
height="260"
alt="A smiling groundhog whose head is inside a colorful bubble"
/>
<h3 class="mb-4 text-2xl text-center font-display text-fuchsia">
Efficiency
</h3>
<p class="text-center">
How can we make people’s lives more productive?
</p>
</div>
</div>
</div>
</div>
<!-- <div class="relative flex items-center justify-center text-xl"> -->
<!-- <div -->
<!-- class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] pb-12 box-border text-base lg:text-xl" -->
<!-- > -->
<!-- <h2 class="text-5xl"> -->
<!-- <div id="schedule" class="absolute -top-20"></div> -->
<!-- Schedule -->
<!-- </h2> -->
<!-- <iframe -->
<!-- class="airtable-embed" -->
<!-- src="https://airtable.com/embed/apptXzBn6KSOHO9rk/shrA0pG3QN5rh3QGo?backgroundColor=purple&viewControls=on" -->
<!-- frameborder="0" -->
<!-- onmousewheel="" -->
<!-- width="100%" -->
<!-- height="533" -->
<!-- style="background: transparent; border: 1px solid #ccc" -->
<!-- ></iframe> -->
<!-- </div> -->
<!-- </div> -->
<div class="relative flex flex-col items-center px-5">
<!-- <div -->
<!-- class="flex flex-col items-center justify-center py-12 lg:py-20 gap-12 lg:gap-20" -->
<!-- > -->
<!-- <h2 class="text-5xl"> -->
<!-- <div id="prizes" class="absolute -top-20"></div> -->
<!-- Prizes -->
<!-- </h2> -->
<!-- <div -->
<!-- class="flex flex-wrap justify-center pointer-events-none max-w-7xl gap-6" -->
<!-- > -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-acer-nitro-monitor bg-violet bg-[bottom_-16px_right_-16px]" -->
<!-- > -->
<!-- <h3>Acer Nitro KG241Y Sbiip 23.8" Monitor</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-razer-blackwidow bg-violet bg-[bottom_-16px_right_-16px]" -->
<!-- > -->
<!-- <h3>Razer BlackWidow V4 with Yellow Switches</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-wireless-photo-printer bg-violet bg-[bottom_-16px_right_-16px]" -->
<!-- > -->
<!-- <h3>Wireless Photo Printer</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-jbl-flip-5 bg-violet bg-[bottom_-16px_right_-16px]" -->
<!-- > -->
<!-- <h3>JBL Flip 5 Speaker</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-desk-lamp bg-violet bg-[bottom_-8px_right_0px]" -->
<!-- > -->
<!-- <h3>Desk Lamp</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-echo-dot bg-violet bg-[bottom_-12px_right_-16px]" -->
<!-- > -->
<!-- <h3>Echo dot 5th gen</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-airtag bg-violet bg-[bottom_-16px_right_-16px]" -->
<!-- > -->
<!-- <h3>AirTag</h3> -->
<!-- </div> -->
<!-- <div -->
<!-- class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]" -->
<!-- > -->
<!-- <h3>Amazon Fire Stick</h3> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div
class="flex flex-col grow-0 items-center w-full gap-12 lg:gap-20 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl"
>
<h2 class="text-5xl text-center">
<div id="past-projects" class="absolute -top-20"></div>
Past projects
</h2>
<div
class="flex flex-row flex-wrap justify-center pointer-events-none lg:pt-1 gap-12"
>
<a
href="https://devpost.com/software/amazeing-ghkc1r"
target="_blank"
class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden"
>
<img class="w-full mx-auto mb-9" src="img/project_images/amazing.png" />
<h3 class="mb-4 text-2xl text-center font-display">Amazeing</h3>
<p class="px-6 text-center">
A tech-infused maze game leveraging a Kruskal's algorithm-based design.
</p>
</a>
<a
href="https://devpost.com/software/rocmap"
target="_blank"
class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden"
>
<img
class="w-full mx-auto mb-9"
src="img/project_images/rocmap.png"
/>
<h3 class="mb-4 text-2xl text-center font-display">
Rocmap
</h3>
<p class="px-6 text-center">
U of R's very own map navigator, tunnels and weather included!
</p>
</a>
<a
href="https://devpost.com/software/quiz-voyage"
target="_blank"
class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden"
>
<img class="w-full mx-auto mb-9" src="img/project_images/voyage.png" />
<h3 class="mb-4 text-2xl text-center font-display">Quiz-voyage</h3>
<p class="px-6 text-center">
An app to gain knowledge in an entertaining environment akin to a video game.
</p>
</a>
</div>
</div>
<div
class="flex flex-col items-center pt-12 pb-24 lg:pt-20 box-border gap-12 lg:gap-20"
>
<h2 class="text-5xl">
<div id="faq" class="absolute -top-20"></div>
FAQ
</h2>
<div
class="flex flex-col px-10 pointer-events-none lg:py-0 gap-5 lg:px-0"
>
<details>
<summary>
What is a hackathon?
<img src="img/icons/plus.png" />
</summary>
<p>
A hackathon is an event in which people meet to collaboratively
build their ideas using technology.
</p>
</details>
<details>
<summary>
Who is eligible to participate?
<img src="img/icons/plus.png" />
</summary>
<p>
Any graduate or undergraduate student over the age of 18 enrolled
in a North American institution of higher education is eligible.
All hackers must be vaccinated and are encouraged to mask while
indoors.
</p>
</details>
<details>
<summary>
Do I have to pay to participate?
<img src="img/icons/plus.png" />
</summary>
<p>
Hackers do not have to pay to participate. Hackers just need to
register and check-in upon arrival. Registration will open up in
early September, but you may join discord and follow us on
Instagram
<a class="underline" href="https://www.instagram.com/dandyhacks"
>@dandyhacks</a
>
to stay up to date on all things DandyHacks!
</p>
</details>
<details>
<summary>
Will the hackathon be in-person or virtual?
<img src="img/icons/plus.png" />
</summary>
<p>
The hackathon will be fully in-person with a couple online
workshops.
</p>
</details>
<details>
<summary>
What safety protocols are in place to protect the community?
<img src="img/icons/plus.png" />
</summary>
<p>
Please see the
<a
class="underline"
href="https://www.rochester.edu/coronavirus-update/"
>University of Rochester COVID-19 protocols</a
>.
</p>
</details>
<details>
<summary>
Will I work individually or with a team?
<img src="img/icons/plus.png" />
</summary>
<p>
You can work individually or with a team. Each team can have a
maximum of 4 people, and don’t worry if you don’t have a team yet!
We will make time and communication channels for you to find a
team.
</p>
</details>
<details>
<summary>
Can I start hacking before the event?
<img src="img/icons/plus.png" />
</summary>
<p>
You may not start hacking before the event, but you can start
planning and gathering resources.
</p>
</details>
<details>
<summary>
I still have questions…
<img src="img/icons/plus.png" />
</summary>
<p>
Reach out to us at
<a class="underline" href="mailto:[email protected]"
>our email</a
>
or on
<a class="underline" href="https://www.instagram.com/dandyhacks"
>our Instagram</a
>!
</p>
</details>
</div>
</div>
<div class="relative flex flex-col items-center mb-24 gap-12">
<h2 class="text-5xl">
<div id="sponsors" class="absolute -top-20"></div>
Sponsors
</h2>
<div>
<img class="pointer-events-none" src="img/sponsors/sponsors.png" />
<a
class="absolute block w-[8%] h-[7%] left-[42%] top-[75%]"
href="http://hackp.ac/mlh-StandOutStickers-hackathons"
target="_blank"
></a>
</div>
</div>
</div>
<footer
class="flex gap-8 lg:gap-0 flex-col lg:flex-row items-center justify-between lg:px-24 lg:py-16 lg:bg-lying-down-fox lg:bg-no-repeat lg:bg-center-top lg:bg-[length:360px_auto] text-xl"
>
<div class="flex flex-col items-center gap-5">
<span class="hidden lg:inline">[email protected]</span>
<div class="flex gap-2.5 items-center">
<a
class="hover:scale-110 transition-transform origin-center"
href="mailto:[email protected]"
><img src="img/social/mail.svg"
/></a>
<a
class="hover:scale-110 transition-transform origin-center"
href="https://www.instagram.com/dandyhacks"
><img src="img/social/instagram.svg"
/></a>
<a
class="hover:scale-110 transition-transform origin-center"
href="https://www.facebook.com/DandyHacks"
><img src="img/social/facebook.svg"
/></a>
<a
class="hover:scale-110 transition-transform origin-center"
href="https://twitter.com/dandyhacks"
><img src="img/social/twitter.svg"
/></a>
</div>
</div>
<div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
<a
class="text-fuchsia"
href="http://mlh.io/code-of-conduct"
target="_blank"
><span>MLH Code of Conduct</span></a
>
<span>© 2024 DandyHacks</span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>