-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (174 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>PillKaBoo</title>
<link rel="icon" type="image/x-icon" href="assets/logo/logo-yw-wo-bg.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container px-4">
<ul class="navbar-nav ms-auto" >
<li class="nav-item"><a target="_blank" href="https://github.com/becooq81/PillKaBoo-HomePage" class="nav-link" id="nav-bar-text-custom">
<img class="email-icon"src="assets/icons/github.svg">
</a></li>
</ul>
</div>
</nav>
<section class="bg-primary text-white">
<div style="background-position:center;display: flex; justify-content: center; align-items: center;">
<img src="assets/logo/LandingPage.jpg" alt="PillKaBoo" style="width: 80%" class="pill-img">
</div>
</section>
<section id="pill-intro">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<div style="text-align: center;"><img style="width:80%" src="assets/logo/logo-title.png"></div>
<p style="margin-top:7%;color:black;padding:3%" class="lead">
We aim to <span style="background-color:#F9E000;font-weight:bold">assist blind and visually impaired (VI) parents in safely and independently administering medication to their children.</span>
Pilkaboo recognizes medication packaging to provide relevant information, such as precautions for children, warnings for potential allergic reactions, and expiration dates, and help with the proper intake of liquid medication by confirming the process of pouring the recommended amount in real time and checking the remaining amount of liquid medication.
We present this service in a user-friendly interface for blind and VI parents by utilizing semantic labels, imitating the user interactions of screen readers in the application interface, and providing customizable and noticeable interface components.</p>
<div class="keyboard-outer-container">
<div class="keyboard-container">
<p>Key Service</p>
<div class="keyboard-header"><h3>Medication Recognition</h3>
</div>
<p>Assists visually impaired users by identifying medication(s) through visual input, and provides essential details
</p>
</div>
<div class="keyboard-container">
<p>Key Service</p>
<div class="keyboard-header"><h3>Accurate Liquid Medication Intake</h3></div>
<p>Confirms the process of pouring the required amount of liquid medication in real time
</p>
</div>
<div class="keyboard-container">
<p>Key Service</p>
<div class="keyboard-header"><h3>Remaining Liquid Medication</h3></div>
<p>Checks the remaining amount of liquid medication
</p>
</div>
</div>
<div style="color:black;padding:3%" class="lead">
All three services are designed to be accessible with audio guidance through screen readers and sound variations to ensure that the application provides a seamless, user-friendly service.
We aim to <span style="font-weight:bold;background-color:#F9E000">enhance medication safety, adherence, and accessibility, contributing significantly to the user's health and wellbeing</span>.
</div>
</div>
</div>
</div>
</section>
<section id="unsdg" style="background-color:#F7F1B8">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h1 style="font-weight:bold">We aim to solve</h1>
<div class="unsdg-text-container">
<p class="lead">
Our service directly contributes to improving the quality of life for visually impaired individuals, thereby aligning with the broader objectives of the UNSDGs to leave no one behind and to ensure inclusivity and equality. It bridges significant gaps in healthcare accessibility and information dissemination, fostering a more inclusive society where people with disabilities have better access to healthcare services and support.
</p>
</div>
<div class="unsdg-image-container">
<img class="merged"src="assets/unsdg/sdgs.png" alt="UN SDGs">
<img class="separate" src="assets/unsdg/sdg3.png" alt="UN SDG #3">
<img class="separate" src="assets/unsdg/sdg4.png" alt="UN SDG #4">
<img class="separate" src="assets/unsdg/sdg10.png" alt="UN SDG #10">
</div>
<div class="unsdg-text-container">
<p class="lead">
<span style="color:#289b45;font-size:1.3em;font-weight:bold">Contribution to Healthcare:</span><br/>
Our service improves accessibility to medication information, supporting informed healthcare management for VI parents, and contributing to improving health coverage and promoting well-being.
<p class="lead">
<br>
<span style="color:#c31b30;font-size:1.3em;font-weight:bold">Access to education:</span><br/>
By offering audio guidance about medications, our solution instructs VI parents to independently and safely manage their children's medication. Equal access to health information will foster a more inclusive educational environment and eliminate educational disparities for VI parents.
</p>
<p class="lead">
<br>
<span style="color:#e21484;font-size:1.3em;font-weight:bold">Reducing inequalities:</span><br/>
Our solution addresses the inequality faced by VI parents in accessing accurate medication information and administering medication safely to their children. By providing accessible tools and support, we strive to reduce disparities and empower all parents to care for their children's health effectively, regardless of their visual abilities.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="tech">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h1 style="font-weight:bold">Technology Stack</h1>
<div class="tech-image-container">
<img src="assets/tech/flutter.png" alt="Flutter">
<img src="assets/tech/go.png" alt="Go">
<img src="assets/tech/tensorflow.png" alt="TensorFlow">
<img src="assets/tech/Google-Cloud.png" alt="Google Cloud">
</div>
</div>
</div>
</div>
</section>
<section id="team" style="background-color:#F7F1B8">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h1 style="font-weight:bold">Team Parkour</h1>
<div class="team-image-container">
<div class="team-image-caption">
<a href="https://github.com/becooq81" target="_blank"><img src="https://github.com/becooq81.png" alt="Kang Heejin"></a>
<div class="team-caption">Kang Heejin
<p style="margin-top:10px" id="roles">#Mobile</p>
<p style="margin-top:10px" id="roles">#BE</p>
</div>
</div>
<div class="team-image-caption">
<a href="https://github.com/aeromaki" target="_blank"><img src="https://github.com/aeromaki.png" alt="Kim Jihoon"></a>
<div class="team-caption">Kim Jihoon
<br><p style="margin-top:10px" id="roles">#ML</p>
</div>
</div>
<div class="team-image-caption">
<a href="https://github.com/julie-yon" target="_blank"><img src="assets/pfp/YuYeongHyeon-pfp.jpeg" alt="Yu Yeong Hyeon"></a>
<div class="team-caption">Yu Yeong Hyeon
<br><p style="margin-top:10px" id="roles">#Design</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5" style="background-color:#575E71" id="contact">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h1 style="margin-bottom:2%;color:white;font-weight:bold">Contact us</h1>
<div class="contacts">
<div class="email-container">
<img src="assets/icons/email.svg" alt="Email Icon" class="email-icon">
<a href="mailto:[email protected]" class="email-link">[email protected]</a>
</div>
<div class="github-container">
<img src="assets/icons/github.svg" alt="Github Icon" class="email-icon">
<a href="https://github.com/becooq81/PillKaBoo-HomePage" target="_blank" class="email-link">Parkour Github</a>
</div>
</div>
</div>
</div>
</div>
<div class="container px-4"><p class="m-0 text-center text-white">Copyright © Parkour 2024</p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>