Difference between revisions of "Team:Penn/Overview"

 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Team:Penn/CSS}}
 
{{Team:Penn/CSS}}
 
<html>
 
<html>
 +
<head>
 +
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 +
<title>University of Pennsylvania iGEM</title>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 +
</head>
 
<style type="text/css">
 
<style type="text/css">
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
Line 20: Line 26:
 
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
 
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:16px; line-height:24px;}
+
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;}
 
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
 
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
  
Line 34: Line 40:
 
/* Section - Block */
 
/* Section - Block */
 
/**************************/
 
/**************************/
#parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
+
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;}
 
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
 
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
Line 62: Line 68:
 
   #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 
   #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 
}
 
}
@import url(http://c.boylett.uk/fonts/font-awesome/font-awesome.min.css);
 
body { background: url(http://c.boylett.uk/images/wallpapers/006.jpg) }
 
.music-player { position: absolute !important; top: 50%; left: 50%; margin: -207px 0 0 -207px }
 
 
.music-player
 
{
 
  position: relative;
 
  width: 415px;
 
  height: 415px;
 
  overflow: hidden;
 
  background: #252C36;
 
  border-radius: 50%;
 
  box-shadow: 0 1px 13px rgba(0, 0, 0, .55);
 
  user-select: none;
 
}
 
 
.music-player > .album
 
{
 
  position: absolute;
 
  top: -25%;
 
  width: 100%;
 
  height: auto;
 
  min-height: 415px;
 
}
 
 
.music-player > .dash
 
{
 
  position: absolute;
 
  right: 0;
 
  bottom: 0;
 
  left: 0;
 
  height: 300px;
 
  background: url(http://c.boylett.uk/generic/image_png_00001.png) center bottom repeat-x;
 
}
 
 
.music-player > .dash > a
 
{
 
  display: block;
 
  position: absolute;
 
  top: 50px;
 
  left: 12px;
 
  width: 24px;
 
  height: 24px;
 
  line-height: 24px;
 
  vertical-align: middle;
 
  font-size: 22px;
 
  text-decoration: none;
 
  color: #FFF;
 
  text-shadow: 0 1px 5px #000;
 
  transition: all .3s;
 
  opacity: .75;
 
}
 
 
.music-player > .dash > a[href="#share"] { left: auto; right: 55px; }
 
.music-player > .dash > a[href="#love"] { left: auto; right: 18px; }
 
.music-player > .dash > a:hover { opacity: 1 }
 
.music-player > .dash > a.fa-volume-off + .volume-level > em { display: none }
 
 
.music-player > .dash > .volume-level
 
{
 
  position: absolute;
 
  top: 57px;
 
  left: 45px;
 
  width: 40px;
 
  height: 6px;
 
  padding: 1px;
 
  overflow: hidden;
 
  border: 1px solid #FFF;
 
  border-radius: 3px;
 
  box-shadow: 0 1px 5px #000, inset 0 1px 5px rgba(0, 0, 0, .5);
 
  cursor: pointer;
 
  transition: all .3s;
 
  opacity: .75;
 
}
 
 
.music-player > .dash > .volume-level > em
 
{
 
  display: block;
 
  height: 6px;
 
  max-width: 100%;
 
  background: #FFF;
 
  box-shadow: 0 1px 5px #000;
 
  border-radius: 1.5px;
 
}
 
 
.music-player > .dash > .volume-level:hover { opacity: 1 }
 
 
.music-player > .dash > .seeker
 
{
 
  position: absolute;
 
  bottom: 7px;
 
  left: 50%;
 
  width: 400px;
 
  height: 203px;
 
  overflow: hidden;
 
  margin: 0 0 0 -200px;
 
}
 
 
.music-player > .dash > .seeker > .wheel
 
{
 
  position: absolute;
 
  bottom: 0;
 
  width: 364px;
 
  height: 364px;
 
  border: 18px solid #201B2B;
 
  border-radius: 100%;
 
}
 
 
.music-player > .dash > .seeker > .wheel > .progress
 
{
 
  position: absolute;
 
  bottom: -14px;
 
  left: 50%;
 
  width: 392px;
 
  height: 392px;
 
  overflow: hidden;
 
  margin: 0 0 0 -196px;
 
  border-radius: 100%;
 
  transform-origin: 50% 50%;
 
  background: url(http://c.boylett.co.uk/generic/image_png_00003.png);
 
  transform: rotate(145deg);
 
}
 
 
.music-player > .dash > a[href="#seek"]
 
{
 
  display: block;
 
  position: absolute;
 
  top: -97px;
 
  left: 50%;
 
  width: 10px;
 
  height: 10px;
 
  margin: -9px 0 0 -9px;
 
  background: #3A304D;
 
  border: 4px solid #FFF;
 
  border-radius: 100%;
 
  opacity: 1;
 
  transition: none;
 
  transform: rotate(145deg);
 
  transform-origin: 9px 200px;
 
}
 
 
.music-player > .dash > .controls
 
{
 
  position: absolute;
 
  top: 85px;
 
  left: 50%;
 
  width: 180px;
 
  height: 55px;
 
  margin: 0 0 0 -90px;
 
  background: #201F22;
 
  border-radius: 23px;
 
}
 
 
.music-player > .dash > .controls:before
 
{
 
  content: "";
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  width: 124px;
 
  height: 88px;
 
  margin: -44px 0 0 -62px;
 
  background: #201F22;
 
  border-radius: 125%;
 
}
 
 
.music-player > .dash > .controls > a[href="#play"]
 
{
 
  content: "";
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  width: 88px;
 
  height: 58px;
 
  line-height: 58px;
 
  vertical-align: middle;
 
  text-align: center;
 
  text-decoration: none;
 
  font-size: 32px;
 
  color: #FFF;
 
  margin: -29px 0 0 -44px;
 
  background: #F5696C;
 
  border-radius: 29px;
 
  transition: all .3s;
 
}
 
 
.music-player > .dash > .controls > a[href="#play"]:hover
 
{
 
  background: #ED484B;
 
  box-shadow: 0 0 5px #F5696C;
 
  text-shadow: 0 0 5px #FFF;
 
}
 
 
.music-player > .dash > .controls > a[href="#back"], .music-player > .dash > .controls > a[href="#forward"]
 
{
 
  position: absolute;
 
  top: 50%;
 
  left: 5px;
 
  width: 35px;
 
  height: 30px;
 
  margin: -15px 0 0;
 
  line-height: 30px;
 
  vertical-align: middle;
 
  text-align: center;
 
  text-decoration: none;
 
  font-size: 22px;
 
  color: #BDBCBD;
 
  transition: all .3s;
 
}
 
 
.music-player > .dash > .controls > a[href="#forward"] { left: auto; right: 5px }
 
 
.music-player > .dash > .controls > a[href="#back"]:hover, .music-player > .dash > .controls > a[href="#forward"]:hover
 
{
 
  color: #FFF;
 
  text-shadow: 0 0 5px #BDBCBD;
 
}
 
 
.music-player > .dash > .info
 
{
 
  position: absolute;
 
  bottom: 55px;
 
  left: 50%;
 
  width: 180px;
 
  margin: 0 0 0 -90px;
 
  text-align: center;
 
  font-family: Segoe UI, sans-serif;
 
  font-size: 12px;
 
  color: #FFF;
 
  cursor: default;
 
}
 
 
.music-player > .dash > .info > i
 
{
 
  display: inline-block;
 
  padding: 0 10px;
 
  height: 20px;
 
  line-height: 20px;
 
  vertical-align: middle;
 
  font-size: 13px;
 
  font-style: normal;
 
  background: #201F22;
 
  border-radius: 10px;
 
}
 
 
.music-player > .dash > .info > label
 
{
 
  display: block;
 
  margin: 18px 0 5px;
 
}
 
 
.music-player > .dash > .info > small { font-size: 10px }
 
 
</style>
 
</style>
  
<script type="text/javascript">
+
<div id="parallax-world-of-ugg">
var Player =
+
{
+
  isMuted: false,
+
  isPlaying: false,
+
 
    
 
    
  duration: 0,
+
<section>
   current: 0,
+
   <div class="title">
    
+
   <h1>PROJECT OVERVIEW</h1>
  mute: function()
+
</div>
   {
+
   <div class="block">
    this.isMuted = this.isMuted ? false : true;
+
      <p class="margin-top-10"> The emerging field of optogenetics has driven development of truly fascinating bacterial systems. Scientists have been able to achieve optogenetic control of cell function using engineered photoreceptors, edge detection of an illuminated design, and even patterns on cells with fluorescent proteins. The field still harbors a lot of potential that has yet to be explored. (S Karig)</p>
    if(window.console) console.log(this.isMuted ? 'Muted' : 'Unmuted');
+
     <p class="margin-top-10">The Penn 2015 iGEM team attempted to exploit this potential by using light to drive cell communication. Talk between bacterial populations, known as quorum sensing is reliant on diffusion of chemical autoinducers produced by the cell. This process enables microorganisms to modify gene expression as a function of cell density. The reliance of quorum sensing on chemical diffusion restricts communication to within common environments and compatible conditions. However, the use of bioluminescent sender cells and light-sensitive receiver cells to drive talk between cells overcomes these limitations. The system is effective across boundaries, in different environments, and in populations with different growth conditions or antibiotic resistances. Additionally, future research teams can also take advantage of the orthogonality of light to chemicals and spatiotemporal control of light in any future project endeavors.</p>
   
+
<p class="margin-top-10">The design of our project was inspired by an electrical engineering system known as a photocoupler (pictured below.) </p>
    return this
+
  },
+
 
+
  play: function()
+
  {
+
    this.isPlaying = this.isPlaying ? false : true;
+
    if(window.console) console.log(this.isPlaying ? 'Playing' : 'Paused');
+
      
+
    return this
+
  },
+
 
+
  skip: function(d)
+
  {
+
    if(window.console) console.log('Skipping', d == 'l' ? 'Backwards' : 'Forwards')
+
   
+
    this.current = 0;
+
   
+
    return this
+
  },
+
 
+
  vol: function(v)
+
  {
+
    if(window.console) console.log('Set volume to:', v, '%');
+
   
+
    return this
+
  },
+
 
+
  setDuration: function(s)
+
  {
+
    this.duration = s;
+
   
+
    var m = 0;
+
    while(s > 60) { m ++; s -= 60 }
+
    while(String(s).length == 1) s = '0' + s;
+
   
+
    $('.music-player > .dash > .info > i > [name="duration"]').html(m + ':' + s);
+
   
+
    return this
+
  },
+
 
+
  setCurrent: function(s)
+
  {
+
    this.current = s;
+
   
+
    var m = 0, pct = this.current / this.duration;
+
    while(s > 60) { m ++; s -= 60 }
+
    while(String(s).length == 1) s = '0' + s;
+
   
+
    $('.music-player > .dash > .info > i > [name="current"]').html(m + ':' + s);
+
   
+
    $('.music-player > .dash > a[href="#seek"]:not(:active)').each(function()
+
    {
+
      var rotate = 'rotate(-' + ((pct * 180) + 90) + 'deg)';
+
     
+
      $(this).add('.music-player > .dash > .seeker > .wheel > .progress').css(
+
      {
+
        '-webkit-transform': rotate,
+
        '-moz-transform': rotate,
+
        '-ms-transform': rotate,
+
        '-o-transform': rotate,
+
        'transform' : rotate
+
      });
+
    });
+
   
+
    return this
+
  },
+
 
+
  playing: function()
+
  {
+
    if(!this.isPlaying)
+
      return this;
+
   
+
    if(this.current > (this.duration - 1))
+
      this.skip('r');
+
    else
+
      this.setCurrent(this.current + 1);
+
   
+
    return this
+
  }
+
};
+
  
$(function()
 
{
 
  setInterval(function(){ Player.playing() }, 1000);
 
  Player.setDuration(230);
 
  Player.setCurrent(180);
 
 
 
  Player.play();
 
 
 
  $('.music-player > .dash > a[href="#mute"]').click(function()
 
  {
 
    $(this).toggleClass('fa-volume-up fa-volume-off');
 
    Player.mute();
 
   
 
    return !1;
 
  });
 
 
 
  $('.music-player > .dash > .controls > a[href="#play"]').click(function()
 
  {
 
    $(this).toggleClass('fa-play fa-pause');
 
    Player.play();
 
   
 
    return !1;
 
  });
 
 
 
  $('.music-player > .dash > .controls > a[href="#back"]').click(function(){ Player.skip('l'); return !1 });
 
  $('.music-player > .dash > .controls > a[href="#forward"]').click(function(){ Player.skip('r'); return !1 });
 
 
 
  $('.music-player > .dash > .volume-level').bind('mousemove', function(e)
 
  {
 
    if($(this).is(':active'))
 
    {
 
      $(this).find('em').css('width', e.pageX - $(this).offset().left);
 
      var vol = $(this).find('em').width() / $(this).width() * 100;
 
     
 
      Player.vol(vol > 100 ? 100 : vol);
 
    }
 
  });
 
 
 
  $('.music-player').on('mousemove', function(e)
 
  {
 
    //http://jsfiddle.net/sandeeprajoria/x5APH/11/
 
   
 
    var wheel = $(this).find('.dash > .seeker > .wheel'), rotate,
 
      x = (e.pageX - 20) - wheel.offset().left - wheel.width() / 2,
 
      y = -1 * ((e.pageY - 20) - wheel.offset().top - wheel.height() / 2),
 
      deg = (90 - Math.atan2(y, x) * (180 / Math.PI)), pct, nc, nm = 0;
 
      if(deg > 270) deg = 270; else if(deg < 90) deg = 90;
 
      rotate = 'rotate(' + deg + 'deg)';
 
      pct = deg; pct = 270 - pct; pct = pct / 180;
 
      nc = Math.round(Player.duration * pct);
 
 
 
    $(this).find('.dash > a[href="#seek"]:active').each(function()
 
    {
 
      Player.current = nc;
 
      while(nc > 60) { nm ++; nc -= 60 }
 
      while(String(nc).length == 1) nc = '0' + nc;
 
     
 
      $('.music-player > .dash > .info > i > [name="current"]').html(nm + ':' + nc);
 
     
 
      $(this).add('.music-player > .dash > .seeker > .wheel > .progress').css(
 
      {
 
        '-webkit-transform': rotate,
 
        '-moz-transform': rotate,
 
        '-ms-transform': rotate,
 
        '-o-transform': rotate,
 
        'transform' : rotate
 
      });
 
    });
 
  });
 
});
 
</style>
 
  
<!--
+
<table align = "center">
 +
<tr>
 +
<td><img id = "daicon" src="https://static.igem.org/mediawiki/2015/4/4a/Photocoupler.png"></a></td>
 +
</table>
  
  Hey, you! Go check out this wonderful dribbble by Sebastian Beltz!
+
<p class="margin-top-10"><br>This component works by transferring electrical signals between isolated circuits by using light. Our system is a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell transfers a light signal to an isolated "receiver" cell, which expresses photoreceptors to enable a light-dependent response.  (CITATION) Please click on the links below to learn more about the individual components of our project. </p>
  http://dribbble.com/shots/1408634-Music-Player
+
  </div>
  
-->
+
<table align = "center">
 
+
<tr>
<div class="music-player">
+
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Sender"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/8/88/2015SENDERLINK.png" height="50%" width="95%"></a></td>
  <img src="http://c.boylett.uk/generic/image_png_00002.png" class="album" />
+
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Receiver"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/1/1f/2015RECEIVERLINK.png" height="50%" width="95%"></a></td>
  <div class="dash">
+
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Communication"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/8/83/COMMEDIT.png" height="50%" width="95%"></a></td>
    <a href="#mute" class="fa fa-volume-up"></a>
+
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Educational_Toolbox"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/6/63/COMMEDIhumanp.png" height="50%" width="95%"></a></td>
    <span class="volume-level">
+
</tr>
      <em style="width: 75%"></em>
+
</table>
    </span>
+
</section>
    <a href="#share" class="fa fa-share"></a>
+
</html>
    <a href="#love" class="fa fa-heart"></a>
+
    <div class="seeker">
+
      <div class="wheel">
+
        <div class="progress"></div>
+
      </div>
+
    </div>
+
    <a href="#seek"></a>
+
    <div class="controls">
+
      <a href="#back" class="fa fa-fast-backward"></a>
+
      <a href="#play" class="fa fa-pause"></a>
+
      <a href="#forward" class="fa fa-fast-forward"></a>
+
    </div>
+
    <div class="info">
+
      <i><span name="current">0:00</span> / <span name="duration">0:00</span></i>
+
      <label>Marteria - OMG</label>
+
      <small>Zum Glück in die Zukunft II</small>
+
    </div>
+
  </div>
+
</div>
+

Latest revision as of 03:58, 19 September 2015

University of Pennsylvania iGEM

PROJECT OVERVIEW

The emerging field of optogenetics has driven development of truly fascinating bacterial systems. Scientists have been able to achieve optogenetic control of cell function using engineered photoreceptors, edge detection of an illuminated design, and even patterns on cells with fluorescent proteins. The field still harbors a lot of potential that has yet to be explored. (S Karig)

The Penn 2015 iGEM team attempted to exploit this potential by using light to drive cell communication. Talk between bacterial populations, known as quorum sensing is reliant on diffusion of chemical autoinducers produced by the cell. This process enables microorganisms to modify gene expression as a function of cell density. The reliance of quorum sensing on chemical diffusion restricts communication to within common environments and compatible conditions. However, the use of bioluminescent sender cells and light-sensitive receiver cells to drive talk between cells overcomes these limitations. The system is effective across boundaries, in different environments, and in populations with different growth conditions or antibiotic resistances. Additionally, future research teams can also take advantage of the orthogonality of light to chemicals and spatiotemporal control of light in any future project endeavors.

The design of our project was inspired by an electrical engineering system known as a photocoupler (pictured below.)


This component works by transferring electrical signals between isolated circuits by using light. Our system is a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell transfers a light signal to an isolated "receiver" cell, which expresses photoreceptors to enable a light-dependent response. (CITATION) Please click on the links below to learn more about the individual components of our project.