Template:Team:Bonn:Network

From 2013.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 13: Line 13:
   function showNode(node) {
   function showNode(node) {
         var divContent = "subpage-middle";
         var divContent = "subpage-middle";
-
         var mainContent = "content-page";
+
         var mainContent = document.getElementById("content-page");
         if(document.getElementById(divContent)) {
         if(document.getElementById(divContent)) {
         } else {
         } else {
-
         mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:200px;height:220px;left:-50px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:450px;left:-160px;height:800px;width:1250px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:400px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
+
         mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;width:1100px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
           initiateNetwork(1);
           initiateNetwork(1);
         }
         }
Line 51: Line 51:
                 }
                 }
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
-
                 contentSummary.innerHTML = summary;
+
                 contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>";
                 contentText.innerHTML = text;
                 contentText.innerHTML = text;
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
Line 96: Line 96:
         } else {
         } else {
-
         mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:200px;height:220px;left:-50px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:450px;left:-160px;height:800px;width:1250px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:400px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
+
         mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
         }
         }
         var content = document.getElementById(divContent);
         var content = document.getElementById(divContent);
Line 120: Line 120:
                  
                  
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
-
                 contentSummary.innerHTML = summary;
+
                 contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>";
                 contentText.innerHTML = text;
                 contentText.innerHTML = text;
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
Line 127: Line 127:
                 networkTitle.innerHTML = titleLong;
                 networkTitle.innerHTML = titleLong;
                 if(parents.length) {
                 if(parents.length) {
 +
                        var parentsStart = 260 - parents.length*3/2;
 +
                        var parentsEnd = 280 + parents.length*3/2;
                         circle({
                         circle({
                                 n:parents,
                                 n:parents,
                                 height:1100,
                                 height:1100,
-
                                 width:1200,
+
                                 width:1040,
-
                                 start:245,
+
                                 start:parentsStart,
-
                                 end:295,
+
                                 end:parentsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"parent"
                                 type:"parent"
Line 139: Line 141:
                 }
                 }
                 if(childs.length) {
                 if(childs.length) {
 +
                        var childsStart = 80 - childs.length*3/2;
 +
                        var childsEnd = 100 + childs.length*3/2;
                         circle({
                         circle({
                                 n:childs,
                                 n:childs,
                                 height:1100,
                                 height:1100,
-
                                 width:1200,
+
                                 width:1040,
-
                                 start:65,
+
                                 start:childsStart,
-
                                 end:115,
+
                                 end:childsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"child"
                                 type:"child"
Line 166: Line 170:
                 break;
                 break;
               case "mainpage":
               case "mainpage":
-
                 mainContent.innerHTML = "<style type='text/css'>.kachelheading{font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:-2px; bottom:-11px;}</style><div id='page-box1' style='margin: 20px auto 40px auto;width:800px;height:320px;'><img width='800px' style='margin-top:-60px' src='https://static.igem.org/mediawiki/2013/6/6d/Bonn_Licht_ist_geil_weiß.png'></div><div id='page-row1' class='page-row' style='width:800px;height:260px;margin:0 auto 0 auto;position:relative;'><div id='page-box-2' onmouseover=showTile(2) onmouseout=hideTile(2) class='page-box-width' style='float:left;margin:0 15px 0 0;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/c/cd/Bonn_Project.png'><p class='kachelheading'>project</p> <div id='page-box-2-content' class='page-box-width' style='background-color:black; float:left;opacity:0.9;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We engineer a photoswitchable protein degradation system relying on the ClpXP protease system and a LOV domain from avena sativa</p><p class='kachelheading'>project</p> </div> </div> <div id='page-box-3' onmouseover=showTile(3) onmouseout=hideTile(3) class='page-box-small' style='float:right;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/a/a0/Bonn_Safety.png'><p class='kachelheading'>safety</p> <div id='page-box-3-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Since safety is an important concern for any iGEM team, we gave deep thought to it. In this article our reflections about safety measures presented.</p><p class='kachelheading'>safety</p> </div> </div></div><div id='page-row2' class='page-row' style='width:800px;height:800px;position:relative;margin:20px auto 0 auto'> <div id='page-box-4' onmouseover=showTile(4) onmouseout=hideTile(4) class='page-box-high' style='position:absolute;left:0px;top:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/2/2c/Bonn_Background.png'><p class='kachelheading'>background</p> <div id='page-box-4-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Introduction to the concept of protein activity regulation</p><p class='kachelheading'>background</p> </div> </div> <div id='page-box-5' onmouseover=showTile(5) onmouseout=hideTile(5) class='page-box-width' style='position:absolute;right:0px;top:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/9/92/Bonn_HumanPractice.png'><p class='kachelheading'>Human Practice</p> <div id='page-box-5-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The major goal in Human Practice is to make synthetic biology easily understandable and interesting for everybody. For that purpose our project's design follows the well-known franchise of Star Wars; our project name &quot;LOV WARS&quot; was born. The constant references to the Star Wars movies facilitate the access to synthetic biology to a person that is not familiar with the subject. With the most famous icon of Star Wars being the laser sword it offers a great opportunity to present our light induction system in an entertaining way. We put great effort into adapting every aspect of our public presence to Star Wars.</p><p class='kachelheading'>Human Practice</p> </div> </div> <div id='page-box-6' onmouseover=showTile(6) onmouseout=hideTile(6) class='page-box-small' style='position:absolute;width:242px;height:242px;top:278px;left:278px;'><img width='242px'; src='https://static.igem.org/mediawiki/2013/f/fd/PictureGallaryNew.png'><p class='kachelheading'>picture gallery</p> <div id='page-box-6-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-242px;width:242px;height:242px'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Pictures from any Event hosted by our Team and many more</p><p class='kachelheading'>picture gallery</p> </div> </div> <div id='page-box-7' onmouseover=showTile(7) onmouseout=hideTile(7) class='page-box-width' style='position:absolute;left:0px;bottom:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/1/17/Bonn_Game.png'><p class='kachelheading'>game</p> <div id='page-box-7-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Play our awesome lov-wars mini shooter.</p><p class='kachelheading'>game</p> </div> </div><div id='page-box-8' onmouseover=showTile(8) onmouseout=hideTile(8) class='page-box-high' style='position:absolute;right:0px;bottom:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/f/f0/Bonn_Comic.png'><p class='kachelheading'>comic</p> <div id='page-box-8-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We introduced a hand drawn comic series called &quot;LOV Wars&quot; about Obi-Wan E. Coli and his adventures in the Galaxy of Petri. Basic concepts of synthetic biology are explained along the way.</p><p class='kachelheading'>comic</p> </div></div></div><div id='page-row3' class='page-row' style='width:800px;height:260px;margin:20px auto 0 auto '> <div id='page-box-9' onmouseover=showTile(9) onmouseout=hideTile(9) class='page-box-small' style='float:left;margin:0 15px 0 0;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/7/73/Bonn_Analysis.png'> <p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>results</p> <div id='page-box-9-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Test</br>testtest</br>test</p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>results</p> </div> </div><div id='page-box-10' onmouseover=showTile(10) onmouseout=hideTile(10) class='page-box-width' style='float:right;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/f/f5/Bonn_Team.png'><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>team</p> <div id='page-box-10-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The Team - Presentation of all team members</p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>team</p></div> </div></div> </div> </div> </div> </div>";
+
                 mainContent.innerHTML = "<style type='text/css'>.kachelheading{font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:-2px; bottom:-11px;}</style><div id='page-box1' style='margin: 20px auto 40px auto;width:800px;height:320px;'><img width='800px' style='margin-top:-60px' src='https://static.igem.org/mediawiki/2013/6/6d/Bonn_Licht_ist_geil_weiß.png'></div><div id='page-row1' class='page-row' style='width:800px;height:260px;margin:0 auto 0 auto;position:relative;'><div id='page-box-2' onclick=showNode(37) onmouseover=showTile(2) onmouseout=hideTile(2) class='page-box-width' style='float:left;margin:0 15px 0 0;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/c/cd/Bonn_Project.png'><p class='kachelheading'>project</p> <div id='page-box-2-content' class='page-box-width' style='background-color:black; float:left;opacity:0.9;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We engineer a photoswitchable protein degradation system relying on the ClpXP protease system and a LOV domain from avena sativa</p><p class='kachelheading'>project</p> </div> </div> <div id='page-box-3' onmouseover=showTile(3)  onclick=showNode(200) onmouseout=hideTile(3) class='page-box-small' style='float:right;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/a/a0/Bonn_Safety.png'><p class='kachelheading'>safety</p> <div id='page-box-3-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Since safety is an important concern for any iGEM team, we gave deep thought to it. In this article our reflections about safety measures presented.</p><p class='kachelheading'>safety</p> </div> </div></div><div id='page-row2' class='page-row' style='width:800px;height:800px;position:relative;margin:20px auto 0 auto'> <div id='page-box-4' onclick=showNode(2) onmouseover=showTile(4) onmouseout=hideTile(4) class='page-box-high' style='position:absolute;left:0px;top:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/2/2c/Bonn_Background.png'><p class='kachelheading'>background</p> <div id='page-box-4-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Introduction to the concept of protein activity regulation</p><p class='kachelheading'>background</p> </div> </div> <div id='page-box-5' onclick=showNode(100) onmouseover=showTile(5) onmouseout=hideTile(5) class='page-box-width' style='position:absolute;right:0px;top:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/9/92/Bonn_HumanPractice.png'><p class='kachelheading'>Human Practice</p> <div id='page-box-5-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The major goal in Human Practice is to make synthetic biology easily understandable and interesting for everybody. For that purpose our project's design follows the well-known franchise of Star Wars; our project name &quot;LOV WARS&quot; was born. The constant references to the Star Wars movies facilitate the access to synthetic biology to a person that is not familiar with the subject. With the most famous icon of Star Wars being the laser sword it offers a great opportunity to present our light induction system in an entertaining way. We put great effort into adapting every aspect of our public presence to Star Wars.</p><p class='kachelheading'>Human Practice</p> </div> </div> <div id='page-box-6' onclick=showNode(131) onmouseover=showTile(6) onmouseout=hideTile(6) class='page-box-small' style='position:absolute;width:242px;height:242px;top:278px;left:278px;'><img width='242px'; src='https://static.igem.org/mediawiki/2013/f/fd/PictureGallaryNew.png'><p class='kachelheading'>picture gallery</p> <div id='page-box-6-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-242px;width:242px;height:242px'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Pictures from any Event hosted by our Team and many more</p><p class='kachelheading'>picture gallery</p> </div> </div> <div id='page-box-7' onclick=showNode(111) onmouseover=showTile(7) onmouseout=hideTile(7) class='page-box-width' style='position:absolute;left:0px;bottom:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/1/17/Bonn_Game.png'><p class='kachelheading'>game</p> <div id='page-box-7-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Play our awesome lov-wars mini shooter.</p><p class='kachelheading'>game</p> </div> </div><div id='page-box-8' onmouseover=showTile(8) onmouseout=hideTile(8) class='page-box-high' style='position:absolute;right:0px;bottom:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/f/f0/Bonn_Comic.png'><p class='kachelheading'>comic</p> <div id='page-box-8-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We introduced a hand drawn comic series called &quot;LOV Wars&quot; about Obi-Wan E. Coli and his adventures in the Galaxy of Petri. Basic concepts of synthetic biology are explained along the way.</p><p class='kachelheading'>comic</p> </div></div></div><div id='page-row3' class='page-row' style='width:800px;height:260px;margin:20px auto 0 auto '> <div id='page-box-9' onmouseover=showTile(9) onmouseout=hideTile(9) class='page-box-small' style='float:left;margin:0 15px 0 0;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/7/73/Bonn_Analysis.png'> <p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>results</p> <div id='page-box-9-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'></p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>results</p> </div> </div><div id='page-box-10' onmouseover=showTile(10) onmouseout=hideTile(10) class='page-box-width' style='float:right;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/f/f5/Bonn_Team.png'><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>team</p> <div id='page-box-10-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The Team - Presentation of all team members</p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>team</p></div> </div></div> </div> </div> </div> </div>";

Latest revision as of 12:42, 27 October 2013