Difference between revisions of "Team:BostonU HW"

(Prototype team page)
 
 
(430 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{BostonU_HW}}
+
{{Global_Menubar}}
−
<html>
+
{{Team:BostonU_Hardware/CSS}}
 +
<html lang="en">
 +
<head>
 +
<meta charset="utf-8" />
 +
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
 +
<link rel="icon" type="image/png" href="assets/img/favicon.png">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
 +
<title>BostonU_HW Main Page</title>
  
−
<div class="column full_size" >
+
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
−
</div>
+
  
 +
<style>
 +
#page_background{
 +
background-image: url("https://static.igem.org/mediawiki/2017/9/94/LARGE_background_MARS.png");
 +
background-size:100%;
 +
}
 +
#Header_Pic{
  
 +
}
 +
#MARS{
 +
width: 100px;
 +
position: absolute;
 +
z-index: 1;
 +
margin-top: 3%;
 +
margin-left: 2%;
 +
/*margin-left: 4%;*/
 +
}
 +
#BACKGROUND{
 +
width: 100%;
 +
position: absolute;
 +
}
 +
#TITLE{
 +
position: absolute;
 +
width: 50%;
 +
margin-left: 42%;
 +
margin-top: 17%;
 +
z-index: 2;
  
−
<div class="column full_size" >
+
}
−
<h1> Welcome to iGEM 2017! </h1>
+
#FlowChart{
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
width: 100%;
−
</div>
+
}
 +
.text{
 +
margin-bottom: 5%;
 +
}
 +
.main-raised{
 +
margin-bottom: 10%;
 +
}
 +
/*img[usemap] {
 +
border: none;
 +
height: auto;
 +
max-width: 100%;
 +
width: auto;
 +
}*/
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size" >
+
#first-slider .main-container {
−
<h5>Before you start: </h5>
+
  padding: 0;
−
<p> Please read the following pages:</p>
+
}
−
<ul>
+
 
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
 
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
#first-slider .slide1 h3, #first-slider .slide2 h3, #first-slider .slide3 h3, #first-slider .slide4 h3{
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
    color: #fff;
−
</ul>
+
    font-size: 30px;
−
</div>
+
      text-transform: uppercase;
 +
      font-weight:700;
 +
}
 +
 
 +
#first-slider .slide1 h4,#first-slider .slide2 h4,#first-slider .slide3 h4,#first-slider .slide4 h4{
 +
    color: #fff;
 +
    font-size: 30px;
 +
      text-transform: uppercase;
 +
      font-weight:700;
 +
}
 +
#first-slider .slide1 .text-left ,#first-slider .slide3 .text-left #first-slider .slide2 .text-left{
 +
    padding-left: 40px;
 +
}
 +
 
 +
 
 +
#first-slider .carousel-indicators {
 +
  bottom: 0;
 +
}
 +
#first-slider .carousel-control.right,
 +
#first-slider .carousel-control.left {
 +
  background-image: none;
 +
}
 +
#first-slider .carousel .item {
 +
  min-height: 425px;
 +
  height: 100%;
 +
  width:100%;
 +
}
 +
 
 +
.carousel-inner .item .container {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    position: absolute;
 +
    bottom: 0;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
 
 +
 
 +
#first-slider .carousel-control {
 +
    width: 6%;
 +
        text-shadow: none;
 +
}
 +
 
 +
 
 +
#first-slider h1 {
 +
  text-align: center;
 +
  margin-bottom: 30px;
 +
  font-size: 30px;
 +
  font-weight: bold;
 +
}
 +
 
 +
#first-slider .p {
 +
  padding-top: 125px;
 +
  text-align: center;
 +
}
 +
 
 +
#first-slider .p a {
 +
  text-decoration: underline;
 +
}
 +
#first-slider .carousel-indicators li {
 +
    width: 14px;
 +
    height: 14px;
 +
    background-color: rgba(255,255,255,.4);
 +
  border:none;
 +
}
 +
#first-slider .carousel-indicators .active{
 +
    width: 16px;
 +
    height: 16px;
 +
    background-color: #fff;
 +
  border:none;
 +
}
 +
 
 +
 
 +
.carousel-fade .carousel-inner .item {
 +
  -webkit-transition-property: opacity;
 +
  transition-property: opacity;
 +
}
 +
.carousel-fade .carousel-inner .item,
 +
.carousel-fade .carousel-inner .active.left,
 +
.carousel-fade .carousel-inner .active.right {
 +
  opacity: 0;
 +
}
 +
.carousel-fade .carousel-inner .active,
 +
.carousel-fade .carousel-inner .next.left,
 +
.carousel-fade .carousel-inner .prev.right {
 +
  opacity: 1;
 +
}
 +
.carousel-fade .carousel-inner .next,
 +
.carousel-fade .carousel-inner .prev,
 +
.carousel-fade .carousel-inner .active.left,
 +
.carousel-fade .carousel-inner .active.right {
 +
  left: 0;
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
}
 +
.carousel-fade .carousel-control {
 +
  z-index: 2;
 +
}
 +
 
 +
.carousel-control #right, .carousel-control #left {
 +
    position: absolute;
 +
    top: 50%;
 +
    z-index: 5;
 +
    display: inline-block;
 +
}
 +
.carousel-control #left{
 +
    left: 50%;
 +
    width: 38px;
 +
    height: 38px;
 +
    margin-top: -15px;
 +
    font-size: 30px;
 +
    color: #fff;
 +
    border: 3px solid #ffffff;
 +
    -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
    border-radius: 53px;
 +
}
 +
.carousel-control #right{
 +
    right: 50%;
 +
    width: 38px;
 +
    height: 38px;
 +
    margin-top: -15px;
 +
    font-size: 30px;
 +
    color: #fff;
 +
    border: 3px solid #ffffff;
 +
    -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
    border-radius: 53px;
 +
}
 +
.carousel-control {
 +
    opacity: 1;
 +
    filter: alpha(opacity=100);
 +
}
 +
 
 +
 
 +
/********************************/
 +
/*      Slides backgrounds    */
 +
/********************************/
 +
#first-slider .slide1 {
 +
    background-image: url("#");
 +
/*background-size:contain;*/
 +
background-size: cover;
 +
background-position:center;
 +
    background-repeat: no-repeat;
 +
}
 +
#first-slider .slide2 {
 +
  background-image: url("#");
 +
/*background-size:contain;*/
 +
background-size: cover;
 +
background-position:center;
 +
  background-repeat: no-repeat;
 +
}
 +
#first-slider .slide3 {
 +
  background-image: url("#");
 +
/*background-size:contain;*/
 +
background-size: cover;
 +
background-position:center;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/********************************/
 +
/*          Media Queries      */
 +
/********************************/
 +
@media screen and (min-width: 980px){
 +
 
 +
}
 +
@media screen and (max-width: 640px){
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
<div class ="landing-page">
 +
<div class="wrapper" id="page_background">
 +
<div class="header" id="Header_Pic">
 +
<div class="header" id="Header_Pic">
 +
<img src="https://static.igem.org/mediawiki/2017/9/94/LARGE_background_MARS.png" id="BACKGROUND">
 +
<div class="container" margin-top:"2%">
 +
<div class="col-md-5">
  
−
<div class="column half_size" >
+
<img src="https://static.igem.org/mediawiki/2017/2/22/MARSLogo2.png" width="100%" style="margin-top:-20%">
−
<div class="highlight">
+
−
<h5> Styling your wiki </h5>
+
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
 
</div>
 
</div>
 +
<div class="col-md-7">
 +
<img src="https://static.igem.org/mediawiki/2017/4/40/MARS_Main.png" width="100%" style="margin-top:0%;"></div>
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
<div class="main main-raised" style="margin-bottom:50px;">
 +
<div class="container" style="margin-top:-100px; margin-bottom:3%;">
 +
<h1 class="text-center">Welcome to the 2017 BostonU HW Project: MARS</h1>
 +
<div class="text">
 +
Microfluidics is often an overlooked tool in the field of synthetic biology because designing and using microfluidic chips requires specialized knowledge. Our project, MARS (Microfluidic Applications for Research in Synbio), aims to increase the accessibility of low-cost and easy to use microfluidic systems for the synthetic biology community.
 +
<br>
 +
<br>
 +
The typical design, build and fabrication flow utilized in microfluidics requires significant intellectual investment, technical agility, a high startup cost and time investment. The 2016 iGEM Hardware Team, <a href="https://2016.igem.org/Team:BostonU_HW">Neptune</a>, in conjunction with CIDAR Lab created an alternative software workflow tackling design and manufacturing barriers. What our team focused on is the implementation stage of this workflow, ensuring that synthetic biologists are able to effectively use the tools provided to them.
 +
<br>
 +
<br>
 +
The main goals of MARS are to:
 +
<ol><br><b>
 +
<li>Increase accessibility of Microfluidics</li>
 +
<li>Design chips that are relevant to the day to day protocols in synthetic biology labs which can be used together to perform more complex protocols </li>
 +
<li>Create and provide a standardized method of evaluating chip functionality </li>
 +
</b></ol>
 +
<br>
 +
These three goals led to the creation of the three main branches of MARS: Microfluidics 101, the MARS Repository and Fluid Functionality. Using this end to end system, microfluidics can become a more accessible and practical tool for synthetic biologists to integrate into their labs.
 +
<br>
 +
<br>
 +
Use the graphic and images below to navigate the three branches of MARS and get a more in-depth look at what we have created over the summer.
 +
</div>
 +
</div>
 +
</div>
  
−
<div class="column full_size" >
+
<div class="main main-raised" style="margin-top:5%" id="uF_101">
−
<h5> Wiki template information </h5>
+
<div class="container">
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
<div class="text" style="margin-bottom:3%;">
 +
<div class = col-md-5>
 +
<h1>Giant Jamboree</h1><h2>Awards</h2>
 +
We are extremely proud to have won <b>Best Hardware Project</b> at the Jamboree!
 +
<br><br>
 +
Our team was also awarded with a Gold Medal for our research efforts.<br>
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/d/d2/Buhwjam.jpeg/1200px-Buhwjam.jpeg" width=100% margin-bottom=150px><br><br>
 +
</div>
 +
<div class = col-md-7><br>
 +
<img src = "https://static.igem.org/mediawiki/2017/thumb/5/58/SP_BU_Hardware_Team_iGEM_2017_Awards.jpg/1200px-SP_BU_Hardware_Team_iGEM_2017_Awards.jpg" width=100% margin-bottom=150px><br>
 +
</div>
 +
  
−
</div>
 
  
  
 +
</div>
 +
</div>
 +
</div>
  
 +
  
−
<div class="column half_size" >
 
−
<h5> Editing your wiki </h5>
 
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
 
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
 
  
−
</div>
 
  
 +
<div class="container">
  
−
<div class="column half_size" >
+
<!-- <div class="col-md-10 col-md-offset-1" style="margin-bottom:50px"> -->
−
<h5>Tips</h5>
+
<div class="container" style="margin-bottom:50px">
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
−
<ul>
+
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
 +
<div id="first-slider" class="">
 +
<div id="carousel-example-generic" class="carousel slide carousel-fade">
 +
<!-- Wrapper for slides -->
 +
<div class="carousel-inner" role="listbox">
 +
<!-- Item 1 -->
 +
<div class="item slide1">
 +
<div class="row">
 +
<!-- <div class="container"> -->
 +
<div class="container">
 +
<div class="col-md-4 text-right" style="margin-left:30px;">
 +
<h3 class="">Click to Explore:</h3>
  
−
<div class="column half_size" >
+
<h4 class="">Cell Lysis</h4>
−
<h5>Inspiration</h5>
+
</div>
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
<div class="col-md-8 text-left">
−
<ul>
+
<a href="https://2017.igem.org/Team:BostonU_HW/Lysis">
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
<img style="max-width: 570px;" src="https://static.igem.org/mediawiki/2017/0/08/MARS_Lysis_M.png" class="">
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
</a>
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
</div>
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
</div>
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
</div>
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
</div>
−
</ul>
+
<!-- Item 2 -->
−
</div>
+
<div class="item slide2 active">
 +
<div class="row">
 +
<!-- <div class="container"> -->
 +
<div class="container">
 +
<div class="col-md-4 text-right" style="margin-left:30px;">
 +
<h3 class="">Click to Explore:</h3>
 +
 
 +
<h4 class="">Transformation</h4>
 +
 
 +
</div>
 +
<div class="col-md-8 text-left" style="padding-left:40px;">
 +
<a href="https://2017.igem.org/Team:BostonU_HW/Transformation">
 +
<img style="max-width: 570px;" src="https://static.igem.org/mediawiki/2017/4/41/MARS_Transformation_MF.png" class="">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Item 3 -->
 +
<div class="item slide3">
 +
<div class="row">
 +
<!-- <div class="container"> -->
 +
<div class="container">
 +
<div class="col-md-4 text-right" style="margin-left:30px;">
 +
<h3 class="">Click to Explore:</h3>
 +
 
 +
<h4 class="">Cell Sorting</h4>
 +
 
 +
</div>
 +
<div class="col-md-8 text-left" style="padding-left:40px;">
 +
<a href="https://2017.igem.org/Team:BostonU_HW/Isolation">
 +
<img style="max-width: 570px;" src="https://static.igem.org/mediawiki/2017/thumb/7/7f/MARS_CellSorting_MF.png/800px-MARS_CellSorting_MF.png.jpeg" class="">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- End Wrapper for slides-->
 +
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 +
<i class="material-icons" id="left">arrow_backward</i>
 +
</a>
 +
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 +
<i class="material-icons" id="right">arrow_forward</i>
 +
</a>
 +
 
 +
<!-- Indicators -->
 +
<div class="col-md-6">
 +
<ol class="carousel-indicators">
 +
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
 +
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
 +
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
 +
</ol>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
<div style="text-align:center;">
 +
<img src="https://static.igem.org/mediawiki/2017/5/57/MARS_Updated_Flow.png" id="map-image" style="width:1265px; height:640px;" alt="" usemap="#map" />
 +
</div>
 +
<map name="map">
 +
    <area href="https://2017.igem.org/Team:BostonU_HW/IntrouF" shape="circle" coords="540, 525, 87" />
 +
    <area href="https://2017.igem.org/Team:BostonU_HW/Model" shape="circle" coords="741, 526, 88" />
 +
    <area href="https://2017.igem.org/Team:BostonU_HW/Collaborations" shape="circle" coords="842, 116, 87" />
 +
    <area href="https://2017.igem.org/Team:BostonU_HW/Demonstrate" shape="circle" coords="640, 115, 88" />
 +
    <area href="https://2017.igem.org/Team:BostonU_HW/LearnMARS" shape="circle" coords="439, 114, 86" />
 +
</map>
 +
 
 +
</div>
 +
 
 +
<!-- THIS IS WITH CONTACT ON BOTTOM -->
 +
 
 +
<!-- <div class="wrapper" style="background:#1c1f1f; margin-top:0px;margin-right:0px !important; margin-left:0px !important;" id="Footer">
 +
<div class="container" style="text-align:center !important">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0e/MARS_SponsorsFinal.png" style="width:100%; margin-top:30px;">
 +
 
 +
<div class="col-md-3 col-md-offset-2" style="color:white; margin-bottom:30px;">
 +
<h1>CONTACT US</h1>
 +
</div>
 +
<div style="text-align:center;">
 +
<div class="col-md-2">
 +
<a href="mailto:igembuhw@gmail.com">
 +
<img src="https://static.igem.org/mediawiki/2017/7/74/MARS_WHITEEmail.png" style="width:100px;">
 +
</a>
 +
</div>
 +
<div class="col-md-2">
 +
<a href="https://www.instagram.com/buigemhardware/?hl=en">
 +
<img src="https://static.igem.org/mediawiki/2017/9/93/MARS_Final_insta.png" style="width:100px;">
 +
</a>
 +
</div>
 +
<div class="col-md-2">
 +
<a href="https://twitter.com/igemhwbu">
 +
<img src="https://static.igem.org/mediawiki/2017/b/b6/MARS_Twitter_White.png" style="width:100px;">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div> -->
 +
 
 +
<!-- THIS IS WITH CONTACT ON SIDE -->
 +
 
 +
<!-- Image Map Generated by http://www.image-map.net/ -->
 +
<!-- <img src="https://static.igem.org/mediawiki/2017/0/0e/MARS_SponsorsFinal.png" usemap="#image-map">
 +
 
 +
<map name="image-map">
 +
    <area target="_self" alt="LCP" title="LCP" href="https://www.programmingbiology.org/" coords="1,7,449,152" shape="rect">
 +
    <area target="_self" alt="Phenomyx" title="Phenomyx" href="https://labcentral.org/resident-companies/phenomyx" coords="466,29,788,127" shape="rect">
 +
    <area target="_self" alt="CIDAR" title="CIDAR" href="http://cidarlab.org/" coords="818,1,1190,184" shape="rect">
 +
    <area target="_self" alt="STEMP" title="STEMP" href="https://www.stempathways.org/" coords="1204,7,1513,179" shape="rect">
 +
    <area target="_self" alt="NSF" title="NSF" href="https://www.nsf.gov/" coords="4,166,229,377" shape="rect">
 +
    <area target="_self" alt="BU" title="BU" href="http://www.bu.edu/" coords="238,210,545,362" shape="rect">
 +
    <area target="_self" alt="DRAPER" title="DRAPER" href="http://www.draper.com/" coords="571,239,1096,329" shape="rect">
 +
    <area target="_self" alt="ALine" title="ALine" href="https://alineinc.com/" coords="1111,229,1535,337" shape="rect">
 +
</map> -->
 +
 
 +
 
 +
<div class="wrapper" style="background:#1c1f1f; margin-top:0px;margin-right:0px !important; margin-left:0px !important;" id="Footer">
 +
<div class="container" style="text-align:center !important">
 +
 
 +
<div class="col-md-2" style="color:white; margin-bottom:30px; margin-top:5px;">
 +
<h3>CONTACT US</h3>
 +
<div style="text-align:center;">
 +
<a href="mailto:igembuhw@gmail.com">
 +
<img src="https://static.igem.org/mediawiki/2017/7/74/MARS_WHITEEmail.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
<a href="https://www.instagram.com/buigemhardware/?hl=en">
 +
<img src="https://static.igem.org/mediawiki/2017/9/93/MARS_Final_insta.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
<a href="https://twitter.com/igemhwbu">
 +
<img src="https://static.igem.org/mediawiki/2017/b/b6/MARS_Twitter_White.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
</div>
 +
</div>
 +
<div class="col-md-10" style="margin-bottom:30px;">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0e/MARS_SponsorsFinal.png" style="width:100%; margin-top:30px;" usemap="#image-map">
 +
</div>
 +
</div>
  
−
<div class="column half_size" >
+
</div>
−
<h5> Uploading pictures and files </h5>
+
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
  
−
<a href="https://2017.igem.org/Special:Upload">
 
−
UPLOAD FILES
 
−
</a>
 
−
</p>
 
 
</div>
 
</div>
  
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(e) {
 +
    $('img[usemap]').rwdImageMaps();
 +
});</script>
 +
<!-- <script type="text/javascript">$('map').imageMapResize();</script> -->
  
 +
<script>
 +
(function( $ ) {
  
 +
    //Function to animate slider captions
 +
function doAnimations( elems ) {
 +
//Cache the animationend event in a variable
 +
var animEndEv = 'webkitAnimationEnd animationend';
  
 +
elems.each(function () {
 +
var $this = $(this),
 +
$animationType = $this.data('animation');
 +
$this.addClass($animationType).one(animEndEv, function () {
 +
$this.removeClass($animationType);
 +
});
 +
});
 +
}
  
 +
//Variables on page load
 +
var $myCarousel = $('#carousel-example-generic'),
 +
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
  
 +
//Initialize carousel
 +
$myCarousel.carousel();
 +
 +
//Animate captions in first slide on page load
 +
doAnimations($firstAnimatingElems);
 +
 +
//Pause carousel
 +
$myCarousel.carousel('pause');
 +
 +
 +
//Other slides to be animated on carousel slide event
 +
$myCarousel.on('slide.bs.carousel', function (e) {
 +
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
 +
doAnimations($animatingElems);
 +
});
 +
    $('#carousel-example-generic').carousel({
 +
        interval:3000,
 +
        pause: "false"
 +
    });
 +
 +
})(jQuery);
 +
 +
</script>
 +
 +
</body>
  
 
</html>
 
</html>
 +
 +
{{Team:BostonU_Hardware/Javascript}}

Latest revision as of 01:59, 1 December 2017

BostonU_HW

BostonU_HW Main Page

Welcome to the 2017 BostonU HW Project: MARS

Microfluidics is often an overlooked tool in the field of synthetic biology because designing and using microfluidic chips requires specialized knowledge. Our project, MARS (Microfluidic Applications for Research in Synbio), aims to increase the accessibility of low-cost and easy to use microfluidic systems for the synthetic biology community.

The typical design, build and fabrication flow utilized in microfluidics requires significant intellectual investment, technical agility, a high startup cost and time investment. The 2016 iGEM Hardware Team, Neptune, in conjunction with CIDAR Lab created an alternative software workflow tackling design and manufacturing barriers. What our team focused on is the implementation stage of this workflow, ensuring that synthetic biologists are able to effectively use the tools provided to them.

The main goals of MARS are to:

  1. Increase accessibility of Microfluidics
  2. Design chips that are relevant to the day to day protocols in synthetic biology labs which can be used together to perform more complex protocols
  3. Create and provide a standardized method of evaluating chip functionality

These three goals led to the creation of the three main branches of MARS: Microfluidics 101, the MARS Repository and Fluid Functionality. Using this end to end system, microfluidics can become a more accessible and practical tool for synthetic biologists to integrate into their labs.

Use the graphic and images below to navigate the three branches of MARS and get a more in-depth look at what we have created over the summer.

Giant Jamboree

Awards

We are extremely proud to have won Best Hardware Project at the Jamboree!

Our team was also awarded with a Gold Medal for our research efforts.