Line 3: | Line 3: | ||
<!-- styles for countdown --> | <!-- styles for countdown --> | ||
<style> | <style> | ||
− | body { | + | body { |
− | + | text-align: right; | |
− | + | /* background: #00ECB9;*/ | |
− | + | font-family: sans-serif; | |
− | + | font-weight: 100; | |
− | } | + | } |
− | + | ||
− | hh6 { | + | hh6 { |
− | + | margin-right: 30px; | |
− | + | color: black; | |
− | + | font-weight: 0; | |
− | + | font-size: 10px; | |
− | + | /* margin: 20px 0px 10px;*/ | |
− | } | + | } |
− | + | ||
− | #clockdiv { | + | #clockdiv { |
− | + | font-family: sans-serif; | |
− | + | color: #fff; | |
− | + | display: inline-block; | |
− | + | font-weight: 10; | |
− | + | text-align: center; | |
− | + | font-size: 10px; | |
− | } | + | } |
− | + | ||
− | #clockdiv>div { | + | #clockdiv>div { |
− | + | padding: 5px; | |
− | + | border-radius: 3px; | |
− | + | /* background: #00BF96;*/ | |
− | + | display: inline-block; | |
− | } | + | } |
− | + | ||
− | #clockdiv div>span { | + | #clockdiv div>span { |
− | + | padding: 5px; | |
− | + | border-radius: 3px; | |
− | + | background: black; | |
− | + | display: inline-block; | |
− | } | + | } |
− | + | ||
− | .smalltext { | + | .smalltext { |
− | + | color: black; | |
− | + | padding-top: 5px; | |
− | + | font-size: 10px; | |
− | } | + | } |
− | + | /*-------guided tou related styles---------*/ | |
− | + | /*-------guided tour style sheet-----------*/ | |
− | /*-------guided tou related styles---------*/ | + | |
− | + | .wrap { | |
− | + | position: relative; | |
− | /*-------guided tour style sheet-----------*/ | + | top: 40px; |
− | + | margin: auto; | |
− | .wrap { | + | width: 800px; |
− | + | overflow: hidden; | |
− | + | height: 500px; | |
− | + | } | |
− | + | ||
− | + | body { | |
− | + | background-color: rgba(0, 0, 0, 0.5); | |
− | } | + | max-height: 500px; |
− | + | } | |
− | body { | + | |
− | + | #slides { | |
− | + | /* width: 999999px;*/ | |
− | } | + | height: 20000px; |
− | + | } | |
− | #slides { | + | |
− | + | #slides > div { | |
− | + | background-color: #fff7f2; | |
− | } | + | height: 500px; |
− | + | width: 800px; | |
− | #slides > div { | + | border-radius: 200px; |
− | + | float: left; | |
− | + | /* margin-right: 200px;*/ | |
− | + | margin-bottom: 100px; | |
− | + | text-align: center; | |
− | + | display: -webkit-flex; | |
− | + | -webkit-flex-direction: row; | |
− | + | -webkit-justify-content: center; | |
− | + | -webkit-align-items: center; | |
− | + | display: flex; | |
− | + | flex-direction: row; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | -webkit-transition: all 1s linear; | |
− | + | transition: all 1s linear; | |
− | + | } | |
− | + | ||
− | + | #slides h1, | |
− | + | #slides h2, | |
− | } | + | #slides h3, |
− | + | #slides h4, | |
− | #slides h1, | + | #slides h5 { |
− | #slides h2, | + | color: #534741; |
− | #slides h3, | + | font-family: 'League Gothic', sans-serif; |
− | #slides h4, | + | letter-spacing: 5px; |
− | #slides h5 { | + | } |
− | + | ||
− | + | #slides > div h2 { | |
− | + | font-size: 180px; | |
− | } | + | line-height: 1em; |
− | + | margin: 0; | |
− | #slides > div h2 { | + | } |
− | + | ||
− | + | .sporiBtm { | |
− | + | width: 55px; | |
− | } | + | position: absolute; |
− | + | left: 85%; | |
− | .sporiBtm { | + | top: 47%; |
− | + | -moz-transform: scaleX(-1); | |
− | + | -o-transform: scaleX(-1); | |
− | + | -webkit-transform: scaleX(-1); | |
− | + | transform: scaleX(-1); | |
− | + | } | |
− | + | ||
− | + | .arrowRht { | |
− | + | width: 60px; | |
− | } | + | position: absolute; |
− | + | left: 83%; | |
− | .arrowRht { | + | top: 57%; |
− | + | } | |
− | + | ||
− | + | .arrowLft { | |
− | + | width: 60px; | |
− | } | + | position: absolute; |
− | + | left: 83%; | |
− | .arrowLft { | + | top: 34%; |
− | + | } | |
− | + | ||
− | + | .arrowImg:hover img { | |
− | + | -webkit-transform: scale(1.15); | |
− | } | + | /* Safari and Chrome */ |
− | + | -moz-transform: scale(1.15); | |
− | .arrowImg:hover img { | + | /* Firefox */ |
− | + | -ms-transform: scale(1.15); | |
− | + | /* IE 9 */ | |
− | + | -o-transform: scale(1.15); | |
− | + | /* Opera */ | |
− | + | transform: scale(1.15); | |
− | + | } | |
− | + | ||
− | + | .gtContent { | |
− | + | position: relative; | |
− | } | + | width: 400px; |
− | + | left: 20px; | |
− | .gtContent { | + | top: 60px; |
− | + | } | |
− | + | ||
− | + | .gtContent2 { | |
− | + | position: relative; | |
− | } | + | width: 200px; |
− | + | left: 20px; | |
− | .gtContent2 { | + | top: 40px; |
− | + | } | |
− | + | ||
− | + | .gtContent3 { | |
− | + | position: relative; | |
− | } | + | width: 350px; |
− | + | left: 20px; | |
− | .gtContent3 { | + | top: 60px; |
− | + | } | |
− | + | ||
− | + | .gtContent4 { | |
− | + | position: relative; | |
− | } | + | top: 50px; |
− | + | left: 20px; | |
− | .gtContent4 { | + | } |
− | + | ||
− | + | .gtContent5 { | |
− | + | position: relative; | |
− | } | + | width: 200px; |
− | + | left: 20px; | |
− | .gtContent5 { | + | top: 80px; |
− | + | } | |
− | + | ||
− | + | .gtBubble { | |
− | + | width: 500px; | |
− | } | + | top: 10%; |
− | + | left: 20%; | |
− | .gtBubble { | + | position: absolute; |
− | + | } | |
− | + | ||
− | + | .gtBubble2 { | |
− | + | width: 700px; | |
− | } | + | top: 10%; |
− | + | left: 20%; | |
− | .gtBubble2 { | + | position: absolute; |
− | + | } | |
− | + | ||
− | + | .gtSpori { | |
− | + | width: 300px; | |
− | } | + | position: absolute; |
− | + | left: 0%; | |
− | .gtSpori { | + | top: 35%; |
− | + | z-index: 8; | |
− | + | } | |
− | + | /*---------------------------------------------*/ | |
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | /*---------------------------------------------*/ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.info { | .info { | ||
− | + | /* left: 25%;*/ | |
− | + | position: relative; | |
− | + | top: 10%; | |
− | + | height: 800px; | |
− | + | width: 1000px; | |
− | - | + | /* background-color: #299ac5;*/ |
− | - | + | display: flex; |
− | + | flex-direction: column; | |
+ | /* justify-content: center;*/ | ||
} | } | ||
− | # | + | |
+ | .color1 { | ||
+ | /* background-color: #299ac5;*/ | ||
+ | width: 100%; | ||
+ | height: 3000px; | ||
+ | text-align: center; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | border-radius: 25px; | ||
+ | background-color: rgba(0, 0, 0, 0.25); | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | |||
+ | #c1, | ||
+ | #c2, | ||
+ | #c3 { | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | .open { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | margin-top: -10px; | ||
+ | } | ||
+ | |||
+ | #o1, | ||
+ | #o2, | ||
+ | #o3 { | ||
visibility: hidden; | visibility: hidden; | ||
} | } | ||
− | } | + | |
+ | .closed { | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | #c1Img { | ||
+ | position: relative; | ||
+ | top: -7px; | ||
+ | width: 90px; | ||
+ | } | ||
+ | |||
+ | .imgDiv { | ||
+ | position: relative; | ||
+ | left: 15%; | ||
+ | top: 40px; | ||
+ | width: 150px; | ||
+ | height: 70px; | ||
+ | /* background-color: darkgrey;*/ | ||
+ | } | ||
+ | |||
+ | .txtDiv { | ||
+ | margin-left: 130px; | ||
+ | margin-top: 60px; | ||
+ | width: 460px; | ||
+ | height: 70px; | ||
+ | /* background-color: darkgrey;*/ | ||
+ | } | ||
+ | |||
+ | .resultDiv { | ||
+ | margin-top: -30px; | ||
+ | margin-left: 50px; | ||
+ | top: 15px; | ||
+ | width: 90%; | ||
+ | /* background-color: darkgrey;*/ | ||
+ | } | ||
+ | |||
+ | #o1 reultDiv { | ||
+ | height: 300px; | ||
+ | } | ||
+ | |||
+ | .txt2Div { | ||
+ | margin-left: 20px; | ||
+ | margin-top: 15px; | ||
+ | width: 660px; | ||
+ | height: 70px; | ||
+ | /* background-color: darkgrey;*/ | ||
+ | } | ||
+ | |||
+ | .txt2Div div { | ||
+ | margin-left: 30px; | ||
+ | } | ||
+ | |||
+ | .Arrow { | ||
+ | margin-top: 40px; | ||
+ | margin-left: 20px; | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | } | ||
+ | |||
+ | .Arrow img { | ||
+ | width: 70px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 500px) { | ||
+ | .info { | ||
+ | margin-left: 2%; | ||
+ | -webkit-transform: scale(0.40); | ||
+ | -moz-transform: scale(0.40); | ||
+ | -ms-transform: scale(0.40); | ||
+ | transform: scale(0.40); | ||
+ | -ms-transform-origin: 0% 0%; | ||
+ | -webkit-transform-origin: 0% 0%; | ||
+ | transform-origin: 0% 0%; | ||
+ | } | ||
+ | #back-top { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
<!-- end of style for countdown --> | <!-- end of style for countdown --> | ||
Line 385: | Line 379: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
− | + | </center> | |
</div> | </div> | ||
</center> | </center> | ||
<script> | <script> | ||
− | + | ///////////////////////////////////////////////////////////// | |
− | + | // for opoening and closing GT tag | |
− | + | ||
− | + | var c1Flag = 0; | |
+ | var c1Arrow = document.getElementById('c1Arrow'); // Grabbing the sample id | ||
+ | var c1 = document.getElementById('c1'); | ||
+ | c1Arrow.addEventListener('click', function (e) { // When someone clicks on it | ||
+ | if (c1Flag == 0) { | ||
+ | c1.style.height = '700px'; | ||
+ | c1Flag = 1; | ||
+ | $("#o1").css("visibility", "visible"); | ||
+ | $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png"); | ||
+ | } else { | ||
+ | c1.style.height = "150px"; | ||
+ | c1Flag = 0; | ||
+ | $("#o1").css("visibility", "hidden"); | ||
+ | $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png"); | ||
− | + | } | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | //GT | |
− | + | var Slides = { | |
− | + | container: $('#slides'), | |
− | + | totalSlides: '', | |
− | + | translateAmount: 0, | |
− | + | currentSlide: 0, | |
− | + | slideWidth: '', | |
− | + | slideArray: [ | |
// 0 | // 0 | ||
'<div>\n' + | '<div>\n' + | ||
Line 505: | Line 496: | ||
], | ], | ||
− | + | init: function (totalSlides) { | |
− | + | var each; | |
− | + | if (!totalSlides) throw new Error('Please pass the total number of slides.'); | |
− | + | Slides.totalSlides = totalSlides; | |
− | + | Slides.loadContent(); | |
− | + | each = Slides.container.children('div'); | |
− | + | // Determine the width of our canvas | |
− | + | Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10)); | |
− | + | Slides.keyPress(); | |
− | + | Slides.keyDown(); | |
− | + | }, | |
− | + | loadContent: function () { | |
− | + | Slides.container.hide(); | |
− | + | for (var i = 0; i < Slides.totalSlides; i++) { | |
− | + | $('<div id="#slide-' + i + '"></div>') | |
− | + | // .load('slides/' + i + '.html') | |
− | + | .html(Slides.slideArray[i]) | |
− | + | .appendTo(Slides.container); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | Slides.container.show(); | |
− | + | }, | |
− | + | keyDown: function () { | |
− | console.log("keypress func"); | + | console.log("keydown func"); |
− | + | $(document.body).keydown(function (evt) { | |
− | + | // console.log(evt); | |
− | + | var e = evt || window.event; | |
− | + | console.log("key:", e.keyCode); | |
− | + | // if left or right arrow key is pressed | |
− | + | if (e.keyCode === 39 || e.keyCode === 37) { | |
− | + | e.preventDefault(); | |
− | + | (e.keyCode === 39) ? Slides.next(): Slides.prev(); | |
+ | } | ||
+ | }); | ||
+ | }, | ||
+ | |||
+ | keyPress: function () { | ||
+ | console.log("keypress func"); | ||
+ | $(document.body).keypress(function (evt) { | ||
+ | // console.log(evt); | ||
+ | var e = evt || window.event; | ||
+ | console.log("key:", e.keyCode); | ||
+ | // if left or right arrow key is pressed | ||
+ | if (e.keyCode === 39 || e.keyCode === 37) { | ||
+ | e.preventDefault(); | ||
+ | (e.keyCode === 39) ? Slides.next(): Slides.prev(); | ||
+ | } | ||
+ | }); | ||
+ | }, | ||
+ | |||
+ | |||
+ | next: function () { | ||
+ | console.log(Slides.totalSlides, Slides.currentSlide); | ||
+ | if (Slides.currentSlide + 1 != Slides.totalSlides) { | ||
+ | Slides.translateAmount -= Slides.slideWidth; | ||
+ | Slides.updateHash(++Slides.currentSlide); | ||
+ | Slides.animate(); | ||
} | } | ||
− | + | }, | |
− | + | ||
+ | prev: function () { | ||
+ | // No more left to go back. | ||
+ | if (Slides.translateAmount === 0) return; | ||
− | + | Slides.translateAmount += Slides.slideWidth; | |
− | + | Slides.updateHash(--Slides.currentSlide); | |
− | + | ||
− | Slides.translateAmount | + | |
− | Slides.updateHash( | + | |
Slides.animate(); | Slides.animate(); | ||
− | + | }, | |
− | + | ||
− | + | animate: function () { | |
− | + | Slides | |
− | + | .container | |
+ | .children() | ||
+ | .css({ | ||
+ | '-webkit-transform': 'translateY(' + Slides.translateAmount + 'px)', | ||
+ | 'transform': 'translateY(' + Slides.translateAmount + 'px)' | ||
+ | }); | ||
− | + | }, | |
− | + | ||
− | + | ||
− | + | ||
− | + | updateHash: function (direction) { | |
− | + | // Update current Slides and hash. | |
− | + | location.hash = '#slide-' + Slides.currentSlide; | |
− | + | } | |
− | + | }; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | Slides.init(13); | |
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 01:08, 20 October 2016
Welcome to the Team-Wiki from iGEM Freiburg 2016.
On the following pages we want to show you how we use Bacillus subtilis endospores to reduce the side effects of systemically distributed medication.
Click on the menus to get more information or follow Spori through a guided tour (coming soon).
Please Click on the Arrow to begin the Guided Tour.