-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·363 lines (348 loc) · 15.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>Mirru</title>
<!-- https://preview.bootstrap.build/materialdesign/index.html# -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Mirru">
<meta property="og:site_name" content="Mirru Android App & Arduino Sketch">
<meta property="og:url" content="https://mirru.app">
<meta property="og:description" content="Print your own prosthesis and control it with your phone ">
<meta property="og:type" content="product">
<meta property="og:image" content="https://mirru.app/image/banner.jpg">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Rubik:100,200,300,400,600,500,700,800,900|Karla:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<!-- Bootstrap 4.3.1 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Slick 1.8.1 jQuery plugin CSS (Sliders) -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Fancybox 3 jQuery plugin CSS (Open images and video in popup) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<!-- AOS 2.3.4 jQuery plugin CSS (Animations) -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Startup 3 CSS (Styles for all blocks) -->
<link href="css/style.css" rel="stylesheet" />
<!-- jQuery 3.3.1 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- Navigation Mobile type 1 -->
<a href="#" class="open_menu bg-light radius_full"><i class="fas fa-bars lh-40"></i></a>
<div class="navigation_mobile bg-dark type1">
<a href="#" class="close_menu color-white"><i class="fas fa-times"></i></a>
<div class="px-40 pt-60 pb-60 inner">
<div class="logo color-white mb-30">Mirru</div>
<div><a href="#Overview" class="f-heading f-22 link color-white mb-20">Overview</a></div>
<div><a href="#Video" class="f-heading f-22 link color-white mb-20">Demo Video</a></div>
<div><a href="#Get-Started" class="f-heading f-22 link color-white mb-20">Get Started</a></div>
<div><a href="#Contact" class="link color-white op-3 mb-15">Contact</a></div>
<div class="socials mt-40">
<a href="https://www.twitter.com/mirru.app/" target="_blank" class="link color-white f-18 mr-20"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/mirru.app/" target="_blank" class="link color-white f-18 mr-20"><i class="fab fa-instagram"></i></a>
<a href="https://github.com/mirru-app" target="_blank" class="link color-white f-18 mr-20"><i class="fab fa-github"></i></a>
</div>
<div class="mt-50 f-14 light color-white op-3 copy">© 2021 Mirru</div>
</div>
</div> <!-- Header 1 -->
<header class="pt-195 pb-110 bg-light header_1">
<nav class="header_menu_1 pt-30 pb-30 mt-30">
<div class="container px-xl-0">
<div class="row justify-content-center align-items-center f-18 medium">
<div class="col-lg-3 logo">
<!-- <img src="image/prosthesis.svg" class="text-center mw-40"> -->
<span>Mirru</span>
</div>
<div class="col-lg-6 text-center">
<a href="#Overview" class="link color-heading mx-15">Overview</a>
<a href="#Video" class="link color-heading mx-15">Demo Video</a>
<a href="#Get-Started" class="link color-heading mx-15">Get Started</a>
<a href="#Contact" class="link color-heading mx-15">Contact</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="mb-3 logo d-block d-xl-none text-center logo_mobile">Mirru</div>
<div class="container row justify-content-center">
<div class="row justify-content-center col-xl-4 col-lg-5 col-md-4">
<img src="image/prosthesis.svg" class="text-center mw-140">
</div>
</div>
<div class="mw-600 mx-auto mt-30 f-22 color-heading text-center text-adaptive">Print your own prosthesis and <br>control it with your phone
</div>
<div class="mt-80 text-center buttons">
<div>
<a href="https://play.google.com/store/apps/details?id=app.mirru" target="_blank" class="btn lg action-1">Download the App</a>
</div>
<div>
<a href="#Overview" class="link mt-15 action-1 f-18 medium">Learn More</a>
</div>
</div>
</div>
</header>
<!-- Feature 34 -->
<section class="pt-75 pb-120 bg-light feature_34" id="Overview">
<div class="container px-xl-0">
<div class="row align-items-center text-center text-sm-left">
<div class="col-xl-1">
</div>
<div class="col-lg-5 col-sm-6">
<h2 class="mb-20">Use your prosthesis without myo</h2>
<div class="mb-40 mb-sm-0 f-22 color-heading text-adaptive">All you need is your phone's front-facing camera and a 3d-printed prosthetic hand.
</div>
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-5 container">
<img src="image/app-banner.jpg" class="mw-100" alt=""/>
</div>
</div>
<div class="mt-95 row justify-content-center text-center blocks">
<div class="mb-50 mb-md-0 col-md-4 col-sm-8">
<i class="far fa-hand-rock f-40"></i>
<div class="mt-20 mb-20 f-14 semibold text-uppercase sp-20 title">Hand-tracking</div>
<div class="color-heading text-adaptive">Using machine learning technology, you can use your camera and your valid hand to change your prothesis's grip in real-time.
</div>
</div>
<div class="mb-50 mb-md-0 col-md-4 col-sm-8">
<i class="far fa-save f-40"></i>
<div class="mt-20 mb-20 f-14 semibold text-uppercase sp-20 title">Save and load grips</div>
<div class="color-heading text-adaptive">Pre-program your grips to save and load them for later. Single-grip saving is available now, multi-grip saving is coming soon.
</div>
</div>
<div class="mb-50 mb-md-0 col-md-4 col-sm-8">
<i class="far fa-copy f-40"></i>
<div class="mt-20 mb-20 f-14 semibold text-uppercase sp-20 title">Open source</div>
<div class="color-heading text-adaptive">Join us on Github and customize your prosthesis to work the way you want it to. The Mirru Android and Arduino code is available in our repository.
</div>
</div>
</div>
</div>
</section>
<!-- Content 24 -->
<section class="pt-100 pb-95 bg-light content_24" id="Video">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-11">
<div class="relative poster">
<div class="mt-20 ml-20 absolute bg-light f-14 lh-30 color-red text-uppercase semibold sp-20 px-10 radius10 tip">Demo Video</div>
<img src="image/demo-thumbnail.png" alt="" class="img-fluid radius10" />
<a href="https://youtu.be/5Igj5cmza8g" class="play red" data-fancybox="content_24_fancybox">
<i class="fas fa-play"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Feature 22 -->
<section class="pt-100 bg-light feature_22" id="Get-Started">
<div class="container px-xl-0">
<div class="row flex-row-reverse justify-content-between">
<div class="col-lg-6 col-md-7">
<h2 class="small">Free and<br> Open Source</h2>
<div class="mt-25 mb-75 f-22 color-heading text-adaptive description">3D print and assemble the Brunel Hand, upload the Arduino Sketch and download the Mirru App.
</div>
<div class="mb-40 mb-md-0 d-sm-flex align-items-center buttons">
<a target="_blank" href="https://github.com/mirru-app" class="btn mb-20 mb-sm-0 mr-15 action-1">Get Started on Github</a>
<div class="d-flex links">
<a href="https://play.google.com/store/apps/details?id=app.mirru" target="_blank" class="link color-gray f-32 mx-20">
<i class="fab fa-android"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-1 d-none d-lg-block">
</div>
<div class="col-xl-4 col-lg-5 col-md-4">
<div class="row">
<div class="mb-80 col-md-12 col-sm-6 d-lg-flex align-items-start block">
<div class="w-70 flex-shrink-0 icon">
<i class="fas fa-hand-peace color-gray f-50"></i>
</div>
<div class="inner">
<div class="mt-10 mb-20 f-22 text-adaptive title">Brunel Hand</div>
<div class="color-heading text-adaptive">Download the 3D printable files by OpenBionics and build your own arduino hand powered by our ready-to-use sketches.
</div>
</div>
</div>
<div class="mb-80 col-md-12 col-sm-6 d-lg-flex align-items-start block">
<div class="w-70 flex-shrink-0 icon">
<i class="fas fa-mobile-alt color-gray f-50"></i>
</div>
<div class="inner">
<div class="mt-10 mb-20 f-22 text-adaptive title">Bluetooth App</div>
<div class="color-heading text-adaptive">The Mirru android app integrates with any servo-powered hand that works with a bluetooth open source microcontroller.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1 d-none d-xl-block">
</div>
</div>
</div>
</section>
<!-- Testimonial 2 -->
<section class="pb-50 pt-100 bg-light testimonial_2">
<div class="container px-xl-0 text-center">
<div class="row justify-content-center">
<div class="col-xl-6 col-lg-8 col-md-10">
<i class="fas fa-quote-left f-30 color-gray"></i>
<div class="mt-35 mb-45 f-22 text-adaptive">Moving away from myo is interesting for people in places like developing countries because seeing a prosthetist for myo placement can be very expensive and it's hard to do the sensor placement.
<div class="mt-20 f-18 medium">Flavie</div>
<div class="f-14 semibold color-heading text-uppercase sp-20">User Tester</div>
</div>
</div>
</div>
</section>
<!-- Application 32 -->
<section class="pt-100 pb-100 application_32 bg-dark">
<div class="bg-dark">
<div class="row justify-content-center align-items-center">
<div class="col-md-8 col-sm-10">
<img src="image/fingermove-min.gif" class="mw-100" alt="" />
</div>
</div>
</div>
</section>
<!-- Contact 2 -->
<section class="pb-75 pt-75 bg-light text-center" id="Contact">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-1">
</div>
<div class="col-xl-3 col-md-4 col-sm-8 mt-50">
<h3 class="mb-15">Questions?</h3>
<i class="far fa-comment-dots color-gray f-50 mb-20"></i>
<div class="mb-10 f-14 semibold text-uppercase sp-20 title">
Please send an email to:
</div>
<div class="color-heading text-adaptive">
mirruapp (at) gmail.com
</div>
</div>
<div class="col-xl-1">
</div>
</div>
</div>
</section>
<div class="container">
<hr>
</div>
<section class="pt-50 bg-light text-center content_30">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10 mt-15 mb-50 f-18 medium op-7 color-heading text-adaptive">
<div>
Made possible by the open <br>source Fellowship program at:
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="mb-30 col-lg-3 col-md-5 col-sm-6">
<a href="http://tweag.io" target="_blank">
<div class="d-flex justify-content-center align-items-center block h-160 mw-800 mx-auto radius10">
<img src="image/tweag.svg" alt="" class="img-fluid" />
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Contact 2 -->
<section class="bg-light text-center contact_2">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-1">
</div>
<div class="col-xl-3 col-md-4 col-sm-8 mt-50">
<div class="mb-10 f-14 semibold text-uppercase sp-20 title">Special thanks to:
</div>
<div class="color-heading text-adaptive">
<br>CRI, Paris | Flavie | Dorran Howell
<br>Mihaela Grigore | Artemis | Nicolas
</div>
</div>
<div class="col-xl-1">
</div>
</div>
</div>
</section>
<!-- Contact 2 -->
<section class="pb-100 bg-light text-center contact_2">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-1">
</div>
<div class="col-xl-3 col-md-4 col-sm-8 mt-50">
<div class="mb-10 f-14 semibold text-uppercase sp-20 title">💙</div>
<div class="color-heading text-adaptive">
Made with love
<br>in Paris, France
</div>
</div>
<div class="col-xl-1">
</div>
</div>
</div>
</section>
<!-- Footer 11 -->
<footer class="pt-45 pb-45 bg-dark color-white text-center footer_11">
<div class="container px-xl-0">
<div class="row align-items-center">
<div class="mb-20 mb-lg-0 col-lg-3">
<a href="#" class="link logo color-white">Mirru</a>
</div>
<div class="col-lg-8 text-lg-right">
<div class="d-inline-block socials">
<a href="https://www.twitter.com/mirru.app/" class="link color-white ml-10">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.instagram.com/mirru.app/" class="link color-white ml-10">
<i class="fab fa-instagram"></i>
</a>
<a target="_blank" href="https://github.com/mirru-app" class="link color-white ml-10">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div>
<div class="mt-45 mb-45 hr h-2 bg-white op-3">
</div>
</div>
<div class="row">
<div class="mb-20 mb-lg-0 col-lg-6">
<a href="#Overview" class="link color-white mr-10">Overview</a>
<a href="#Video" class="link color-white mx-10">Demo Video</a>
<a href="#Get-Started" class="link color-white ml-10">Get Started</a>
<a href="#Contact" class="link color-white ml-10">Contact</a>
</div>
<div class="col-lg-5 text-lg-right">
<div class="text-adaptive">2021 Mirru.
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap 4.3.1 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- Fancybox 3 jQuery plugin JS (Open images and video in popup) -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Google maps JS API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDP6Ex5S03nvKZJZSvGXsEAi3X_tFkua4U"></script>
<!-- Slick 1.8.1 jQuery plugin JS (Sliders) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- AOS 2.3.4 jQuery plugin JS (Animations) -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<!-- Maskedinput jQuery plugin JS (Masks for input fields) -->
<script src="js/jquery.maskedinput.min.js"></script>
<!-- Startup 3 JS (Custom js for all blocks) -->
<script src="js/script.js"></script>
</body>
</html>