Team:Heidelberg/Toolbox Guide
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | {{:Team:Heidelberg/Templates/MainTemplate}} | + | {{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}} |
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}} | {{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}} | ||
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}} | {{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}} | ||
Line 6: | Line 6: | ||
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}} | {{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}} | ||
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}} | {{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}} | ||
- | |||
- | |||
<html> | <html> | ||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
#myContainer { | #myContainer { | ||
Line 37: | Line 34: | ||
/* Enlarge Icons on hover */ | /* Enlarge Icons on hover */ | ||
- | .toolbox- | + | .toolbox-icon-scale:hover { |
transform: scale(1.15); | transform: scale(1.15); | ||
-webkit-transform: scale(1.15); | -webkit-transform: scale(1.15); | ||
Line 45: | Line 42: | ||
} | } | ||
- | .toolbox- | + | .toolbox-icon-scale { |
transition:transform 0.15s ease; | transition:transform 0.15s ease; | ||
-webkit-transition:-webkit-transform 0.15s ease; | -webkit-transition:-webkit-transform 0.15s ease; | ||
Line 52: | Line 49: | ||
} | } | ||
- | . | + | .ringbox{ |
- | + | /* | |
- | + | width: 750px; | |
- | background- | + | height: 600px; |
- | background- | + | background-image:url('/wiki/images/d/dc/Ring_Project.png'); |
- | + | background-size: 550px; | |
+ | background-repeat: no-repeat; | ||
+ | */ | ||
+ | position: absolute; | ||
+ | top:260px; | ||
+ | left:140px; | ||
+ | height:1000px; | ||
+ | z-index:3; | ||
} | } | ||
+ | .abstract-special { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .abstract-special span { | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .abstract-special img { | ||
+ | height: 15px; | ||
+ | } | ||
+ | |||
+ | .toolbox-icon { | ||
+ | height: 90px; | ||
+ | position: absolute; | ||
+ | right:-43px; | ||
+ | bottom:-45px; | ||
+ | } | ||
+ | |||
+ | #ring-background { | ||
+ | width: 450px; | ||
+ | height: auto; | ||
+ | opacity:0.8; | ||
+ | } | ||
+ | |||
+ | .block{ | ||
+ | display:block; | ||
+ | text-decoration:none; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .block:hover{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .box { | ||
+ | background-color: rgba(81,81,81,0.7); | ||
+ | padding: 15px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .box:hover { | ||
+ | border:solid 2px #DE4230; | ||
+ | padding: 13px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .descr-box { | ||
+ | width: 250px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .descr-box h3 { | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 0; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .descr-box h3 span { | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | |||
+ | .descr-box div { | ||
+ | border-right: solid white 2px; | ||
+ | border-top: solid white 2px; | ||
+ | padding-right:43px; | ||
+ | } | ||
+ | |||
+ | .descr-box span { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #circ-box { | ||
+ | right: 160px; | ||
+ | top: -120px; | ||
+ | } | ||
+ | |||
+ | #circ-box img { | ||
+ | bottom: -130px; | ||
+ | height: 120px; | ||
+ | right: -57px; | ||
+ | } | ||
+ | |||
+ | #circ-box div { | ||
+ | height: 114px; | ||
+ | } | ||
+ | |||
+ | #oligo-box { | ||
+ | left: -100px; | ||
+ | top: -10px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | #onoff-box { | ||
+ | left: -105px; | ||
+ | top: 120px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | #fusion-box { | ||
+ | left: -100px; | ||
+ | top: 330px; | ||
+ | width: 190px; | ||
+ | } | ||
+ | |||
+ | #fusion-box img { | ||
+ | top: -16px; | ||
+ | } | ||
+ | |||
+ | #fusion-box div { | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | #purification-box { | ||
+ | left: 20px; | ||
+ | top: 445px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | #purification-box img { | ||
+ | top: -70px; | ||
+ | } | ||
+ | |||
+ | #purification-box div { | ||
+ | border-top: none; | ||
+ | border-bottom: solid white 2px; | ||
+ | } | ||
+ | |||
+ | #abstract-content { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .graphicalAbstract { | ||
+ | background-image:url('/wiki/images/f/fa/Heidelberg_Project_Background.png'); | ||
+ | background-size: 100% auto; | ||
+ | background-repeat: no-repeat; | ||
+ | position:relative; | ||
+ | z-index: 1; | ||
+ | height:900px; | ||
+ | } | ||
+ | |||
+ | #redOverlay { | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | left:0; | ||
+ | top:0; | ||
+ | display:none; | ||
+ | background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png'); | ||
+ | background-size: 100% auto; | ||
+ | background-repeat: no-repeat; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | #lightning { | ||
+ | z-index: 3; | ||
+ | position:absolute; | ||
+ | top: 610px; | ||
+ | left: 460px; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | |||
+ | #screened { | ||
+ | z-index: 3; | ||
+ | position:absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #calibrated { | ||
+ | z-index: 3; | ||
+ | position:absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #dnmt1-img { | ||
+ | position: absolute; | ||
+ | height: 155px; | ||
+ | right: 15px; | ||
+ | z-index:4; | ||
+ | } | ||
+ | |||
+ | a:hover #dnmt1-img { | ||
+ | right: 13px; | ||
+ | } | ||
+ | |||
+ | #dnmt1-box { | ||
+ | right: 40px; | ||
+ | top: 340px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #xylanase-box { | ||
+ | width:250px; | ||
+ | top: 556px; | ||
+ | right:40px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | #xylanase-img { | ||
+ | height: 140px; | ||
+ | position: absolute; | ||
+ | right: 15px; | ||
+ | } | ||
+ | |||
+ | a:hover #xylanase-img { | ||
+ | right: 13px; | ||
+ | } | ||
+ | |||
+ | #toolbox-text{ | ||
+ | position: absolute; | ||
+ | top: 145px; | ||
+ | right: -135px; | ||
+ | font-size: 5em; | ||
+ | line-height: 70px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #linker-links { | ||
+ | position: absolute; | ||
+ | width: 405px; | ||
+ | right: 60px; | ||
+ | top: 35px; | ||
+ | height: 240px; | ||
+ | } | ||
+ | |||
+ | #toolbox { | ||
+ | position:absolute; | ||
+ | right: 50px; | ||
+ | bottom: 190px; | ||
+ | } | ||
+ | |||
+ | #toolbox:hover > span { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | width: 1170px; | ||
+ | } | ||
</style> | </style> | ||
Line 75: | Line 325: | ||
<html> | <html> | ||
<div class="container main" style="color: white;"> | <div class="container main" style="color: white;"> | ||
- | <div | + | <div id="abstract-dropdown" class="row abstract-special dark-grey"> |
- | + | <div class="col-lg-offset-1 col-lg-2"> | |
- | + | <h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/> Abstract</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <div class=" | + | |
- | < | + | |
</div> | </div> | ||
- | <div class="col-lg- | + | <div class="col-lg-9"> |
- | + | <span>Click to read full abstract</span> | |
</div> | </div> | ||
- | <div | + | <div id="abstract-content" class="col-lg-12" > |
- | + | Placeholder | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
- | <div class=" | + | <div class="graphicalAbstract"> |
- | + | <div id="redOverlay"></div> | |
- | + | <div style="z-index:3;position:relative; height:100%;"> | |
- | + | <div id="linker-links"> | |
- | + | <a href="#" class="block box" id="calibrated"> | |
- | + | <img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png"> | |
- | + | <span style="position: relative;top: 10px;display: inline-block;"> | |
- | + | calibrated<br> | |
- | + | <span class="red-text">in silico</span></span> | |
- | + | </a> | |
- | + | <a href="#" class="block box" id="screened"> | |
- | + | <span style="position: relative;top:10px;display: inline-block;"> | |
- | + | screened <span class="red-text">in vitro</span><br> | |
- | + | with lysozyme</span> | |
- | + | <img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" /> | |
- | + | </a> | |
- | + | <a href="#" class="block" style="bottom:0; left:0; position:absolute;"> | |
- | + | <span class="red-text" >circularize</span> it<br> | |
- | + | with calculated linkers | |
- | + | </a> | |
- | + | </div> | |
- | + | <div class="ringbox"> | |
- | + | <img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" /> | |
- | + | <div id="circ-box" class="descr-box"> | |
- | + | <a href="/Team:Heidelberg/Toolbox/Circularization"> | |
- | < | + | <img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon toolbox-icon-scale"/> |
- | + | </a> | |
- | + | <h3>CIRCULARIZATION</h3> | |
- | + | <div><span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span></div> | |
- | + | </div> | |
- | + | <div id="oligo-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Oligomerization"><img src="/wiki/images/4/40/Oligomerization.png" id="oligo-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>OLIGOMERIZATION</h3><div><span>Fuse multiple Proteins or Domains using Inteins</span></div> | |
- | + | </div> | |
- | + | <div id="fusion-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Fusion"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" id="fusion-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>FUSION</h3><div><span>Fuse two Proteins or Domains together using Inteins</span></div> | |
- | </ | + | </div> |
- | + | <div id="onoff-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/OnOff"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" id="onoff-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>ON/OFF</h3><div><span>Activate or deactivate Proteins using Inteins</span></div></div> | |
- | + | <div id="purification-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Purification"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" id="purification-icon" class="toolbox-icon toolbox-icon-scale"/></a><div><h3>PURIFICATION</h3></div><span>Placeholder</span></div> | |
- | + | <div id="toolbox-text"> | |
- | + | the intein<br> | |
- | + | <span>toolbox<span> | |
- | + | ||
- | + | ||
- | < | + | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
+ | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="lightning"> | ||
+ | <img class="toolbox-icon-scale" style="height:110px;display: inline-block;" src="/wiki/images/8/83/Heidelberg_Project_Lightning.png"><span style="position: relative;top: 20px;display: inline-block;"> inducible via<br> | ||
+ | <span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span> | ||
+ | </a> | ||
+ | <a href="https://2014.igem.org/Team:Heidelberg/Project/PCR_2.0" class="block box" style="width:250px;" id="dnmt1-box"> | ||
+ | <img id="dnmt1-img" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png"> | ||
+ | <span style="position:relative; z-index:5;" class="block"> | ||
+ | <span style="font-size:1.5em;"> | ||
+ | <span class="red-text">Heat-stable</span><br> circular <br><span style="font-weight:bold;">DNA-<br/>Methyltransferase</span> | ||
+ | </span><br> | ||
+ | <span style="font-weight:bold;font-size: 2.5em; text-align:right;line-height: 35px;"> | ||
+ | <span class="red-text">PCR 2.0</span> | ||
+ | </span> | ||
+ | </span> | ||
+ | </a> | ||
+ | <a href="/Team:Heidelberg/Toolbox_Guide" class="block" id="toolbox"> | ||
+ | <span style="position:relative; display: inline-block;height:110px; width:110px; vertical-align: middle;"> | ||
+ | <img style="height:100%; position:absolute; top:0; left:0;" id="toolbox-img" src="/wiki/images/2/24/Heidelberg_Project_Toolbox_guide.png" /> | ||
+ | <img style="height:100%; position:absolute; top:0; left:0;" id="toolbox-img-hover" src="/wiki/images/4/4c/Heidelberg_Toolbox_guide_highlighted.png" /> | ||
+ | </span> | ||
+ | <span style="position: relative;top: 20px;display: inline-block; vertical-align:middle;"> | ||
+ | <span style="font-weight:bold;" class="red-text">modify your protein</span><br/> | ||
+ | using the toolbox guide | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="clearfix"></div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | if(window.location.hash) { | ||
+ | var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character | ||
+ | if(hash == "Abstract") | ||
+ | $('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");}); | ||
+ | } | ||
+ | $('#abstract-dropdown').click(function() { | ||
+ | if($('#abstract-content').css("display") == 'none'){ | ||
+ | $('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");}); | ||
+ | } | ||
+ | else{ | ||
+ | $('#abstract-content').slideUp(400, function() {$('#dropdownImg').attr("src", "/wiki/images/7/70/Heidelberg_Abstract-dropdown.png");}); | ||
+ | } | ||
+ | }); | ||
- | + | $('#linker-links').mouseenter(function(){ | |
- | + | $('#redOverlay').stop(true); | |
- | + | $('#redOverlay').fadeIn(); | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $('#linker-links').mouseleave(function(){ | |
+ | $('#redOverlay').stop(true); | ||
+ | $('#redOverlay').fadeOut(); | ||
+ | }); | ||
+ | $('.descr-box span').css("opacity", 0); | ||
+ | $('.descr-box h3, .descr-box > a') | ||
+ | .mouseenter(function(){ | ||
+ | var $element; | ||
+ | if($(this).siblings().length == 0) | ||
+ | // we're inside the warpping div, break out first | ||
+ | $element = $(this).parent().parent() | ||
+ | else | ||
+ | $element = $(this).parent(); | ||
- | + | $element.find('span').stop(true).animate({opacity: 1}, 800); | |
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | var $element; | ||
+ | if($(this).siblings().length == 0) | ||
+ | // we're inside the warpping div, break out first | ||
+ | $element = $(this).parent().parent(); | ||
+ | else | ||
+ | $element = $(this).parent(); | ||
+ | $element.find('span').stop(true).animate({opacity: 0}, 800); | ||
+ | }); | ||
- | + | $('#toolbox') | |
- | + | .mouseover(function() { | |
+ | $('#toolbox-img-hover').fadeIn(); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('#toolbox-img-hover').fadeOut(); | ||
+ | }); | ||
+ | }); | ||
- | + | </script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
</html> | </html> | ||
- |
Revision as of 11:43, 15 October 2014
Abstract
Click to read full abstract
Placeholder