-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
557 lines (480 loc) · 22.6 KB
/
index.html
File metadata and controls
557 lines (480 loc) · 22.6 KB
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
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SHIELD - Free Bootstrap 3 Theme">
<meta name="author" content="Carlos Alvarez - Alvarez.is - blacktie.co">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title> Robotics Club @ UCSB</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link href="assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-rocket" style="font-size:30px; color:#3498db;"></span>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-rocket" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li> <a href="#about" class="smoothScroll"> About</a></li>
<li> <a href="#services" class="smoothScroll"> Sponsors</a></li>
<li> <a href="#team" class="smoothScroll"> Team</a></li>
<li> <a href="#portfolio" class="smoothScroll"> Portfolio</a></li>
<li> <a href="#blog" class="smoothScroll"> Events</a></li>
<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- ==== HEADERWRAP ==== -->
<div id="headerwrap" id="home" name="home">
<header class="clearfix">
<h1><span class="icon icon-rocket"></span></h1>
<p>Robotics Club</p>
<p>University of California Santa Barbara</p>
</header>
</div><!-- /headerwrap -->
<!-- ==== GREYWRAP ==== -->
<div id="greywrap">
<div class="row">
<div class="col-lg-4 callout">
<span class="icon icon-screen"></span>
<h2>Coding and Building</h2>
<p>Come to our next meeting to help build and program a robot! </p>
</div><!-- col-lg-4 -->
<div class="col-lg-4 callout">
<span class="icon icon-file"></span>
<h2>Homework</h2>
<p>Are you stuck on your CS, ECE, or ME homework? Then ask one of the officers for some help. </p>
</div><!-- col-lg-4 -->
<div class="col-lg-4 callout">
<span class="icon icon-bubble"></span>
<h2>Have Fun!</h2>
<p>By attending one of our meetings you will meet other people sharing the same passion for robot as you. </p>
</div><!-- col-lg-4 -->
</div><!-- row -->
</div><!-- greywrap -->
<!-- ==== ABOUT ==== -->
<div class="container" id="about" name="about">
<div class="row white">
<br>
<h1 class="centered">A LITTLE ABOUT OUR CLUB</h1>
<hr>
<div class="col-lg-6">
<p>Robotics Club @ UCSB is a relatively new club founded in 2011. The main purpose of the club is to gather a group of undergraduate students interested in the area of robotics. We are currently composed of about ten people and are still looking for students who are eager to learn about and contribute to the development of robots.</p>
</div><!-- col-lg-6 -->
<div class="col-lg-6">
<p>The club is primarily a meeting point for motivated individuals and, as a consequence, projects are mainly member inspired and developed with virtually no assistance from professors or graduate students. We wholeheartedly embrace, and fund, those willing to put in the time to research and follow a project until its completion.</p>
</div><!-- col-lg-6 -->
</div><!-- row -->
</div><!-- container -->
<!-- ==== SECTION DIVIDER1 -->
<section class="section-divider textdivider divider1">
<div class="container">
<h1>OUR MISSION</h1>
<hr>
<p>We are dedicated to creating an environment where students can apply their social and robotics skills through projects.</p>
</div><!-- container -->
</section><!-- section -->
<!-- ==== SERVICES ==== -->
<div class="container" id="services" name="services">
<br>
<br>
<div class="row">
<h2 class="centered">ACCOMPLISHING OUR MISSION</h2>
<hr>
<br>
<div class="col-lg-offset-2 col-lg-8">
<p>To create such an environment, club members meet once per week on Friday at 2:30PM. During these meetings, upperclassmen helps new club members acquire new basic robotics skills such as soldering or building a basic robotic car connected to multiple sensors.
</p>
<p>However, we need your help to be able to grow. All of our events are free of charge and there is no registration fee for new members. Your sponsorship is much appreciated and will help us expand our future projects.</p>
<p>If you wish to make a donation to the club, please connect Gauthier Dieppedalle at dieppedalle@umail.ucsb.edu. We appreciate and are very thankful to any kind of donations given to us.</p>
</div><!-- col-lg -->
</div><!-- row -->
<div class="row">
<h2 class="centered">OUR CURRENT SPONSORS</h2>
<hr>
<br>
<div class="col-lg-offset-2 col-lg-8">
<img class="img-responsive" src="assets/img/sponsors.jpg" alt="">
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<!-- ==== SECTION DIVIDER2 -->
<section class="section-divider textdivider divider2">
<div class="container">
<h1>MEETINGS</h1>
<hr>
<p>For Fall quarter 2014, we will be meeting Friday at 2:30PM in HFH 3120. If you desire any future details please contact any of the current officers.</p>
</div><!-- container -->
</section><!-- section -->
<!-- ==== TEAM MEMBERS ==== -->
<div class="container" id="team" name="team">
<br>
<div class="row white centered">
<h1 class="centered">OFFICERS</h1>
<hr>
<br>
<br>
<div class="col-lg-3 centered">
<img class="img img-circle" src="assets/img/team/gauthier.jpg" height="120px" width="120px" alt="">
<br>
<h4><b>Gauthier Dieppedalle</b></h4>
<a href="#" class="icon icon-quill"></a>
<a href="#" class="icon icon-laptop"></a>
<p>President & Webmaster</p>
</div><!-- col-lg-3 -->
<div class="col-lg-3 centered">
<img class="img img-circle" src="assets/img/team/nickolas2.jpg" height="120px" width="120px" alt="">
<br>
<h4><b>Nickolas Clinton</b></h4>
<a href="#" class="icon icon-earth"></a>
<p>External VP</p>
</div><!-- col-lg-3 -->
<div class="col-lg-3 centered">
<img class="img img-circle" src="assets/img/team/patrick.jpg" height="120px" width="120px" alt="">
<br>
<h4><b>Patrick Clary</b></h4>
<a href="#" class="icon icon-users"></a>
<p>Internal VP</p>
</div><!-- col-lg-3 -->
<div class="col-lg-3 centered">
<img class="img img-circle" src="assets/img/team/tirion.jpg" height="120px" width="120px" alt="">
<br>
<h4><b>Tirion Wray</b></h4>
<a href="#" class="icon icon-coin"></a>
<p>Treasurer</p>
</div><!-- col-lg-3 -->
</div><!-- row -->
</div><!-- container -->
<!-- ==== GREYWRAP ==== -->
<div id="greywrap">
<div class="container">
<div class="row">
<div class="col-lg-8 centered">
<img class="img-responsive" src="assets/img/macbook.png" align="">
</div>
<div class="col-lg-4">
<h2>We Are Looking for New Members!</h2>
<p>Do you want to be part of the Robotics Club? Sure you want, because we are a fun and challenging team! Here we both have fun and work hard to learn more about robots.</p>
<p><a href="#contact" class="btn btn-success">Contact Us</a></p>
</div>
</div><!-- row -->
</div>
<br>
<br>
</div><!-- greywrap -->
<!-- ==== SECTION DIVIDER3 -->
<section class="section-divider textdivider divider3">
<div class="container">
<h1>NO REGISTRATION FEES!</h1>
<hr>
<p>All events hosted by the club are free. Projects are entirely paid by the club.</p>
</div><!-- container -->
</section><!-- section -->
<!-- ==== PORTFOLIO ==== -->
<div class="container" id="portfolio" name="portfolio">
<br>
<div class="row">
<br>
<h1 class="centered">WE CREATE COOL STUFF</h1>
<hr>
<br>
<br>
</div><!-- /row -->
<div class="container">
<div class="row">
<!-- PORTFOLIO IMAGE 1 -->
<div class="col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/natcar2014.jpg" alt="">
<figcaption>
<h5>NATCAR 2014</h5>
<a data-toggle="modal" href="#Natcar2014" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="Natcar2014" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Natcar 2014</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/natcar2014.jpg" alt=""></p>
<p>Natcar is a design contest created by UC Davis and National Semiconductor and run in conjunction with UC Berkeley. It is currently sponsored by Texas Instruments. Teams design, build and race autonomous cars on a track marked by 1"-wide white tape. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- PORTFOLIO IMAGE 2 -->
<div class="col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/micromouse14.jpg" alt="">
<figcaption>
<h5>MICROMOUSE 2014</h5>
<a data-toggle="modal" href="#Micromouse2014" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="Micromouse2014" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Micromouse 2014</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/micromouse14.jpg" alt=""></p>
<p>Micromouse is an engineering design competition created by IEEE in the late 1970s. Small robotic "mice" solve a 16x16 cell maze. The mice are completely autonomous and must find their way from a predetermined starting position to the center of the maze. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- PORTFOLIO IMAGE 3 -->
<div class="col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/roboticarm.jpg" alt="">
<figcaption>
<h5>ROBOTIC ARM</h5>
<a data-toggle="modal" href="#roboticarm" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
</div><!-- /row -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="roboticarm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Robotic Arm</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/roboticarm.jpg" alt=""></p>
<p>The robotic arm is a type of programmable mechanical arm, with similar functions to a human arm. The goal of this project was to control a robotic arm with a joystick in order to pick up a ping-pong ball on a table. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- PORTFOLIO IMAGE 4 -->
<div class="row">
<div class="col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/natcar20131.jpg" alt="">
<figcaption>
<h5>VIACAR 2013</h5>
<a data-toggle="modal" href="#viacar2013" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="viacar2013" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Viacar 2013</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/natcar20131.jpg" alt=""></p>
<p>This was the first year that the club registered to a line-following robot. We raced an autonomous car which followed a track marked by 1-inch white tape on dark-colored carpet. Under the tape, there was a wire carrying a 100mA rms 75kHz sinusoidal signal. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- PORTFOLIO IMAGE 5 -->
<div class="col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/micromouse2013.jpg" alt="">
<figcaption>
<h5>MIRCROMOUSE 2013>
<a data-toggle="modal" href="#micromouse2013" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="micromouse2013" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Micromouse 2013</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/micromouse2013.jpg" alt=""></p>
<p>This was the first year that the club registered to a maze-finding robot. The robot had to solve the maze on its own.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- PORTFOLIO IMAGE 6 -->
<div class="col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="assets/img/portfolio/moreprojects.jpg" alt="">
<figcaption>
<h5>MORE PROJECTS TO COME</h5>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
</div><!-- /row -->
<br>
<br>
</div><!-- /row -->
</div><!-- /container -->
<!-- ==== SECTION DIVIDER4 ==== -->
<section class="section-divider textdivider divider4">
<div class="container">
<h1>NEW IDEAS</h1>
<hr>
<p>Come talk to our club members if you want to build you own project but don't have all the ressources or knowledge.</p>
</div><!-- container -->
</section><!-- section -->
<!-- ==== BLOG ==== -->
<div class="container" id="blog" name="blog">
<br>
<div class="row">
<br>
<h1 class="centered">EVENTS</h1>
<hr>
<br>
<br>
</div><!-- /row -->
<div class="row">
<div class="col-lg-6 blog-bg">
<div class="col-lg-4 centered">
<br>
<p><img class="img img-circle" src="assets/img/team/google.jpg" width="60px" height="60px"></p>
<h4>Google Groups</h4>
<h5>As of Fall 2014</h5>
</div>
<div class="col-lg-8 blog-content">
<h2>News</h2>
<p>All events notifications will be posted on the Robotics Club's Google Groups page.</p>
<br>
</div>
</div><!-- /col -->
<div class="col-lg-6 blog-bg">
<div class="col-lg-4 centered">
<br>
<p><img class="img img-circle" src="assets/img/team/engineering.jpg" width="60px" height="60px"></p>
<h4>Robotics Club</h4>
<h5>As of Fall 2014</h5>
</div>
<div class="col-lg-8 blog-content">
<h2>Steps to get reimbursement from the club</h2>
<p>Go to the OSL (Office of Student Life) UCSB website and sign in with your UCSB ID. Go to the Robotics Club page. Click "forms" on the left side of the page.Click "Accounting: Requisition", and then fill in the page.Go to OSL located in the SRB 2nd floor.Obtain an envelope and put your corresponding receipts inside. Give back the envelope to OSL.Then you will get your check either by mail or pick up.</p>
<br>
</div>
</div><!-- /col -->
</div><!-- /row -->
<br>
<br>
</div><!-- /container -->
<!-- ==== SECTION DIVIDER6 ==== -->
<section class="section-divider textdivider divider6">
<div class="container">
<h1>CRAFTED AT THE UNIVERSITY OF CALIFORNIA SANTA BARBARA.</h1>
<hr>
<p>Santa Barbara, CA</p>
<p>(408) 981 - 2014</p>
<p><a class="icon icon-drawer" href="#"></a> | <a class="icon icon-facebook" href="https://www.facebook.com/groups/roboticsclubatucsb/"></a></p>
</div><!-- container -->
</section><!-- section -->
<div class="container" id="contact" name="contact">
<div class="row">
<br>
<h1 class="centered">THANKS FOR VISITING US</h1>
<hr>
<br>
<br>
<div class="col-lg-4">
<h3>Contact Information</h3>
<p><span class="icon icon-location"></span> University of California Santa Barbara<br/>
<span class="icon icon-phone"></span> (408) 981 - 2014 <br/>
<span class="icon icon-envelop"></span> <a href="#"> dieppedalle@umail.ucsb.edu</a> <br/>
<span class="icon icon-facebook"></span> <a href="#"> Robotics Club @ UCSB </a> <br/>
</p>
</div><!-- col -->
<div class="col-lg-4">
<h3>Newsletter</h3>
<p>Register to our newsletter and be updated with the latests information regarding our club. Please click on the following link:
<a href="https://groups.google.com/forum/#!forum/ucsb-robotics-club"> https://groups.google.com/forum/#!forum/ucsb-robotics-club</a></p>
</div><!-- col -->
<div class="col-lg-4">
<h3>Support Us</h3>
<p>If you have any additional questions about the club or the website please contact any of the officers.</p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<div id="footerwrap">
<div class="container">
<h4>Robotics Club at the University of California Santa Barbara - Copyright 2014</h4>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/retina.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/jquery-func.js"></script>
</body>
</html>