|
|
| (83 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; }
| |
| − |
| |
| − | body {
| |
| − | min-width:1200px;
| |
| − | }
| |
| − |
| |
| − | #one {
| |
| − | position:absolute;
| |
| − | left:10%;
| |
| − | background-color:black;
| |
| − | width:80%;
| |
| − | }
| |
| − |
| |
| − | #two {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #three {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #four {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #five {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #six {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #container {
| |
| − | width:100%;
| |
| − | height:600px;
| |
| − | position:absolute;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − |
| |
| − | #button {
| |
| − | position:absolute;
| |
| − | top:500px;
| |
| − | left:90%;
| |
| − | }
| |
| − |
| |
| − | #button:hover, #buttontwo:hover, #buttontwotwo:hover, buttonthree:hover {
| |
| − | transform:scale(1.2);
| |
| − | }
| |
| − |
| |
| − | #buttonname {
| |
| − | width:12vw;
| |
| − | height:5vw;
| |
| − | color:#0071A7;
| |
| − | text-align:center;
| |
| − | font-size:175%;
| |
| − | position:absolute;
| |
| − | top:450px;
| |
| − | left:85%;
| |
| − | }
| |
| − |
| |
| − | #buttontwo {
| |
| − | position:absolute;
| |
| − | top:438px;
| |
| − | left:80%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #buttonnametwo {
| |
| − | width:12vw;
| |
| − | height:5vw;
| |
| − | color:#bd162a;
| |
| − | text-align:center;
| |
| − | font-size:175%;
| |
| − | position:absolute;
| |
| − | top:383px;
| |
| − | left:75.5%;
| |
| − | }
| |
| − |
| |
| − | #buttontwotwo {
| |
| − | position:absolute;
| |
| − | top:290px;
| |
| − | left:80%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #buttonnametwotwo {
| |
| − | width:12vw;
| |
| − | height:5vw;
| |
| − | color:#bd162a;
| |
| − | text-align:center;
| |
| − | font-size:175%;
| |
| − | position:absolute;
| |
| − | top:240px;
| |
| − | left:75.5%;
| |
| − | }
| |
| − |
| |
| − | #buttonthree {
| |
| − | position:absolute;
| |
| − | top:65vh;
| |
| − | left:37vw;
| |
| − | }
| |
| − |
| |
| − | #buttonthree:hover {
| |
| − | transform:scale(1.2)
| |
| − | }
| |
| − |
| |
| − | #media {
| |
| − | background-color:white;
| |
| − | }
| |
| − |
| |
| − | #twit, #face, #snap, #email {
| |
| − | width:100px;
| |
| − | height:100px;
| |
| − | padding: 30px;
| |
| − | }
| |
| − |
| |
| − | #twit:hover, #face:hover, #snap:hover, #email:hover {
| |
| − | transform:scale(1.5)
| |
| − | }
| |
| − |
| |
| − | .secret {
| |
| − | cursor:pointer;
| |
| − | opacity:0;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <body>
| |
| − | <div id = "container">
| |
| − | <div id = "one" class = "show">
| |
| − | <img style = "width:100%;" src = "https://static.igem.org/mediawiki/2016/3/35/T--BostonU--Geminisymbol.jpg" id = "gem">
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:80%;" 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 aims 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. For a more detailed description, start the Project Tour.</p>
| |
| − | <img style = "width:28%; padding:0px 5%;" src = "https://static.igem.org/mediawiki/2016/5/51/T--BostonU--Signals.png">
| |
| − | <img style = "width:25%; padding:0px 5%;" src = "https://static.igem.org/mediawiki/2016/6/6a/T--BostonU--digi.png">
| |
| − | </center>
| |
| − | <div id = "buttonname">
| |
| − | <br>
| |
| − | Project Tour
| |
| − | </div>
| |
| − |
| |
| − | <div id = "button">
| |
| − | <a href="https://2016.igem.org/Team:BostonU/Description"><img style = "width:5vw" src = "https://static.igem.org/mediawiki/2016/f/ff/T--BostonU--bluefor.png"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:80%;" id = "three" class = "show">
| |
| − | <br>
| |
| − | <center style = "font-size:280%; font-family:Trebuchet MS; color:#bd162a;">HP Projects</center>
| |
| − | <br><center><hr style= "width:702px; height: 3px; background-color:#bd162a;"></center>
| |
| − | <center><p style = "width:80%; color:#bd162a; font-size:125%; padding:15px;">In addition to creating Gemini, our team also aimed to go beyond the lab space and contribute to the synthetic biology community in other ways. In addition to volunteering for several outreach programs, we also developed two human practices projects. The first was creating a set of interactive discussion forums meant to make synthetic biology more accessible to the public. The second was a blog intended to inform synthetic biologists about important considerations and implications in patent law and intellectual property. To see a timeline of how we created our forums or explore our blog posts, click the buttons below.</p>
| |
| − | <img style = "float:left; width:30%; padding:2% 0% 2% 10%;" src = "https://static.igem.org/mediawiki/2016/e/e0/T--BostonU--Summer_Pathways.jpg">
| |
| − | <img style = "width:30%; padding:2%; float:left;" src = "https://static.igem.org/mediawiki/2016/f/f8/T--BostonU--Forums.jpg">
| |
| − | </center>
| |
| − |
| |
| − | <div id = "buttonnametwo">
| |
| − | <br>
| |
| − | Forums
| |
| − | </div>
| |
| − |
| |
| − | <div id = "buttontwotwo">
| |
| − | <a href="https://2016.igem.org/Team:BostonU/HP/Silver"><img style = "width:5vw" src = "https://static.igem.org/mediawiki/2016/1/1d/T--BostonU--redfor.png"></a>
| |
| − | </div>
| |
| − |
| |
| − | <div id = "buttonnametwotwo">
| |
| − | <br>
| |
| − | Blog
| |
| − | </div>
| |
| − |
| |
| − | <div id = "buttontwo">
| |
| − | <a href="https://2016.igem.org/Team:BostonU/HP/Gold"><img style = "width:5vw" src = "https://static.igem.org/mediawiki/2016/1/1d/T--BostonU--redfor.png"></a>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:80%;" id = "four" class = "show">
| |
| − | <br>
| |
| − | <center style = "font-size:230%; font-family:Trebuchet MS; color:#507f54;">For the Judges</center>
| |
| − | <br><center><hr style= "width:702px; height: 3px; background-color:#507f54;"></center>
| |
| − | <center><img src = "https://static.igem.org/mediawiki/2016/9/9e/T--BostonU--Medals.png" style = "width:60%;"></center>
| |
| − | <p style = "text-align:center; color:#507f54; font-size:175%;">A full list of how we met each medal requirement can be found here:</p></center>
| |
| − |
| |
| − | <div id = "buttonthree">
| |
| − | <a href="https://2016.igem.org/Team:BostonU/Medal_Criteria"><img style = "width:6vw" src = "https://static.igem.org/mediawiki/2016/c/c4/T--BostonU--Greenforward.png"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:80%;" id = "five" class = "show">
| |
| − | <br>
| |
| − | <center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">Team Gemini</center>
| |
| − | <br><center><hr style= "width:702px; height: 3px; background-color:#0071A7;"></center>
| |
| − |
| |
| − | <div class = "secret" id = "secretone" style = "width:30px; height:30px; background-color:red; z-index:200; position:relative; left:19.5%; top:170px;"></div>
| |
| − | <div class = "secret" id = "secrettwo" style = "width:30px; height:30px; background-color:red; z-index:200; position:relative; left:53%; top:285px;"></div>
| |
| − | <div class = "secret" id = "secretthree" style = "width:30px; height:30px; background-color:red; z-index:200; position:relative; left:80%; top:310px;"></div>
| |
| − |
| |
| − | <center><img src = "https://static.igem.org/mediawiki/2016/5/5c/T--BostonU--Team_Collage.png" style = "width:80%; position:relative; top:-25px;"><center>
| |
| − |
| |
| − | <div id = "buttonname">
| |
| − | <br>
| |
| − | Attributions
| |
| − | </div>
| |
| − |
| |
| − | <div id = "button">
| |
| − | <a href="https://2016.igem.org/Team:BostonU/Attributions"><img style = "width:5vw" src = "https://static.igem.org/mediawiki/2016/f/ff/T--BostonU--bluefor.png"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:10%; background-color:white; color:#0071A7; text-align:center; font-size:300%; position:absolute; z-index:100; left: 90%; cursor:pointer;" id = "forward"><div style = "height:300px;"></div>><div style = "height:300px;"></div></div>
| |
| − | <div style = "width:10%; cursor:pointer; height:600px; background-color:white; color:#0071A7; text-align:center; font-size:300%; position:absolute; left:-1%; z-index:100;" id = "reverse"><div style = "height:300px;"></div><<div style = "height:300px;"></div></div>
| |
| − |
| |
| − | <div style = "width:80%; height:600px;" id = "six" class = "show">
| |
| − | <br>
| |
| − | <br>
| |
| − | <center style = "font-size:280%; font-family:Trebuchet MS; color:#507f54;">Thank You to Our Sponsors</center>
| |
| − | <br><center><hr style= "width:702px; height: 3px; background-color:#507f54;"></center>
| |
| − | <center><img src = "https://static.igem.org/mediawiki/2016/e/eb/T--BostonU--Sponsors.jpg" style = "width:80%"><center>
| |
| − | </div>
| |
| − |
| |
| − | <div style = "width:100%; height:600px;"></div>
| |
| − | <br><br><br>
| |
| − | <div id = "media">
| |
| − | <center style = "font-size:230%; padding:25px; color:#0071A7;">Follow us on:</center>
| |
| − | </div>
| |
| − | <center>
| |
| − | <a href = "https://twitter.com/buigemwl2016"> <img id = "twit" src = "https://static.igem.org/mediawiki/2016/e/ee/T--BostonU--twitterlogo.png"> </a>
| |
| − | <a href = "https://mail.google.com/mail/?view=cm&fs=1&to=bu.igemwl2016@gmail.com&su=&body=&bcc="><img id = "email" src = "https://static.igem.org/mediawiki/2016/c/c3/T--BostonU--gmaillogo.png"></a>
| |
| − | <a href = "https://www.facebook.com/buigemwl2016"> <img id = "face" src = "https://static.igem.org/mediawiki/2016/b/b7/T--BostonU--facebooklogo.jpg"></a>
| |
| − | <img id = "snap" src = "https://static.igem.org/mediawiki/2016/8/8d/T--BostonU--snapchatlogo.png">
| |
| − | <br><br><br><br><br><br><br>
| |
| − | </center>
| |
| − | </body>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(
| |
| − | function(){
| |
| − | var n = 2;
| |
| − | var t = 40;
| |
| − | var p = 0;
| |
| − | setInterval(function () {t = t+1}, 1000);
| |
| − | $("#two").click(function () {
| |
| − | t = 0;
| |
| − | });
| |
| − | $("#three").click(function () {
| |
| − | t = 0;
| |
| − | });
| |
| − | $("#four").click(function () {
| |
| − | t = 0;
| |
| − | });
| |
| − | $("#five").click(function () {
| |
| − | t = 0;
| |
| − | });
| |
| − | setInterval(function () {
| |
| − | if (t>39) {
| |
| − | n = n+.5;
| |
| − | if (n==2.5 || n == 3) {
| |
| − | $("#two").css('left', '110%')
| |
| − | $('#two').animate({'left':'10%'}, 500);
| |
| − | $("#one").animate({'left':'-110%'}, 500);
| |
| − | n = 3;}
| |
| − | 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) {
| |
| − | $("#six").css('left', '110%');
| |
| − | $("#five").animate({'left':'-110%'}, 500);
| |
| − | $("#six").animate({'left':'10%'}, 500);}
| |
| − | else if (n == 8) {
| |
| − | $("#one").css('left', '110%');
| |
| − | $("#six").animate({'left':'-110%'}, 500);
| |
| − | $("#one").animate({'left':'10%'}, 500);
| |
| − | n = 2;}}
| |
| − | }, 3000);
| |
| − |
| |
| − | $("#forward").click(function () {
| |
| − | t = 0;
| |
| − | n = n+1;
| |
| − | if (n==3 || n==3.5) {
| |
| − | $("#two").css('left', '110%')
| |
| − | $('#two').animate({'left':'10%'}, 500);
| |
| − | $("#one").animate({'left':'-110%'}, 500);}
| |
| − | else if (n==4 || n==4.5) {
| |
| − | $("#three").css('left', '110%');
| |
| − | $('#three').animate({'left':'10%'}, 500);
| |
| − | $("#two").animate({'left':'-110%'}, 500);}
| |
| − | else if (n==5 || n==5.5) {
| |
| − | $("#four").css('left', '110%');
| |
| − | $('#four').animate({'left':'10%'}, 500);
| |
| − | $("#three").animate({'left':'-110%'}, 500);}
| |
| − | else if (n==6 || n==6.5) {
| |
| − | $("#five").css('left', '110%');
| |
| − | $('#five').animate({'left':'10%'}, 500);
| |
| − | $("#four").animate({'left':'-110%'}, 500);
| |
| − | t = 30;}
| |
| − | else if (n == 7 || n==7.5) {
| |
| − | $("#six").css('left', '110%');
| |
| − | $("#five").animate({'left':'-110%'}, 500);
| |
| − | $("#six").animate({'left':'10%'}, 500);
| |
| − | t = 30;}
| |
| − | else if (n == 8 || n == 8.5) {
| |
| − | $("#one").css('left', '110%');
| |
| − | $("#six").animate({'left':'-110%'}, 500);
| |
| − | $("#one").animate({'left':'10%'}, 500);
| |
| − | n = 2;
| |
| − | t = 30;}
| |
| − | });
| |
| − |
| |
| − | $("#reverse").click(function () {
| |
| − | t = 0;
| |
| − | n = n-1;
| |
| − | if (n == 1 || n==1.5) {
| |
| − | $("#six").css('left', '-110%');
| |
| − | $("#six").animate({'left':'10%'}, 500);
| |
| − | $("#one").animate({'left':'110%'}, 500);
| |
| − | n = 7;
| |
| − | t = 30;}
| |
| − | else if (n==2 || n==2.5) {
| |
| − | $("#one").css('left', '-110%');
| |
| − | $('#one').animate({'left':'10%'}, 500);
| |
| − | $("#two").animate({'left':'110%'}, 500);
| |
| − | t = 30;}
| |
| − | else if (n==3 || n==3.5) {
| |
| − | $("#two").css('left', '-110%');
| |
| − | $('#two').animate({'left':'10%'}, 500);
| |
| − | $("#three").animate({'left':'110%'}, 500);
| |
| − | $("#four").css('left', '-110%');}
| |
| − | else if (n==4 || n==4.5) {
| |
| − | $("#three").css('left', '-110%');
| |
| − | $('#three').animate({'left':'10%'}, 500);
| |
| − | $("#four").animate({'left':'110%'}, 500);}
| |
| − | else if (n==5 || n==5.5) {
| |
| − | $("#four").css('left', '-110%');
| |
| − | $('#four').animate({'left':'10%'}, 500);
| |
| − | $("#five").animate({'left':'110%'}, 500);}
| |
| − | else if (n==6 || n==6.5) {
| |
| − | $("#five").css('left', '-110%');
| |
| − | $('#five').animate({'left':'10%'}, 500);
| |
| − | $("#six").animate({'left':'110%'}, 500);
| |
| − | t = 30;}
| |
| − | });
| |
| − |
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(
| |
| − | function(){
| |
| − | var t = 1;
| |
| − | $("#secretone").click(function () {
| |
| − | t = t + 1;
| |
| − | )};
| |
| − | $("#secrettwo").click(function () {
| |
| − | t = t + 2;
| |
| − | )};
| |
| − | $("#secrethree").click(function () {
| |
| − | t = t + 1;
| |
| − | if (t == 5) {
| |
| − | $("#appear").css('opacity', '1');
| |
| − | $("#appear").css('z-index', '200');}
| |
| − | )};
| |
| − | </script>
| |
| − | </html>
| |
