Difference between revisions of "Team:BostonU/HomeOne"

(Blanked the page)
 
(251 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{BostonU_we_tryin}}
 
<html>
 
<style>
 
  
#sideMenu, #top_title {display:none;}
 
body {background-color:white; }
 
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
 
 
#forward, #reverse {
 
border-radius:50%;
 
}
 
 
 
#one {
 
position:absolute;
 
left:10%;
 
}
 
 
#two {
 
position:absolute;
 
left:-110%;
 
}
 
 
#three {
 
position:absolute;
 
left:-110%;
 
}
 
 
#four {
 
position:absolute;
 
left:-110%;
 
}
 
 
#five {
 
position:absolute;
 
left:-110%;
 
}
 
 
#container {
 
width:100%;
 
height:89vh;
 
position:absolute;
 
overflow:hidden;
 
}
 
 
</style>
 
 
<body>
 
<div id = "container">
 
<img style = "width:80%; height:89vh;" src = "https://static.igem.org/mediawiki/2016/3/35/T--BostonU--Geminisymbol.jpg" id = "one" class = "show">
 
 
<div style = "width:80%; height:89vh;" id = "two" class = "show">
 
<br>
 
<center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">Our Project</center>
 
<br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center>
 
<center><p style = "width:80%; color:#0071A7; font-size:125%; padding:15px;">In nature, some cells have the ability to detect if certain environmental signals such as hormones, drugs, or wavelengths of light are present or absent. These digital signals can then determine the analog expression level of certain genes. Our project aimed to replicate this natural process through a dCAS9 based system. Our system Gemini is able to recognize the presence (represented by a 1) or the absence (represented by a 0) of several environmental signals and change a gene's level of expression based on what combination of signals it is registering.</p>
 
<img style = "width:30%; padding:0px 5%;" src = "https://static.igem.org/mediawiki/2016/5/51/T--BostonU--Signals.png">
 
<img style = "width:20%; padding:0px 5%;" src = "https://static.igem.org/mediawiki/2016/5/59/T--BostonU--digital.png">
 
 
</center>
 
</div>
 
 
<div style = "width:80%; height:89vh;" id = "three" class = "show">
 
<br>
 
<center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">HP Projects</center>
 
<br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center>
 
</div>
 
 
<div style = "width:80%; height:89vh;" id = "four" class = "show">
 
<br>
 
<center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">For the Judges</center>
 
<br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center>
 
</div>
 
 
<div style = "width:80%; height:89vh;" id = "five" class = "show">
 
<br>
 
<center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">Team & Advisors</center>
 
<br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center>
 
</div>
 
 
</div>
 
 
<div style = "width:7vw; height:7vw; background-color:yellow; text-align:center; font-size:300%; position:absolute; z-index:100; left: 93%; top:50vh;" id = "forward"><div style = "height:3vw"></div>></div>
 
<div style = "width:7vw; height:7vw; background-color:yellow; text-align:center; font-size:300%; position:absolute; top:50vh; z-index:100;" id = "reverse"><div style = "height:3vw"></div><</div>
 
<div style = "width:100%; height:89vh;"></div>
 
 
 
</body>
 
 
<script type="text/javascript">
 
$(document).ready(
 
    function(){
 
var n = 2;
 
var t = 40;
 
setInterval(function () {t = t+1}, 1000);
 
setInterval(function () {
 
      if (t>39) {
 
      n = n+1;
 
      if (n==3) {
 
      $("#two").css('left', '110%')
 
      $('#two').animate({'left':'10%'}, 500);
 
      $("#one").animate({'left':'-110%'}, 500);}
 
      else if (n==4) {
 
      $("#three").css('left', '110%');
 
      $('#three').animate({'left':'10%'}, 500);
 
      $("#two").animate({'left':'-110%'}, 500);}
 
      else if (n==5) {
 
      $("#four").css('left', '110%');
 
      $('#four').animate({'left':'10%'}, 500);
 
      $("#three").animate({'left':'-110%'}, 500);}
 
      else if (n==6) {
 
      $("#five").css('left', '110%');
 
      $('#five').animate({'left':'10%'}, 500);
 
      $("#four").animate({'left':'-110%'}, 500);}
 
      else if (n == 7) {
 
      $("#one").css('left', '110%');
 
      $("#five").animate({'left':'-110%'}, 500);
 
      $("#one").animate({'left':'10%'}, 500);
 
      n = 2;}}
 
    }, 5000);
 
 
  $("#forward").click(function () {
 
      t = 0;
 
      n = n+1; 
 
      if (n==3) {
 
      $("#two").css('left', '110%')
 
      $('#two').animate({'left':'10%'}, 500);
 
      $("#one").animate({'left':'-110%'}, 500);}
 
      else if (n==4) {
 
      $("#three").css('left', '110%');
 
      $('#three').animate({'left':'10%'}, 500);
 
      $("#two").animate({'left':'-110%'}, 500);}
 
      else if (n==5) {
 
      $("#four").css('left', '110%');
 
      $('#four').animate({'left':'10%'}, 500);
 
      $("#three").animate({'left':'-110%'}, 500);}
 
      else if (n==6) {
 
      $("#five").css('left', '110%');
 
      $('#five').animate({'left':'10%'}, 500);
 
      $("#four").animate({'left':'-110%'}, 500);}
 
      else if (n == 7) {
 
      $("#one").css('left', '110%');
 
      $("#five").animate({'left':'-110%'}, 500);
 
      $("#one").animate({'left':'10%'}, 500);
 
      n = 2;}
 
    });
 
 
  $("#reverse").click(function () {
 
      t = 0;
 
      n = n-1;
 
      if (n == 1) {
 
      $("#five").css('left', '-110%');
 
      $("#five").animate({'left':'10%'}, 500);
 
      $("#one").animate({'left':'110%'}, 500);
 
      n = 6;}   
 
      else if (n==2) {
 
      $("#one").css('left', '-110%');
 
      $('#one').animate({'left':'10%'}, 500);
 
      $("#two").animate({'left':'110%'}, 500);} 
 
      else if (n==3) {
 
      $("#two").css('left', '-110%');
 
      $('#two').animate({'left':'10%'}, 500);
 
      $("#three").animate({'left':'110%'}, 500);
 
      $("#four").css('left', '-110%');}
 
      else if (n==4) {
 
      $("#three").css('left', '-110%');
 
      $('#three').animate({'left':'10%'}, 500);
 
      $("#four").animate({'left':'110%'}, 500);}
 
      else if (n==5) {
 
      $("#four").css('left', '-110%');
 
      $('#four').animate({'left':'10%'}, 500);
 
      $("#five").animate({'left':'110%'}, 500);}
 
    });
 
 
  });
 
</script>
 
 
</html>
 

Latest revision as of 21:50, 19 October 2016