-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (241 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aware Driving</title>
<meta content="Aware Driving" name="description">
<meta content="width=device-width,initial-scale=1" name="viewport">
<script crossorigin="anonymous"
defer="defer"
integrity="sha512-Kef5sc7gfTacR7TZKelcrRs15ipf7+t+n7Zh6mKNJbmW+/RRdCW9nwfLn4YX0s2nO6Kv5Y2ChqgIakaC6PW09A=="
referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<!-- Favicon-->
<link href="assets/logo.ico" rel="icon" type="image/x-icon">
<!-- style sheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Open sans Font -->
<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=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- slick theme -->
<link href="js/slick/slick.css" rel="stylesheet" type="text/css"/>
<link href="js/slick/slick-theme.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<!-- particles.js container -->
<div id="particles-js"></div>
<div class="wrapper">
<div class="hero">
<div class="logo">
<img src="assets/logo.webp" alt="Logo">
</div>
<div class="text">
<h1>Aware Driving</h1>
<h3 class="type-effect">Driving Assistance</h3>
<p>Aware Driving (AD) is a mobile app that will assist you while you are driving. Use it with your regular smartphone,
there’s no need to buy extra equipment.</p>
<div class="logos">
<a class="playstore" href="https://play.google.com/store/apps/details?id=com.anka.awaredriving" target="_blank"><img
alt="" src="assets/playstore.png"></a>
</div>
</div>
</div>
</div>
</header>
<!-- APP FEATURES CARDS -->
<div class="wrapper">
<div class="hero-boxes">
<div class="box">
<div class="box-icon">
<img alt="Privacy Icon" src="assets/privacy_icon.svg">
</div>
<h4>Privacy</h4>
<p>Everything happens on your device</p>
</div>
<div class="box">
<div class="box-icon">
<img alt="No Wifi Icon" src="assets/no_wifi_icon.svg">
</div>
<h4>Offline</h4>
<p>No need to have Wi-Fi/GPS enabled</p>
</div>
<div class="box">
<div class="box-icon">
<img alt="Smartphone Icon" src="assets/smartphone_icon.svg">
</div>
<h4>Availability</h4>
<p>Available on your regular device</p>
</div>
<div class="box">
<div class="box-icon">
<img alt="Free Icon" src="assets/free_icon.svg">
</div>
<h4>Free</h4>
<p>It’s completely free to use</p>
</div>
</div>
</div>
<!-- ABOUT APP -->
<section class="about">
<div class="wrapper">
<div class="about-container padding_tb">
<div class="about-info">
<div class="about-info_media">
<img alt="" src="assets/phone_ai.png">
</div>
<div class="about-info_text">
<h2>About App</h2>
<p>With the help of AI and Machine Learning we will alert when the driver is at risk!</p>
<h3>Drive Safer with AI</h3>
<p>Prevent accidents by simply using Aware Driving. You will be alerted when you are asleep, distracted or your face
can't be clearly seen</p>
<p>Aware Driving provides various driving performance scores, which entail being awake, asleep or distracted.</p>
<p>You can adjust the sound of the alarm, the sensitivity of the alerts and which alerts you want to enable/disable,
among other settings.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ALERTS -->
<section class="padding_tb background-alert">
<div class="wrapper">
<div class="alerts-section">
<h2>Alerts</h2>
<div class="alerts">
<div class="alert">
<img src="assets/sleep_driver.jpg" alt="">
<div class="alert-text"><p>When both of your <b>eyes</b> are completely <b>closed</b> for a given amount of time, you'll
be alerted!</p></div>
</div>
<div class="alert">
<img src="assets/distracted_driver.jpg" alt="">
<div class="alert-text"><p>When you <b>look sideways</b> for a given amount of time you'll be also alerted!</p></div>
</div>
<div class="alert">
<img src="assets/noface_driver.jpg" alt="">
<div class="alert-text"><p>And when your <b>face can't be seen</b> for a given amount of time you'll get also alerted!
</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- APP SCREENSHOTS -->
<section class="carousel">
<div class="wrapper">
<div class="carousel-intro">
<h2>Screenshots</h2>
<p><b>Simple</b> and <b>Flexible</b> UI designed to adapt to your needs!</p>
</div>
<div class="slides iphonex">
<div class="slide">
<img alt="sc test" src="assets/screenshots/statistics_activity.webp">
</div>
<div class="slide">
<img alt="sc test" src="assets/screenshots/settings_activity.webp">
</div>
<div class="slide">
<img alt="sc test" src="assets/screenshots/intro_slide_1.webp">
</div>
<div class="slide">
<img alt="sc test" src="assets/screenshots/welcome_activity.webp">
</div>
<div class="slide">
<img alt="sc test" src="assets/screenshots/about_activity.webp">
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="padding_tb faqs_section">
<div class="wrapper">
<div class="faqs_container">
<div class="faqs_title-container">
<h2>FAQ</h2>
<p>Frequently Asked Questions</p>
</div>
<div class="faqs_list">
<div class="item">
<div class="item-content">
<div class="question">What is the difference between Test and Start mode?</div>
<div class="answer">The app works the same in both, but in Test you see the camera preview for adjustment and in
Start mode you can keep the app running in the background.
</div>
</div>
<div class="open-button">
<span></span>
</div>
</div>
<div class="item">
<div class="item-content">
<div class="question">Where do I need to place my device?</div>
<div class="answer">Alerts emitted are based on the device position, try to position it at head level.</div>
</div>
<div class="open-button">
<span></span>
</div>
</div>
<div class="item">
<div class="item-content">
<div class="question">Alerts suddenly stop</div>
<div class="answer">Don't enable "battery optimization" for this app, it's likely that Android will kill the app
while running in the background. Also, if you open an app that uses the camera, it may interfere with Aware
Driving while it's running in the background.
</div>
</div>
<div class="open-button">
<span></span>
</div>
</div>
<div class="item">
<div class="item-content">
<div class="question">What is Enhanced Distracted?</div>
<div class="answer">Aware Driving will predict whether your vehicle is moving and if it's still it won't emit
Distracted alerts (there is no need to pay attention while you are not driving). This is an experimental
feature.
</div>
</div>
<div class="open-button">
<span></span>
</div>
</div>
<div class="item">
<div class="item-content">
<div class="question">Where are Images analyzed?</div>
<div class="answer">
All the image analysis is done offline on your device. No image ever leaves your device, so no
internet connection is ever required.
</div>
</div>
<div class="open-button">
<span></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="wrapper">
<div class="footer_container">
<div class="footer_bottom">
<a class="copyright" href="mailto:[email protected]">Contact Us</a>
<div class="footer_buttons">
<a href="https://www.linkedin.com/in/andres-aranda-b175011a8/">LinkedIn</a>
<a href="https://sites.google.com/view/aware-driving-privacy-policy?pli=1" target="_blank">Privacy</a>
</div>
</div>
</div>
</div>
</footer>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/slick/slick.min.js"></script>
<script defer="defer" src="backgroundAnimation.js"></script>
<script defer="defer" src="app.js"></script>
</body>
</html>