Difference between revisions of "Team:BostonU HW"

Line 56: Line 56:
 
}*/
 
}*/
  
−
.carousel position: relative width: 600px height: 400px overflow: hidden margin: 0 auto box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) &:hover .slide:after,
 
−
.counter,
 
−
.slide:before opacity: 1 .slide float: right position: absolute z-index: 1 width: 600px height: 400px background-color: #eee text-align: center transition: opacity 0.4s opacity: 1 &:before content: attr(annot) display: block position: absolute left: 20px bottom: 20px color: rgba(255, 255, 255, 0.9) font-size: 14px font-weight: 300 z-index: 12 opacity: 0 transition: opacity 0.3s text-shadow: 0 0 1px black &:after content: attr(slide) display: block position: absolute bottom: 0 transition: opacity 0.3s width: 100% height: 80px opacity: 0 background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5)) text-align: left text-indent: 549px line-height: 101px font-size: 13px color: rgba(255, 255, 255, 0.9) text-shadow: 0 0 1px black .counter position: absolute bottom: 20px right: 1px height: 20px width: 60px z-index: 2 text-align: center color: #fff line-height: 21px font-size: 13px opacity: 0 transition: opacity 0.3s .faux-ui-facia top: 0 right: 0 float: right position: absolute margin-top:0 z-index: 9 height: 100% width: 100% opacity: 0 cursor: pointer &:checked z-index: 8+.slide opacity: 0 &:nth-child(1):checked z-index: 9 &:nth-child(1):checked float: left z-index: 9+.slide opacity: 1~.faux-ui-facia float: left z-index: 8+.slide opacity: 0 &:checked z-index: 9+.slide opacity: 1
 
  
 +
#first-slider .main-container {
 +
  padding: 0;
 +
}
 +
 +
 +
#first-slider .slide1 h3, #first-slider .slide2 h3, #first-slider .slide3 h3, #first-slider .slide4 h3{
 +
    color: #fff;
 +
    font-size: 30px;
 +
      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{
 +
    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 h3{
 +
  animation-delay: 1s;
 +
}
 +
#first-slider h4 {
 +
  animation-delay: 2s;
 +
}
 +
#first-slider h2 {
 +
  animation-delay: 3s;
 +
}
 +
 +
 +
#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 .fa-angle-right, .carousel-control .fa-angle-left {
 +
    position: absolute;
 +
    top: 50%;
 +
    z-index: 5;
 +
    display: inline-block;
 +
}
 +
.carousel-control .fa-angle-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 .fa-angle-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(https://s20.postimg.org/h50tgcuz1/image.jpg);
 +
      background-size: cover;
 +
    background-repeat: no-repeat;
 +
}
 +
#first-slider .slide2 {
 +
  background-image: url(https://s20.postimg.org/uxf8bzlql/image.jpg);
 +
      background-size: cover;
 +
    background-repeat: no-repeat;
 +
}
 +
#first-slider .slide3 {
 +
  background-image: url(https://s20.postimg.org/el56m97f1/image.jpg);
 +
      background-size: cover;
 +
    background-repeat: no-repeat;
 +
}
 +
#first-slider .slide4 {
 +
  background-image: url(https://s20.postimg.org/66pjy66dp/image.jpg);
 +
      background-size: cover;
 +
    background-repeat: no-repeat;
 +
}
 +
 +
 +
 +
 +
/********************************/
 +
/*          Media Queries      */
 +
/********************************/
 +
@media screen and (min-width: 980px){
 +
 +
}
 +
@media screen and (max-width: 640px){
 +
 +
}
  
 
</style>
 
</style>
Line 117: Line 306:
 
<div class="col-md-8" style="margin-bottom:50px">
 
<div class="col-md-8" style="margin-bottom:50px">
  
−
<div class="intro">
+
<div id="first-slider" class="">
−
<h1 class="intro__title">Pure CSS annotated, linear carousel</h1>
+
<div id="carousel-example-generic" class="carousel slide carousel-fade">
−
<p class="intro__body">This experimental carousel uses CSS pseudo classes, attribute values and sibling selectors to imitate a dynamic DOM state.</p>
+
<!-- Indicators -->
−
</div>
+
<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>
 +
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
 +
</ol>
 +
<!-- Wrapper for slides -->
 +
<div class="carousel-inner" role="listbox">
 +
<!-- Item 1 -->
 +
<div class="item slide1">
 +
<div class="row">
 +
<div class="container">
 +
<div class="col-md-3 text-right">
 +
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/pfmmo6qj1/window_domain.png"
 +
class="">
 +
</div>
 +
<div class="col-md-9 text-left">
 +
<h3 data-animation="animated bounceInDown" class="">Add images, or even your logo!</h3>
  
−
<div class="carousel">
+
<h4 data-animation="animated bounceInUp" class="">Easily use stunning effects</h4>
−
<input type="checkbox" class="faux-ui-facia">
+
</div>
−
<div class="slide" slide="5" annot="This is the fifth slide title. Photo by David Marcu.">
+
</div>
−
<img src="https://ununsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?q=75&fm=jpg&w=602" alt="Slide 5">
+
</div>
 
</div>
 
</div>
 +
<!-- Item 2 -->
 +
<div class="item slide2 active">
 +
<div class="row">
 +
<div class="container">
 +
<div class="col-md-7 text-left">
 +
<h3 data-animation="animated bounceInDown" class=""> 50 animation options A beautiful</h3>
  
 +
<h4 data-animation="animated bounceInUp" class="">Create beautiful slideshows </h4>
  
−
<input type="checkbox" class="faux-ui-facia">
+
</div>
−
<div class="slide" slide="4" annot="This is the fourth slide title. Photo by Ryan Lum.">
+
<div class="col-md-5 text-right">
−
<img src="https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&fm=jpg&w=600" alt="Slide 4">
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/sp11uneml/rack_server_unlock.png"
 +
class="">
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!-- Item 3 -->
 +
<div class="item slide3">
 +
<div class="row">
 +
<div class="container">
 +
<div class="col-md-7 text-left">
 +
<h3 data-animation="animated bounceInDown" class="">Simple Bootstrap Carousel</h3>
  
−
<input type="checkbox" class="faux-ui-facia">
+
<h4 data-animation="animated bounceInUp" class="">Bootstrap Image Carousel Slider with Animate.css</h4>
−
<div class="slide" slide="3" annot="This is the third slide title. Photo by Tomasz Paciorek.">
+
−
<img src="https://ununsplash.imgix.net/reserve/JaI1BywIT5Or8Jfmci1E_zakopane.jpg?q=75&fm=jpg&w=600"  alt="Slide 3">
+
−
</div>
+
  
−
<input type="checkbox" class="faux-ui-facia">
+
</div>
−
<div class="slide" slide="2" annot="This is the second slide title. Photo by S Charles.">
+
<div class="col-md-5 text-right">
−
<img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?fit=crop&fm=jpg&q=75&w=600" alt="Slide 2">
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/eq8xvxeq5/globe_network.png"
 +
class="">
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!-- Item 4 -->
 +
<div class="item slide4">
 +
<div class="row">
 +
<div class="container">
 +
<div class="col-md-7 text-left">
 +
<h3 data-animation="animated bounceInDown" class="">We are creative</h3>
  
−
<input type="checkbox" class="faux-ui-facia">
+
<h4 data-animation="animated bounceInUp" class="">Get start your next awesome project</h4>
  
−
<div class="slide" slide="1" annot="First slide title. Photo by Forrest Cavale.">
+
</div>
−
<img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?q=75&fm=jpg&w=601" alt="Slide 1">
+
<div class="col-md-5 text-right">
 +
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/9vf8xngel/internet_speed.png"
 +
class="">
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!-- End Item 4 -->
 +
</div>
 +
<!-- End Wrapper for slides--> <a class="left carousel-control" href="#carousel-example-generic" role="button"
 +
data-slide="prev">
 +
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
 +
</a>
 +
<a class="right carousel-control" href="#carousel-example-generic"
 +
role="button" data-slide="next">
 +
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
 +
</a>
  
−
<div class="counter" count="5"> / 5</div>
+
</div>
−
 
+
</div>
−
</div>
+
  
 
</div>
 
</div>
Line 159: Line 403:
  
  
−
<!-- <div class="row">
 
−
 
−
<div class="col-md-8 col-md-offset-2">
 
−
<div class="card card-raised card-carousel">
 
−
<div class="carousel slide" data-ride="carousel">
 
−
<div class="carousel slide" data-ride="carousel">
 
−
<ol class="carousel-indicators">
 
−
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 
−
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
 
−
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
 
−
</ol>
 
−
<div class="carousel-inner">
 
−
 
−
<div class="item-active">
 
−
<img src="https://static.igem.org/mediawiki/2017/1/19/MARS_Harvard_Logo.png">
 
−
<div class="carousel-caption">
 
−
<a href="#"><h4>Chip 1</h4></a>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="item">
 
−
<img src="https://static.igem.org/mediawiki/2017/1/19/MARS_Harvard_Logo.png">
 
−
<div class="carousel-caption">
 
−
<a href="#"><h4>Chip 2</h4></a>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="item">
 
−
<img src="https://static.igem.org/mediawiki/2017/1/19/MARS_Harvard_Logo.png">
 
−
<div class="carousel-caption">
 
−
<a href="#"><h4>Chip 3</h4></a>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
 
−
<i class="material-icons">replay</i>
 
−
</a>
 
−
 
−
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
 
−
<i class="material-icons">replay</i>
 
−
</a>
 
−
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div> -->
 
  
 
<div style="text-align:center;">
 
<div style="text-align:center;">
Line 300: Line 496:
 
});</script>
 
});</script>
 
<!-- <script type="text/javascript">$('map').imageMapResize();</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>
 
</body>

Revision as of 20:17, 31 October 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 previous iGEM Hardware Team 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 accessibilty 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 below to navigate the the three branches of MARS and get a more in-depth look at what we have created over the summer.