|
|
| (267 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>
| |
| − |
| |
| − | <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><div style = "display:inline-block; width:40%; color:#0071A7; font-size:125%;">
| |
| − | <p style = "padding:15px; 0px">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. From there, the level of expression can have dramatic effects on cellular behavior. As synthetic biologist Timoth Lu says, <i>"Cells are able to implement both digital and analog processing."</i></p>
| |
| − | <center><img src = "https://static.igem.org/mediawiki/2016/5/51/T--BostonU--Signals.png" style = "width:75%"></center>
| |
| − | </div>
| |
| − | <div style = "display:inline-block; width:40%; color:#0071A7; font-size:125%;">
| |
| − | <p style = "padding:15px; 0px">However, Timothy Lu also points out that, <i>"Quote Quote Quote"</i> Therefore, our goal this summer was to develop a system which could replicate this natural cellular function. Our system would be able to recognize the presence (represented by a 1) or the absence (represented by a zero) of several environmental signals. Each combination of drugs and therefore each combination of 1's and 0's would cause the expression level of a reporter gene to change.</p>
| |
| − | <img src = "https://static.igem.org/mediawiki/2016/5/51/T--BostonU--Signals.png" style = "width:75%;"></div></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 = 30;
| |
| − | setInterval(function () {t = t+1}, 1000);
| |
| − | setInterval(function () {
| |
| − | if (t>29) {
| |
| − | 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>
| |
