-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
336 lines (301 loc) · 12.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
---
layout: gyro
title: Gyro
---
<section class="slider">
<div id="jssor_1" style="position: relative; background-size: 100; margin: 0 auto; top: 0px; left: 0px; width: 1400px; height: 635px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<!--<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('gfx/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>-->
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0%; left: 0px; width: 1400px; height: 635px;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="gfx/slider1.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="gfx/slider2.jpg" />
<!-- slider only divs -->
<!--<div style="position: absolute; top: 30px; left: 30px; width: 480px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px;">TOUCH SWIPE SLIDER</div>
<div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>-->
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="gfx/slider3.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="gfx/slider4.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="gfx/slider5.jpg" />
</div>
</div>
<!-- overlay div -->
<!--<div class="open-title" >Open & Personal</div>-->
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:30px;right:30px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:30px;height:30px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:12px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:12px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
</section>
<section class="robot-toy-friend">
<div class="wrapper">
<div class="row">
<div class="col span-6">
<h3>Your robot. Your toy. Your friend.</h3>
<p>With Gyro you can have fun while learning robotics and programming. You can use it to study other subjects, from math to arts.<br><br>
Gyro is an <b>Edutainment Robot</b> that is pre-programmed with many features: <b>drawing, play sounds, remote control, and more.</b><br><br>
<b>It's a great tool for parents and educators worldwide.</b><br><br>
Just download the free mobile app and start playing with your new friend immediately.</p>
<!--<button>jump to the app</button>-->
<p>
</div>
<div class="col span-6">
<img src="gfx/gyro_small.gif" style="width: 100%; height: auto; vertical-align: bottom; border-radius: 25px;"/>
</div>
</div>
</div>
</section>
<section class="discover-explore-learn">
<div class="wrapper">
<div class="row">
<div class="col span-6">
</div>
<div class="col span-6 bubble">
<h3>Discover . Explore . Learn</h3>
<!--<p>If you go beyond the pre-defined shell and mobile apps, you can program and customize your Gyro into a new world of infinite possibilities.<br><br>
Gyro is equipped with plenty of electronics goodies to <b>enhance</b> your curiosity and creativity.--><!--<br><br>
The Motoruino2 board inside Gyro is a great platform for anyone who is curious about robotics and programming.</p>-->
<!--<button>click here to learn more</button>-->
<p>With our free visual programming tool <b>Visualino</b>, you can program Gyro to go much beyond the pre-programmed features.<br><br>
Gyro reacts to gestures, sounds, colours and lights.<br><br>
Avoid obstacles or chase objects are just a few tasks that Gyro can 'learn' with you.</p>
<p>
</div>
</div>
</div>
</section>
<section class="open-design">
<div class="wrapper">
<div class="row">
<div class="col span-6">
<h3>Open Design</h3>
<p>We really mean it, unlike most educational robots Gyro is all hackable, and fully compatible with Arduino.<br><br>
We invite you to open the shell and add your own sensors and actuators without losing the warranty.</p>
<!--<button>click here to learn more</button>-->
<p>If you go beyond the pre-defined shell and mobile apps, you can program and customize your Gyro into a new world of infinite possibilities.<br><br>
Gyro is equipped with plenty of electronics goodies to <b>enhance</b> your curiosity and creativity.<!--<br><br>
The Motoruino2 board inside Gyro is a great platform for anyone who is curious about robotics and programming.--></p>
<p>
</div>
<div class="col span-6">
<img src="gfx/gyro_open.gif" style="width: 100%; height: auto; vertical-align: bottom; border-radius: 25px;"/>
</div>
</div>
</div>
</section>
<!--<section class="creativity-enabler">
<div class="wrapper">
<div class="row">
<div class="col span-6 bubble">
<h3>Creativity Enhancer</h3>
<p>With our free visual programming tool <b>Visualino</b>, you can program Gyro to go much beyond the pre-programmed features.<br><br>
Gyro reacts to gestures, sounds, colours and lights.<br><br>
Avoid obstacles or chase objects are just a few tasks that Gyro can 'learn' with you.</p>
<button>click here to learn more about Visualino</button>
<p>
</div>
<div class="col span-6">
</div>
</div>
</div>
</section>-->
<section class="what-can-gyro-do bg2">
<div class="wrapper">
<header class="section-header span-10 precision">
<h1>What can GYRO do?</h1>
<p>Gyro robot comes pre-programmed with a handful of features.<br>
Just download the free mobile app into your mobile and start playing with it.</p>
</header>
<div class="row content">
<div class="col span-6">
<img src="gfx/gyro_icon1.png" />
<h3>Colours and Lines</h3>
<p>With its ground sensors Gyro is capable of detecting colours and lines. Place your maze on the floor and let Gyro solve it.</p>
</div>
<div class="col span-6">
<img src="gfx/gyro_icon2.png" />
<h3>React to Gestures and Sounds</h3>
<p>Wave your hand in front of Gyro and it will perform an action accordingly to your movement. Gyro can also listen to sounds, so you can make it react to the sound of claps.</p>
</div>
<div class="col span-6">
<img src="gfx/gyro_icon3.png" />
<h3>Express Emotions</h3>
<p>Make your Gyro alive with sounds, colored leds, movements and more.</p>
</div>
<div class="col span-6">
<img src="gfx/gyro_icon4.png" />
<h3>Draw and Doodle</h3>
<p>Place a marker on Gyro and control it with your smartphone (we recommend using a white sheet on the floor, otherwise you will to clean it after!)</p>
</div>
</div>
</div>
</section>
<!--<section style="padding-left: 1em;">
<div class="row">
<div class="col span-6" style="width: 50%; align:left; float: left; ">
<div class="floatleft"><img src="gfx/gyro_icon5.png" /></div>
<div class="organize">
<h3>Smartphone holder</h3>
<p>If you need more processor power use a smartphone on Gyro and you will also have a highly advanced set of sensors. You can play with computer vision, speech detection, location and mapping (SLAM), among others.</p>
</div>
</div>
<div class="col span-6 stores" style="width: 50%; align:right; float:right; margin-top:0;">
<div class="floatleft">
<p><img src="gfx/android.png" /></p>
<p><img src="gfx/ios.png" /></p>
</div>
</div>
</div>
</div>
</section>-->
<section class="other-features">
<div class="wrapper">
<header class="section-header span-10 precision">
<h1>Other features</h1>
</header>
<div class="row">
<div class="col span-6">
<div class="floatleft"><img src="gfx/gyro_icon6.png" /></div>
<div class="organize">
<h3>Motoruino 2</h3>
<p>Motoruino 2 is a fully featured electronics board designed with advanced robotics in mind.<br>100% Arduino compatible.</p>
</div>
</div>
<div class="col span-6">
<div class="floatleft"><img src="gfx/gyro_icon8.png" /></div>
<div class="organize">
<h3>Programming Languages</h3>
<p>Use a full set of Arduino libraries to have access to all Gyro's features, sensors and actuators. Or you can use Creator, a visual programming environment totally driven for physicalities.</p>
</div>
</div>
<div class="col span-6">
<div class="floatleft"><img src="gfx/gyro_icon7.png" /></div>
<div class="organize">
<h3>Connectivity</h3>
<p>Xbee socket makes connectivity possible through Bluetooth, WiFi or Radio.</p>
</div>
</div>
<div class="col span-6">
<div class="floatleft"><img src="gfx/gyro_icon9.png" /></div>
<div class="organize">
<h3>Customize</h3>
<p>Users are invited to create custom shells and acessories through templates provided in our website.</p>
</div>
</div>
</div>
</div>
</section>
<section class="sensor-actuators bg2">
<div class="wrapper">
<div class="row">
<div class="col span-6">
<h1>Sensors</h1>
<h2 class="organize">Perceive the world</h2>
<ul>
<li>Accelerometer</li>
<li>Gyroscope</li>
<li>Compass</li>
<li>Temperature</li>
<li>Motors Current</li>
<li>Battery</li>
<li>Microphone</li>
<li>Motor Encoders</li>
<li>Line Sensors</li>
<li>Ground and Frontal Color Sensor</li>
<li>Distance Sensors</li>
<li>Ambient Light Sensor</li>
<li>Gesture Sensor</li>
</ul>
</div>
<div class="col span-6">
<h1>Actuators</h1>
<h2 class="organize">Express emotions with sounds, colours and movement</h2>
<ul>
<li>2 DC Motor Controller</li>
<li>Buzzer</li>
<li>RGB Led</li>
<li>Whiteboard Marker</li>
</ul>
</div>
</div>
</div>
</section>
<section class="ecosystem">
<div class="wrapper">
<div class="row">
<div class="col span-6">
<img src="gfx/ecosystem.png" style="width: 100%; height: auto; vertical-align: bottom"/>
</div>
<div class="col span-6 bubble">
<h3>Gyro Ecosystem</h3>
<p><b>Gyro Ecosystem</b> is everything related to the platform.<br><br>
From expansions and upgrades for the robot platform , <b>apps for mobile and desktop</b> and also the capability to program Gyro with <b>Creator</b>. <br><br>A discussion forum where users can share their experiences and discuss new possibilities on a <b>vibrant community</b>.</p>
<p>
</div>
</div>
</div>
</section>
<section class="subscribe">
<div class="wrapper">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action=
"http://artica.us6.list-manage.com/subscribe/post?u=0352d6dc572a7606304f05e46&id=769f89844a"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<h3>Subscribe to Gyro announcement mailing list</h3>
<!--<div class="indicates-required">
<span class="asterisk">*</span> indicates required
</div>-->
<div class="row">
<div class="col-md-4">
<div class="mc-field-group">
<label for="mce-FNAME">First Name</label>
<input type="text" name="FNAME" id="mce-FNAME" />
</div>
</div>
<div class="col-md-4">
<div class="mc-field-group">
<label for="mce-LNAME">Last Name</label>
<input type="text" name="LNAME" id="mce-LNAME" />
</div>
</div>
<div class="col-md-4">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address<!--<span class=
"asterisk">*</span>--></label> <input type="email" name="EMAIL" class=
"required email" id="mce-EMAIL" aria-required="true" />
</div>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response c1" id="mce-error-response"></div>
<div class="response c1" id="mce-success-response"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px"><input type="text" name="b_763540ac4082811bbbdd107ce_9f207ae1a0" tabindex="-1"></div>
<div class="row col-md-12 clear">
<input type="submit" value="Subscribe" name="subscribe" id=
"mc-embedded-subscribe" class="btn btn-primary btn-block" />
</div>
</div>
</form>
</div><!--End mc_embed_signup-->
</div>
</section>
<script type="text/javascript" src="js/mc-validate.js"></script>