Team:Heidelberg/Toolbox Guide

From 2014.igem.org

(Difference between revisions)
 
(35 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
+
{{:Team:Heidelberg/Templates/MainTemplate}}
{{: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 34: Line 34:
/* Enlarge Icons on hover */
/* Enlarge Icons on hover */
-
.toolbox-icon-scale:hover {
+
.toolbox-icons-bar a:hover img {
transform: scale(1.15);
transform: scale(1.15);
-webkit-transform: scale(1.15);
-webkit-transform: scale(1.15);
Line 42: Line 42:
}
}
-
.toolbox-icon-scale {
+
.toolbox-icons-bar a img {
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 49: Line 49:
}
}
-
.ringbox{
 
-
/*
 
-
width: 750px;
 
-
height: 600px;
 
-
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 325: Line 64:
<html>
<html>
<div class="container main" style="color: white;">
<div class="container main" style="color: white;">
-
<div id="abstract-dropdown" class="row abstract-special dark-grey">
+
<div class="row">
-
<div class="col-lg-offset-1 col-lg-2">
+
<div class="col-lg-12">
-
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
+
<span class="middle">use the <span class="red-text">intein</span></span>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-lg-12" style="position: relative; top: -20px;">
 +
<span class="large">TOOLBOX&nbsp;</span><span class="middle" >to</span>
 +
</div>
 +
</div>
 +
<div class="row toolbox-icons-bar">
 +
<div class="col-lg-2 col-lg-offset-1 col-md-offset-1 col-md-2 col-sm-4 col-xs-6">
 +
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Circularization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" class="img-responsive" /></span>CIRCULARIZE</a>
</div>
</div>
-
<div class="col-lg-9">
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
<span>Click to read full abstract</span>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Localization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/3/3a/Heidelberg_Localize_button.png" class="img-responsive" /></span>LOCALIZE</a>
</div>
</div>
-
<div id="abstract-content" class="col-lg-12" >
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
Placeholder
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Fusion"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" class="img-responsive" /></span>ATTACH</a>
</div>
</div>
-
</div>
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
<div class="graphicalAbstract">
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Purification"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" class="img-responsive" /></span>PURIFY</a>
-
    <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>
-
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="lightning">
+
<!--<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
<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;">&nbsp;inducible via<br>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/OnOff"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" class="img-responsive" /></span>ACTIVATE &<br />DEACTIVATE</a>
-
<span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
+
</div>-->
-
</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; display:none;" 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>

Latest revision as of 03:43, 18 October 2014