Difference between revisions of "Template:Tuebingen"
(859 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
<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; | ||
+ | } | ||
− | + | #coliFun { | |
− | + | position:absolute; | |
− | / | + | width: 150px; |
− | + | height: 150px; | |
− | + | z-index:100; | |
− | + | margin:0px; | |
− | background-image: url(https://static.igem.org/mediawiki/2015/ | + | transition:margin 1s; |
− | background-size: 100% auto; | + | 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; | ||
+ | } | ||
+ | h4 { | ||
+ | font-family:chalkitup; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | div.menu { | ||
+ | font-family:chalkitup; | ||
+ | line-height:35px; | ||
+ | height:35px; | ||
+ | text-align:center; | ||
+ | position:absolute; | ||
+ | top:15px; | ||
+ | left:2vw; | ||
+ | z-index:1000; | ||
+ | transition:top 1s; | ||
+ | } | ||
+ | |||
+ | div.menuitem { | ||
+ | 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; | ||
+ | } | ||
− | + | div.dia.cal { | |
− | + | top:18vw; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | div.diashowIndexContainer { | |
− | + | width:90%; | |
− | color: # | + | font-family:chalkitup; |
− | + | font-size:14px; | |
− | font- | + | height:20px; |
− | + | line-height:20px; | |
− | + | 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); | ||
+ | } | ||
− | + | diashow(0); | |
− | + | if (diaslide) diashow(diaslide); | |
− | + | if (anchor) { | |
− | + | 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' | ||
+ | ]; | ||
− | + | var practicesMenuitemURLs = [ | |
− | + | 'https://2015.igem.org/Team:Tuebingen/Practices', | |
− | + | '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'); | ||
− | + | window.setInterval(funWithColi,10000); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function gup( name, url ) { | |
− | + | if (!url) url = location.href; | |
− | + | name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); | |
− | + | var regexS = "[\\?&]"+name+"=([^&#]*)"; | |
− | + | var regex = new RegExp( regexS ); | |
− | + | var results = regex.exec( url ); | |
− | + | return results == null ? null : results[1]; | |
− | + | } | |
− | + | ||
− | + | function funWithColi() { | |
− | + | console.log('start'); | |
− | + | coli = document.getElementById('coliFun'); | |
− | + | if (Math.random() > 0.8) { | |
− | + | console.log('yit'); | |
− | + | var rnd = Math.random(); | |
− | + | 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> | ||
+ | |||
− | + | ||
− | + | </div> | |
− | + | ||
− | + | <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> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div id="submenuPractices" class="submenu" style="left:27.4vw;"> | |
− | + | <div class="menuitem" style="width:12vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/synbio';">SynBio-Day</div> | |
− | + | <div class="menuitem" style="width:16vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/schoolclassatlab';">SchoolClass@lab</div> | |
− | + | <div class="menuitem" style="width:16vw;" onclick="window.location.href='https://2015.igem.org/Team:Tuebingen/freiburg';">Theatre Freiburg</div> | |
− | + | </div> | |
− | + | ||
− | + | <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> | |
− | + | <div id="contentContainer"> | |
− | + | ||
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div id =" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> |
Latest revision as of 02:50, 19 September 2015
![](https://static.igem.org/mediawiki/2015/b/ba/Team_Tuebingen_menu_coli_mit_lightstrahl.png)
<
>