Difference between revisions of "Template:Tuebingen"

 
(873 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Template_All_Teams}}
 
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
 +
<head>
 +
<style type="text/css">
 +
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
#globalWrapper, #content{
 +
background-color: transparent;
 +
border: 0px;
 +
margin:0 auto;
 +
padding: 0px;
 +
width: 100%;
 +
}
 +
 +
#fixedcoli {
 +
position:fixed;
 +
right: 10px;
 +
bottom: 100px;
 +
width: 120px;
 +
height: 120px;
 +
z-index:100;
 +
}
  
<!-- Start of CSS-->
+
#coliFun {
<style type="text/css">
+
position:absolute;
/* PAGE LAYOUT */
+
width: 150px;
 +
height: 150px;
 +
z-index:100;
 +
margin:0px;
 +
transition:margin 1s;
 +
top:-150px;
 +
}
 +
 +
@font-face {
 +
    font-family: chalkitup;
 +
    src: url(https://static.igem.org/mediawiki/2015/5/54/Djb_chalk_it_up.ttf);
 +
}
 +
 +
body {
 +
font-family: Sitka Text;
 +
font-size: 12.5px;
 +
background-image: url(https://static.igem.org/mediawiki/2015/b/ba/Team_Tuebingen_bg_palindrom.jpg);
 +
background-size: 100% auto;
 +
background-attachment: fixed;
 +
text-align:center;
 +
overflow:hidden;
 +
}
 +
 +
h2 {
 +
font-family:chalkitup;
 +
font-size: 24px;
 +
}
  
/* Change Background color*/
+
                        h4 {
body {  
+
font-family:chalkitup;
background-image: url(https://static.igem.org/mediawiki/2015/a/a5/Tafelbg2.png);
+
font-size: 16px;
background-size: 100% auto;"
+
}
}
+
 
+
div.menu {
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
font-family:chalkitup;
#mainContainer { 
+
line-height:35px;
width: 978px;
+
height:35px;
overflow:hidden;
+
text-align:center;
float:center;
+
position:absolute;
                        margin-left: 25%;
+
top:15px;
                        margin-right: 25% margin-bottom: 10px;
+
left:2vw;
background-color: rgba(251,255,232, 0.6);  
+
z-index:1000;
border-bottom: 14px solid #565656;
+
transition:top 1s;
border-right: 2px solid #565656;
+
}
border-left: 2px solid #565656;
+
border-top: 2px solid #565656;
+
div.menuitem {
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
color:#2c523c;
}
+
float:left;
 +
height:100%;
 +
box-sizing:border-box;
 +
margin:0.2vw;
 +
cursor:pointer;
 +
transition:height 1s ease;
 +
overflow:hidden;
 +
font-size:1.8vw;
 +
background-image: url(https://static.igem.org/mediawiki/2015/6/6c/Team_Tuebingen_menuitem_bgnormal.png);
 +
background-size: 100% 35px;
 +
background-repeat:no-repeat;
 +
}
 +
 +
div.menuitem:hover {
 +
background-image: url(https://static.igem.org/mediawiki/2015/0/04/Team_Tuebingen_menuitem_bgwhite.png);
 +
}
 +
 +
div.submenu {
 +
font-family:chalkitup;
 +
line-height:25px;
 +
height:25px;
 +
text-align:center;
 +
position:absolute;
 +
top:40px;
 +
z-index:1000;
 +
display:none;
 +
}
 +
 +
div.submenu div.menuitem {
 +
background-size: 100% 25px;
 +
font-size:1.5vw;
 +
}
 +
 +
#mainContainer {
 +
text-align:center;
 +
}
 +
 +
#contentWrapper {
 +
position:fixed;
 +
top:100px;
 +
left:10vw;
 +
right:10vw;
 +
bottom:4vh;
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8f/Team_Tuebingen_leinwandwei%C3%9F.png);
 +
background-size: 100% 100%;
 +
background-repeat:no-repeat;
 +
box-sizing:border-box;
 +
max-width:900px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
#contentContainer {
 +
text-align:left;
 +
position:absolute;
 +
left:4%;
 +
right:4%;
 +
top:3%;
 +
bottom:10%;
 +
box-sizing:border-box;
 +
overflow-y:auto;
 +
overflow-x:hidden;
 +
}
 +
 +
div.arrow {
 +
position:absolute;
 +
width:7vw;
 +
height:7vw;
 +
bottom:38vh;
 +
z-index:1000;
 +
cursor:pointer;
 +
display:none;
 +
font-size:7vw;
 +
text-align:center;
 +
color:#fff;
 +
font-family:chalkitup;
 +
}
 +
 +
div.dia {
 +
opacity:0;
 +
display:none;
 +
z-index:0;
 +
transition:opacity 1s;
 +
position:absolute;
 +
top:25px;
 +
left:0px;
 +
right:0px;
 +
bottom:0px;
 +
}
  
/* Creates the container for the menu */
+
div.dia.cal {
#menuContainer  {
+
top:18vw;
float:center;
+
}
width: 134px;
+
padding: 20px 0px;
+
border-top: 14px solid #565656;
+
background-color: rgba(251,255,232, 0.6);
+
}
+
 
+
/* Creates the container for the content */
+
#contentContainer {
+
padding-top:20px;
+
padding-right:10px;
+
margin-bottom: 20px;
+
width: 814px;
+
padding-left: 20px;
+
float: center;
+
background: rgba(251,255,232, 0.6)
+
border-top: 14px solid #565656;
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
}
+
 
+
/*Set up height place holder for the banner*/
+
#bannerContainer {
+
height:200px;
+
margin:auto;
+
text-align:center;
+
color: #24B694;
+
}
+
 
+
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
 
+
/*Change the styling of text for everything inside main container*/
+
#mainContainer p {
+
font-size: 13px;
+
color: #000000;
+
}
+
 
 
/*This changes the color and font family */
+
div.diashowIndexContainer {
#contentContainer h1, h2, h3, h4, h5, h6 {
+
width:90%;
color: #565656;
+
font-family:chalkitup;
border-bottom: none;
+
font-size:14px;
font-weight: bold;
+
height:20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
line-height:20px;
margin-top:10px;
+
margin: 3px 5% 0px;
}
+
text-align:center;
 +
border-bottom:1px solid #2c523c;
 +
}
 +
 +
div.diashowIndex {
 +
margin: 0px 10px;
 +
color:#2c523c;
 +
cursor:pointer;
 +
display:inline;
 +
}
 +
 +
div.diashowIndex:hover {
 +
text-decoration:underline;
 +
}
 +
            .collapse{
 +
    font-family: Sitka Text;
 +
    font-size: 14px;
 +
            display:block;
 +
cursor:pointer;
 +
            }
 +
            .collapse + input{
 +
              display:none;
 +
            }
 +
            .collapse + input + *{
 +
              display:none;
 +
            }
 +
            .collapse+ input:checked + *{
 +
              display:block;
 +
            }
 +
</style>
 +
 +
<script type="text/javascript">
 +
diaslide = false;
 +
anchor = false;
 +
if (location.search.length != 0) {
 +
diaslide = parseInt(gup('slide'));
 +
anchor = gup('anchor');
 +
console.log('anchooor '+anchor);
 +
}
 +
function init() {
 +
if (dias.length != 0) {
 +
document.getElementById('arrowRight').style.display = 'block';
 +
document.getElementById('arrowLeft').style.display = 'block';
 +
diashowIndex = document.createElement('div');
 +
diashowIndex.className = 'diashowIndexContainer';
 +
console.log(document.getElementById('contentContainer'));
 +
document.getElementById('contentContainer').insertBefore(diashowIndex,this.firstChild);
 +
for (i=0;i<dias.length;i++) {
 +
var index = document.createElement('div');
 +
index.className = 'diashowIndex';
 +
index.onclick = (function(Q) {return function() {diashow(-(currentDia-Q));}})(i);
 +
index.innerHTML = dias[i];
 +
diashowIndex.appendChild(index);
 +
}
  
/*Style of the links - links are different inside the menu */
+
diashow(0);
#contentContainer a {
+
if (diaslide) diashow(diaslide);
font-weight: bold;
+
if (anchor) {
color: #23b593;
+
console.log('anchorrrs '+anchor);
}
+
console.log(document.getElementById('12'));
 +
console.log(document.getElementById(anchor));
 +
document.getElementById(anchor).scrollIntoView();
 +
}
 +
}
 +
 +
var projectMenuitemURLs = [
 +
'https://2015.igem.org/Team:Tuebingen/Description',
 +
'https://2015.igem.org/Team:Tuebingen/Experiments',
 +
'https://2015.igem.org/Team:Tuebingen/Results',
 +
'https://2015.igem.org/Team:Tuebingen/Design',
 +
'https://2015.igem.org/Team:Tuebingen/Parts',
 +
'https://2015.igem.org/Team:Tuebingen/Safety',
 +
'https://2015.igem.org/Team:Tuebingen/Measurement',
 +
'https://2015.igem.org/Team:Tuebingen/Notebook'
 +
];
 +
 +
var attributionsMenuitemURLs = [
 +
'https://2015.igem.org/Team:Tuebingen/Attributions',
 +
'https://2015.igem.org/Team:Tuebingen/Collaborations',
 +
'https://2015.igem.org/Team:Tuebingen/References'
 +
];
  
  /* Styling links on hover- links are different inside the menu */
+
var practicesMenuitemURLs = [
#contentContainer a:hover {
+
'https://2015.igem.org/Team:Tuebingen/Practices',
color: #59bf92;
+
'https://2015.igem.org/Team:Tuebingen/synbio',
}
+
'https://2015.igem.org/Team:Tuebingen/schoolclassatlab',
 +
'https://2015.igem.org/Team:Tuebingen/freiburg'
 +
];
 +
 +
if (attributionsMenuitemURLs.indexOf(window.location.href.split('?')[0]) != -1) submenu('Attributions');
 +
else if (projectMenuitemURLs.indexOf(window.location.href.split('?')[0]) != -1) submenu('Project');
 +
else if (practicesMenuitemURLs.indexOf(window.location.href.split('?')[0]) != -1) submenu('Practices');
  
/*Change the styling of tables */
+
window.setInterval(funWithColi,10000);
        #contentContainer table {
+
}
    border: 1px solid #565656;
+
    border-collapse: collapse;
+
    width: 90%
+
    margin: auto;
+
      margin-bottom: 15px;
+
    margin-top: 15px;
+
    margin-right: 10px;
+
    margin-left: 10px;
+
    }
+
 
+
/*Change the styling of table cells*/
+
    #contentContainer  td {
+
    padding: 10px;
+
    border: 1px solid #565656;
+
    border-collapse: collapse;
+
    vertical-align: text-top;
+
    }
+
  
/*Change the styling of table headers */
+
function gup( name, url ) {
    #contentContainer th {
+
  if (!url) url = location.href;
    background-color: #E8E8E9;
+
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    padding: 10px;
+
  var regexS = "[\\?&]"+name+"=([^&#]*)";
    border: 1px solid #565656;
+
  var regex = new RegExp( regexS );
    border-collapse: collapse;
+
  var results = regex.exec( url );
    vertical-align: text-top;
+
  return results == null ? null : results[1];
    }
+
}
 
+
/*MENU STYLING */
+
function funWithColi() {
 
+
console.log('start');
/*Styling for the links in the menu */
+
coli = document.getElementById('coliFun');
#menuContainer a {
+
if (Math.random() > 0.8) {
color: #565656;
+
console.log('yit');
text-decoration:none;
+
var rnd = Math.random();
font-weight: bold;
+
if (rnd < 0.3) {
 +
//left
 +
var pos = Math.random()*(window.innerHeight-150);
 +
coli.style.bottom = 'auto';
 +
coli.style.top = pos+'px';
 +
coli.style.right = 'auto';
 +
coli.style.left = '-150px';
 +
coli.style.transform = 'rotate(90deg)';
 +
coli.style.marginLeft= '100px';
 +
window.setTimeout(function(){coli.style.marginLeft = '0px';},2000);
 +
} else if (rnd < 0.6) {
 +
//bottom
 +
var pos = Math.random()*(window.innerWidth-150);
 +
coli.style.right = 'auto';
 +
coli.style.left = pos+'px';
 +
coli.style.top = window.innerHeight-30+'px';
 +
coli.style.transform = 'rotate(0deg)';
 +
coli.style.marginTop = '-100px';
 +
window.setTimeout(function(){coli.style.marginTop = '0px';},2000);
 +
} else {
 +
//right
 +
var pos = Math.random()*(window.innerHeight-150);
 +
coli.style.bottom = 'auto';
 +
coli.style.top = pos+'px';
 +
coli.style.left = 'auto';
 +
coli.style.right = '-150px';
 +
coli.style.transform = 'rotate(270deg)';
 +
coli.style.marginRight = '100px';
 +
window.setTimeout(function(){coli.style.marginRight = '0px';},2000);
 +
}
 +
}
 +
}
 +
 +
dias = [];
 +
currentDia = 0;
 +
function diashow(shift) {
 +
nextDia = currentDia+shift;
 +
if (nextDia < 0) nextDia = dias.length-1;
 +
else if (nextDia >= dias.length) nextDia = 0;
 +
document.getElementById('dia'+currentDia).style.opacity = '0';
 +
document.getElementById('dia'+currentDia).style.display = 'none';
 +
document.getElementById('dia'+currentDia).style.zIndex = '0';
 +
document.getElementById('dia'+nextDia).style.opacity = '1';
 +
document.getElementById('dia'+nextDia).style.display = 'block';
 +
document.getElementById('dia'+nextDia).style.zIndex = '1';
 +
diashowIndex.childNodes[currentDia].style.textDecoration = 'none';
 +
diashowIndex.childNodes[nextDia].style.textDecoration = 'underline';
 +
currentDia = nextDia;
 
}
 
}
 +
 +
function submenu(name) {
 +
var id = 'submenu'+name;
 +
var elem = document.getElementById(id);
 +
elem.style.display = 'block';
 +
document.getElementById('menu').style.top = '0px';
 +
}
 +
</script>
 +
</head>
 +
<body onload="init();">
 +
<!--<img id="fixedcoli" src="https://static.igem.org/mediawiki/2015/b/ba/Team_Tuebingen_menu_coli_mit_lightstrahl.png" />-->
 +
<img id="coliFun" src="https://static.igem.org/mediawiki/2015/b/ba/Team_Tuebingen_menu_coli_mit_lightstrahl.png" />
 +
<div id="mainContainer">
 +
<div class="menu" id="menu" style="left:8.7vw">
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen';">Home</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Team';">Team</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Description';">Project</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Modeling';">Modeling</div>
 +
<div class="menuitem" style="width:18vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Practices';">Human Practices</div>
 +
<div class="menuitem" style="width:3.8vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Art_and_Design';">Art</div>
 +
<div class="menuitem" style="width:18vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Attributions';">Attributions</div>
 +
  
/* Sets the style for lists inside menuContainer  */
+
#menuContainer ul {
+
</div>
list-style: none;
+
margin-left:0px;
+
<div id="submenuProject" class="submenu" style="left:9.6vw;">
}
+
<div class="menuitem" style="width:14vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Experiments';">Experiments</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Results';">Results</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Design';">Design</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Parts';">Parts</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Safety';">Safety</div>
 +
<div class="menuitem" style="width:14vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Measurement';">Interlabstudy</div>
 +
<div class="menuitem" style="width:10vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Notebook';">Notebook</div>
 +
</div>
 +
 +
<div id="submenuAttributions" class="submenu" style="left:34.6vw;">
 +
<div class="menuitem" style="width:15vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/Collaborations';">Collaboration</div>
 +
<div class="menuitem" style="width:15vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/References';">References</div>
 +
</div>
  
/*Styles the list items to become menu buttons */
+
<div id="submenuPractices" class="submenu" style="left:27.4vw;">
#menuContainer ul li {
+
<div class="menuitem" style="width:12vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/synbio';">SynBio-Day</div>
text-align: center;
+
<div class="menuitem" style="width:16vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/schoolclassatlab';">SchoolClass@lab</div>
display: block;
+
<div class="menuitem" style="width:16vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/freiburg';">Theatre Freiburg</div>
width: 100%;
+
</div>
height:30px;
+
padding-top:10px;
+
<div id="contentWrapper">
}
+
<div id="arrowLeft" class="arrow" style="left:-7vw;" onclick="diashow(-1);"><</div>
 
+
<div id ="arrowRight" class="arrow" style="right:-7vw;" onclick="diashow(1);">></div>
/*For the menu buttons, changes the color when hovering*/
+
<div id="contentContainer">
#menuContainer li:hover {
+
color:  #FFF;
+
</body>
background-color: #24B694;
+
}
+
 
+
/*Submenus are not displayed as default*/
+
#menuContainer li ul {
+
display: none;
+
padding-top:15px;
+
margin-left: -19px;
+
}
+
 
+
/*Submenus are displayed when hovering the menu button */
+
#menuContainer li:hover ul {
+
/*display: inline-block; */
+
display: block;
+
position: absolute;
+
float:right;
+
margin-left: 134px;
+
margin-top:-42px;
+
}
+
 
+
/*Style the submenu buttons*/
+
#menuContainer li ul li{
+
background-color: #59BF92;
+
padding-left:20px;
+
padding-right:20px;
+
height:30px;
+
padding-top:10px;
+
margin-top:-2px;
+
color: #565656;
+
width: 150px;
+
}
+
 
+
/*CLASSES */
+
 
+
/*Clear class for all the pages, adds spacing too*/
+
.clear{
+
clear:both;
+
height: 10px;
+
}
+
 
+
 
+
/* highlight box for special messages */
+
    .highlightBox {
+
        width:500px;
+
        margin:auto;
+
        background-color: #E8E8E9;
+
margin-bottom: 15px;
+
margin-top: 15px;
+
padding: 15px;
+
padding-top: 5px;
+
    }
+
 
+
 
+
</style>
+
<!-- End of CSS -->
+
 
+
 
+
<!-- Start of the template html elements. -->
+
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
 
+
<div id="bannerContainer">
+
<https://static.igem.org/mediawiki/2015/a/a4/Team_Tuebingen_Logo_dark-bg_chalk_inner.png"  
+
alt="team_hd_banner" style="width:980px;height:200px;">
+
 
+
</div>
+
<!-- Start of menu -->
+
<div id="menuContainer">
+
 
+
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
<ul>
+
<a href="https://2015.igem.org/Team:Tuebingen"><li>HOME</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Team"><li>TEAM</li></a>
+
 
+
<a href="#"><li>PROJECT
+
        <ul>
+
<a href="https://2015.igem.org/Team:Tuebingen/Description"><li>Description</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
<a href="https://2015.igem.org/Team:Tuebingen/Results"><li>Results</li></a> 
+
<a href="https://2015.igem.org/Team:Tuebingen/Design"><li>Design</li></a>
+
</ul>
+
</li></a>
+
 
+
<a href="#"><li>PARTS
+
        <ul>
+
<a href="https://2015.igem.org/Team:Tuebingen/Parts"><li>Team Parts</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Basic_Part"><li>Basic Parts</li></a> 
+
<a href="https://2015.igem.org/Team:Tuebingen/Composite_Part"><li>Composite Parts</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Part_Collection"><li>Part Collection</li></a>
+
</ul>
+
</li></a>
+
 
+
<a href="https://2015.igem.org/Team:Tuebingen/Notebook"><li>NOTEBOOK</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Attributions"><li>ATTRIBUTIONS</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Collaborations"><li>COLLABORATIONS</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Practices"><li>HUMAN PRACTICES</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Safety"><li>SAFETY</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Modeling"><li>MODELING</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Measurement"><li>MEASUREMENT</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Software"><li>SOFTWARE</li></a>
+
<a href="https://2015.igem.org/Team:Tuebingen/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
 
+
</ul>
+
</div>
+
<!-- End of menu  -->
+
 
+
<!-- Start of content -->
+
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
 
</html>
 
</html>

Latest revision as of 02:50, 19 September 2015

<
>