-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
399 lines (386 loc) · 21 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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon-blue.png">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
BioHack 2023
</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap" rel="stylesheet">
<script src="app.js" defer></script>
<style>
html * {
font-family: 'Chakra Petch', sans-serif;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<ul class="links">
<li><a href="#top">BIOHACK</a></li>
<li><a href="#about_us_title">About</a></li>
<li><a href="#past_winners_title">Winners</a></li>
<li><a href="#FAQ_title">FAQ</a></li>
<li><a href="#volunteer_title">Volunteer</a></li>
<li><a href="#team_title">Team</a></li>
</ul>
</div>
<!-- <div class="dropdown">
<div class="toggle_btn"><i class="fa-solid fa-bars"></i></div>
<ul class="links"></ul>
<li><a href="#top">BIOHACK</a></li>
<li><a href="#about_us_title">About</a></li>
<li><a href="#past_winners_title">Winners</a></li>
<li><a href="#FAQ_title">FAQ</a></li>
<li><a href="#volunteer_title">Volunteer</a></li>
<li><a href="#team_title">Team</a></li>
</ul>
</div>
</header> -->
<!-- STARS -->
<div class="bg-animation">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
<div id="stars4"></div>
</div>
<!-- TITLE, DATE, LOGO, -->
<div class="title">
<img class="logo" src="white-logo.png" alt="white-logo">
<div class="words">
<h1 class="biohack">
BIOHACK 2023
</h1>
<p class="hackathon">
Healthcare Hackathon
</p>
<p class="date">
May 20th - 21st
</p>
</div>
</div>
<div class="applications-box">
<p class="applications-title">Applications!</p>
<div class="all-buttons">
<button class="discord-button" ><a target="_blank" rel="noopener noreferrer" href="https://forms.gle/VL6mc4XjEdVprwAt9" style="text-decoration: none; color: white"> Assistant Director</a></button>
<button class="discord-button" ><a target="_blank" rel="noopener noreferrer" href="https://forms.gle/7cnda94oKHzAKM9y8" style="text-decoration: none; color: white"> General Leads</a></button>
<button class="discord-button" ><a target="_blank" rel="noopener noreferrer" href="https://forms.gle/tUZTxZEYpRQQNAht8" style="text-decoration: none; color: white"> UI/UX</a></button>
<button class="discord-button" ><a target="_blank" rel="noopener noreferrer" href="https://forms.gle/Zpc5Eram6SqGT2YD8" style="text-decoration: none; color: white;">Webdev</a></button>
<!-- <button class="check-in-button"
<span class="thing"></span>
<span class="thing"></span>
<span class="thing"></span>
<span class="thing"></span>
<a target="_blank" rel="noopener noreferrer" href="https://biohack-2023.devpost.com/" style="text-decoration: none; color: white;">DevPost</a></button> -->
</div>
</div>
<!-- <button class="volunteer-button" ><a target="_blank" rel="noopener noreferrer" href="https://docs.google.com/forms/d/1quvymD0txFDVSWBQMs5e9aojdVRZiSq1biBnh69yTtI/edit" style="text-decoration: none; color: white;">Volunteer</a></button> -->
<!-- MOUNTAINS -->
<div class="mountain-box">
<img class="mountain-picture"src="mountains1.svg" alt="mountains">
</div>
<!-- ABOUT US -->
<div class="about-us-box">
<img class="rocket" src="rocket.svg" alt="rocket">
<img class="sun" src="mars.svg" alt="sun">
<span class="about-us">
<!-- <p class="about-us-title"><a id="about_us_title"></a></p> -->
<p class="about-us-title">About Us!<a id="about_us_title"></a></p>
<p class="about-us-text1">What is BioHack?</p>
<p class="about-us-text">BioHack is a 24-hour health and medicine-themed hackathon hosted by the University of
California, Riverside.
</p>
<p class="about-us-text2">Our Mission</p>
<p class="about-us-text">Our mission is to cultivate the next generation of BioHackers and healthcare advocates
and meet the patient care needs of today with the technology of tomorrow.
</p>
<p class="about-us-text">As a beginner-friendly and multidisciplinary hackathon, BioHack aims to give students
the opportunity to create innovative and personalized solutions and save lives with
their projects. During BioHack, students will get the opportunity to form teams and
collaborate, attend workshops to learn about new technologies, and network with
industry partners.
</p>
</span>
</div>
<!-- SPACESHIP -->
<div class="spaceship-box">
<img class="spaceship-picture" src="spaceship.svg" alt="spaceship">
</div>
<div class="gradient">
<!-- PAST WINNERS -->
<div class="past-winners-box">
<!-- <p class="past-winners-title"><a id="past_winners_title"></a></p> -->
<p class="past-winners-title"> <a id="past_winners_title"></a>
2023 Winners!
</p>
<img class="large-moon" src="moon.svg" alt="large-moon">
<!-- CAROUSEL -->
<div class="carousel-container">
<div class="card-carousel">
<div class="card" id="4">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid4.svg" alt="1st place polaroid">
<p class="card-tag">Best Hardware</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/pill-dispenser-rol10b">Pill Dispenser:</a></p>
An automated pill dispenser alerts users and dispenses pills as scheduled. Users can set the pill quantity, intake time, and supply amount. The dispenser releases pills one minute prior to the scheduled time, based on the desired quantity. The supply decreases as pills are dispensed, and a 30-second beeper notifies the user when it's time.
</div>
</div>
</div>
<div class="card" id="2">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid2.svg" alt="1st place polaroid">
<p class="card-tag">Best Beginner</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/mdm-medical-diagnostics-machine">MDM:</a></p>
The machine uses Arduinos to measure temperature and heart rate. Users answer questions about their symptoms, which are then sent to OpenAI's API for a diagnosis. The response is displayed in the VS Code Terminal.
</div>
</div>
</div>
<div class="card" id="3">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid3.svg" alt="1st place polaroid">
<p class="card-tag">Best Startup</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/wound-health">Abrasionheatx:</a></p>
It measures specifically temperature and humidity and displays a message whenever a threshold of each respective variable is exceeded. If both are exceeded, then a buzzer will emit an irritating sound to notify the user of the need to perform treatment(s) or wound intervention(s).
</div>
</div>
</div>
<div class="card" id="7">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid7.svg" alt="1st place polaroid">
<p class="card-tag">Congrats!</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://biohack-2023.devpost.com/project-gallery">Devpost:</a></p>
Thank you to everyone who participated in BioHack 2023 and congratulations to all the Winners!
</div>
</div>
</div>
<div class="card" id="1">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid1.svg" alt="1st place polaroid">
<p class="card-tag">1st Overall</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/bioconnect-b03th2">bioLink:</a></p>
Users can easily enter symptoms on the web app and receive accurate diagnoses. The platform goes beyond diagnoses, allowing live chats with nearby doctors for personalized advice. Access accurate medical opinions conveniently to make informed decisions about your health.
</div>
</div>
</div>
<div class="card" id="5">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid5.svg" alt="1st place polaroid">
<p class="card-tag">Best Green</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/project-3eysfvkqrndo">The Arbor Project:</a></p>
Their website includes a database user sign-up/login system, that records a username and password using Firebase's authentication database. There is a checklist that lists various self-care tasks. Logging in/signing up allows a user to access this portion of the website.
</div>
</div>
</div>
<div class="card" id="6">
<div class="content">
<div class="front">
<img class="polaroid" src="polaroid6.svg" alt="1st place polaroid">
<p class="card-tag">Best UI/UX</p>
</div>
<div class="back">
<p class="card-project-title"><a target="_blank" rel="noopener noreferrer" href="https://devpost.com/software/speakmd">EIDA:</a></p>
A patient preprocessing tool that lightens primary healthcare providers' workloads while ensuring patient concerns are heard. By conversing with E.I.D.A., patients can share ailment details through speech. E.I.D.A. compiles a history of present illness (HPI) using a language model, ready for healthcare providers to review before the patient visit.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="about-us-title"><a id="FAQ_title"></a></p>
<p class="questions">
Any Questions?
</p>
<div id="faq">
<!-- FAQ -->
<ul>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>What is a hackathon?</h2>
<p>A hackathon is a weekend-long event that invites curious minds to learn and build something new. You may pick up a project of your choosing to work on during the event, to dive into a topic you've been meaning to explore. You also get to meet new friends as you work in a team of up to 4 members!</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>Who can attend?</h2>
<p>This event is open to all undergraduate students! You do not need any prior skills or qualifications to attend.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>Do I need to be a cs major?</h2>
<p>No! Biohack encourages any and all students who are curious about coding and health to participate in our workshops and create a project. We also host beginner friendly workshops where participants can learn new skills that they can utilize in their project submissions.</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>How do I register?</h2>
<p>Priority registration will open soon. Please keep an eye out on our social media platforms to hear the announcement. Once applications are open, you will be able to register through this website.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>How do I know if I am qualified to participate?</h2>
<p>We will send an email to you once we have reviewed your application.</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>Does this event cost money?</h2>
<p>No! This event is completely free to all participants.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>What should I bring?</h2>
<p>All you need is a device (e.g. laptop, PC, etc.) and access to the internet!</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>Where do I sleep?</h2>
<p>We will have designated rooms where participants can sleep throughout the event.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>Am I required to join with a team?</h2>
<p>Participating in the event within a team of at least 2 is mandatory for project submission. (Accommodations can be made should you desire to join a team during check-in.)</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>How many people can be on my team?</h2>
<p>The maximum number of hackers in a team is 4 participants.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>How long is the event?</h2>
<p>Check in begins at 9am on Saturday. Hacking begins at 12pm and is 24 hours long. After judging, we have the closing ceremony at 3pm.</p>
</li>
<li class="box-two">
<input type="checkbox" checked>
<i></i>
<h2>When do I have to register by?</h2>
<p>Applications will open on April 14th. Closing of the application form will be announced soon. Follow our social media to keep track of updates.</p>
</li>
<li class="box-one">
<input type="checkbox" checked>
<i></i>
<h2>What if my question wasn't answered?</h2>
<p>Feel free to contact us at <a href=mailto:"[email protected]" style="text-decoration: none; color: #50dcf5;">[email protected]</a> with any of your questions.</p>
</li>
</ul>
</div>
<div class="gradient2">
<!-- GET INVOLVED -->
<p class="get-involved-title"><a id="volunteer_title"></a></p>
<div class="get-involved">
<img class="large-moon2" src="moon2.svg" alt="large-moon">
<p class="get-involved-title" >Get Involved</p>
<p class="get-involved-text">Not interested in hacking, but still interested in the behind-the-scenes of BioHack? Great! We'd love to have you on our team.</p>
</div>
</div>
<!--SPONSORS-->
<div class="sponsors">
<p class="sponsors-text">Sponsors</p>
<div class="sponsors-box">
<img class="appl-med-size" src="appliedmedical.png" alt="appliedmedical.png">
<img class="asucr-size" src="asucr.png" alt="asucr.png">
<img class="bcoe-size" src="bcoe.png" alt="bcoe.png">
<img class="blackstone-size" src="blackstone.png" alt="blackstone.png">
<img class="bmes-size" src="bmesucr.png" alt="bmesucr.png">
<img class="cyber-size" src="cyber.png" alt="cyber.png">
<img class="gcap-size" src="gcap.png" alt="gcap.png">
</div>
</div>
<!-- TEAM -->
<div class="our-team">
<p class="our-team-text"><a id="team_title"></a>Our Team</p>
<div class="directors" id="directors"></div>
<div class="lead-photos" id="lead-photos">
</div>
</div>
<!-- FOOTER -->
<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<div class="social-icon">
<li class="social-icon__item">
<a class="social-icon__link" <a href=mailto:"[email protected]"</a>
<ion-icon name="mail-outline"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" target="_blank" rel="noopener noreferrer" href="https://www.tiktok.com/@biohackucr?_t=8bOSuVA3Qfi&_r=1">
<ion-icon name="logo-tiktok"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/biohackucr/">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/biohack_ucr/">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" target="_blank" rel="noopener noreferrer" href="https://discord.gg/h9Pcd3S2">
<ion-icon name="logo-discord"></ion-icon>
</a>
</li>
</div>
<p>Made by the BioHack team</p>
</footer>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="https://kit.fontawesome.com/fadb827e5a.js" crossorigin="anonymous"></script>
<script>
// JavaScript code for toggling the dropdown menu on mobile devices
const toggleBtn = document.querySelector('.toggle_btn');
const links = document.querySelector('.links');
const dropdown = document.querySelector('.dropdown');
toggleBtn.addEventListener('click', () => {
links.style.display = links.style.display === 'none' ? 'flex' : 'none';
});
// Close the dropdown menu when a link is clicked
const linkItems = document.querySelectorAll('.dropdown .links li a');
linkItems.forEach((link) => {
link.addEventListener('click', () => {
links.style.display = 'none';
});
});
</script>
</body>
</html>