Difference between revisions of "Team:Freiburg"

Line 1: Line 1:
−
{{Freiburg/Styles}}
+
{{Freiburg/Styles}} {{Freiburg/Home}} {{Freiburg/Main}} {{Freiburg/Menubar}}
−
{{Freiburg/Home}}
+
−
{{Freiburg/Main}}
+
−
{{Freiburg/Menubar}}
+
−
 
+
 
<html>
 
<html>
−
 
 
<!-- styles for countdown -->
 
<!-- styles for countdown -->
−
    <style>
+
<style>
−
        body {
+
body {
−
            text-align: right;
+
    text-align: right;
−
/*            background: #00ECB9;*/
+
    /*            background: #00ECB9;*/
−
            font-family: sans-serif;
+
    font-family: sans-serif;
−
            font-weight: 100;
+
    font-weight: 100;
 +
}
  
−
        }
+
hh6 {
 +
    margin-right: 30px;
 +
    color: black;
 +
    font-weight: 0;
 +
    font-size: 10px;
 +
    /*            margin: 20px 0px 10px;*/
 +
}
  
−
        hh6 {
+
#clockdiv {
−
            margin-right: 30px;
+
    font-family: sans-serif;
−
            color: black;
+
    color: #fff;
−
            font-weight: 0;
+
    display: inline-block;
−
            font-size: 10px;
+
    font-weight: 10;
−
/*            margin: 20px 0px 10px;*/
+
    text-align: center;
−
        }
+
    font-size: 10px;
 +
}
  
−
        #clockdiv {
+
#clockdiv>div {
−
            font-family: sans-serif;
+
    padding: 5px;
−
            color: #fff;
+
    border-radius: 3px;
−
            display: inline-block;
+
    /*            background: #00BF96;*/
−
            font-weight: 10;
+
    display: inline-block;
−
            text-align: center;
+
}
−
            font-size: 10px;
+
−
        }
+
  
−
        #clockdiv>div {
+
#clockdiv div>span {
−
            padding: 5px;
+
    padding: 5px;
−
            border-radius: 3px;
+
    border-radius: 3px;
−
/*            background: #00BF96;*/
+
    background: black;
−
            display: inline-block;
+
    display: inline-block;
−
        }
+
}
  
−
        #clockdiv div>span {
+
.smalltext {
−
            padding: 5px;
+
    color: black;
−
            border-radius: 3px;
+
    padding-top: 5px;
−
            background: black;
+
    font-size: 10px;
−
            display: inline-block;
+
}
−
        }
+
  
−
        .smalltext {
 
−
            color: black;
 
−
            padding-top: 5px;
 
−
            font-size: 10px;
 
−
        }
 
  
−
.frame {
+
/*-------guided tou related styles---------*/
−
            text-align: center;
+
−
            /*           position: absolute;*/
+
−
            /*            left:50px;*/
+
−
            position: relative;
+
−
            top: 20px;
+
−
            width: 1000px;
+
−
            height: 580px;
+
−
            overflow-y: hidden;
+
−
            overflow-x: hidden;
+
−
            box-shadow: 30px 30px 180px grey;
+
−
        }
+
−
       
+
−
        .closeframe {
+
−
            width: 30px;
+
−
            position: relative;
+
−
            top: 150px;
+
−
            left: 490px;
+
−
            display: inline-block;
+
  
−
        }
 
−
@media screen and (max-width: 500px) {
 
  
−
.frame {
+
/*-------guided tour style sheet-----------*/
−
box-shadow: 30px 30px 80px grey;
+
  
−
-webkit-transform:scale(0.3);
+
.wrap {
−
-moz-transform:scale(0.3);
+
    position: relative;
−
-ms-transform:scale(0.3);
+
    top: 40px;
−
transform:scale(0.3);
+
    margin: auto;
 +
    width: 800px;
 +
    overflow: hidden;
 +
    height: 500px;
 +
}
  
−
-ms-transform-origin: 0% 0%; /* IE 9 */
+
body {
−
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
+
    background-color: rgba(0, 0, 0, 0.5);
−
transform-origin: 0% 0%;
+
    max-height: 500px;
−
           
+
−
        }
+
 
}
 
}
−
    </style>
 
−
    <!-- end of style for countdown -->
 
  
−
<body>
+
#slides {
−
<div class="column full_size" >
+
    /*    width: 999999px;*/
 +
    height: 20000px;
 +
}
  
−
<div class="para_center_20">
+
#slides > div {
 +
    background-color: #fff7f2;
 +
    height: 500px;
 +
    width: 800px;
 +
    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 h5 {
 +
    color: #534741;
 +
    font-family: 'League Gothic', sans-serif;
 +
    letter-spacing: 5px;
 +
}
  
−
<font color="#bc5916">
+
#slides > div h2 {
 +
    font-size: 180px;
 +
    line-height: 1em;
 +
    margin: 0;
 +
}
  
−
<p style="font-size:30px"> Welcome to the Team-Wiki from iGEM Freiburg 2016.</p>
+
.sporiBtm {
−
<br><br>
+
    width: 55px;
−
On the following pages we want to show you how we use <i>Bacillus subtilis</i> endospores to reduce the side effects of systemically distributed medication.<br><br>
+
    position: absolute;
−
+
    left: 71%;
 +
    top: 47%;
 +
    -moz-transform: scaleX(-1);
 +
    -o-transform: scaleX(-1);
 +
    -webkit-transform: scaleX(-1);
 +
    transform: scaleX(-1);
 +
}
  
−
Click on the menus to get more information or follow Spori through a guided tour (coming soon).  
+
.arrowRht {
 +
    width: 60px;
 +
    position: absolute;
 +
    left: 70%;
 +
    top: 52%;
 +
}
  
−
</font>
+
.arrowLft {
−
</div>
+
    width: 60px;
 +
    position: absolute;
 +
    left: 70%;
 +
    top: 41%;
 +
}
  
 +
.arrowImg:hover img {
 +
    -webkit-transform: scale(1.15);
 +
    /* Safari and Chrome */
 +
    -moz-transform: scale(1.15);
 +
    /* Firefox */
 +
    -ms-transform: scale(1.15);
 +
    /* IE 9 */
 +
    -o-transform: scale(1.15);
 +
    /* Opera */
 +
    transform: scale(1.15);
 +
}
  
−
</div>
+
.gtContent {
 +
    position: relative;
 +
    width: 400px;
 +
    left: 20px;
 +
    top: 60px;
 +
}
  
−
<center>
+
.gtContent2 {
 +
    position: relative;
 +
    width: 200px;
 +
    left: 20px;
 +
    top: 40px;
 +
}
 +
 
 +
.gtContent3 {
 +
    position: relative;
 +
    width: 350px;
 +
    left: 20px;
 +
    top: 60px;
 +
}
 +
 
 +
.gtBubble {
 +
    width: 500px;
 +
    top: 10%;
 +
    left: 20%;
 +
    position: absolute;
 +
}
 +
 
 +
.gtBubble2 {
 +
    width: 700px;
 +
    top: 10%;
 +
    left: 20%;
 +
    position: absolute;
 +
}
 +
 
 +
.gtSpori {
 +
    width: 300px;
 +
    position: absolute;
 +
    left: 15%;
 +
    top: 35%;
 +
    z-index: 8;
 +
}
 +
 
 +
 
 +
/*---------------------------------------------*/
 +
 
 +
.info {
 +
    /*            left: 25%;*/
 +
    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;
 +
}
 +
 
 +
#o1,
 +
#o2,
 +
#o3 {
 +
    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: 20px;
 +
    margin-left: 0px;
 +
    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.50);
 +
        -moz-transform: scale(0.50);
 +
        -ms-transform: scale(0.50);
 +
        transform: scale(0.50);
 +
        -ms-transform-origin: 0% 0%;
 +
        -webkit-transform-origin: 0% 0%;
 +
        transform-origin: 0% 0%;
 +
    }
 +
    #back-top {
 +
        visibility: hidden;
 +
    }
 +
}
 +
</style>
 +
<!-- end of style for countdown -->
 +
 
 +
<body>
 +
    <div class="column full_size">
 +
        <div class="para_center_20">
 +
            <font color="#bc5916">
 +
                <p style="font-size:30px"> Welcome to the Team-Wiki from iGEM Freiburg 2016.</p>
 +
                <br>
 +
                <br> On the following pages we want to show you how we use <i>Bacillus subtilis</i> endospores to reduce the side effects of systemically distributed medication.
 +
                <br>
 +
                <br> Click on the menus to get more information or follow Spori through a guided tour (coming soon).
 +
            </font>
 +
        </div>
 +
    </div>
 +
    <center>
 
         <div id="tour" style="display:block">
 
         <div id="tour" style="display:block">
 
             <!-- div class="closeframe">
 
             <!-- div class="closeframe">
 
                 <a href='#' onclick="document.getElementById('tour').style.display = 'none'" style="color:brown;">X</a ></div-->
 
                 <a href='#' onclick="document.getElementById('tour').style.display = 'none'" style="color:brown;">X</a ></div-->
−
             <div>
+
             <center>
−
                 <iframe class="frame" src="https://2016.igem.org/Team:Freiburg/Gt" scrolling="no" frameborder="0"></iframe>
+
                 <div class='info'>
−
            </div>
+
                    <div id="c1" class="container">
−
 
+
                        <div class="closed">
 +
                            <div class='imgDiv'>
 +
                                <img id="c1Img" src="https://static.igem.org/mediawiki/2016/d/d1/T--Freiburg--Proof_of_Concept_Front1.png">
 +
                            </div>
 +
                            <div class='txtDiv'>
 +
                                <div>Please Click on the Arrow to begin the Guided Tour.
 +
                                </div>
 +
                            </div>
 +
                            <div class="Arrow">
 +
                                <img id="c1Arrow" src="https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png">
 +
                            </div>
 +
                        </div>
 +
                        <div id="o1" class="open">
 +
                            <div class='resultDiv'>
 +
                                <div class="image">
 +
                                    <img class="gtSpori" src="https://static.igem.org/mediawiki/2016/2/2e/T--Freiburg--Spori.png" alt="Smiley face">
 +
                                </div>
 +
                                <div class="wrap">
 +
                                    <div id="slides">
 +
                                        <!-- load in slides -->
 +
                                    </div>
 +
                                </div>
 +
                                <div class="arrowImg">
 +
                                    <img class="arrowLft" src="https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png" alt="Smiley face" onclick="Slides.prev()">
 +
                                </div>
 +
                                <div class="">
 +
                                    <img class="sporiBtm" src="https://static.igem.org/mediawiki/2016/2/2e/T--Freiburg--Spori.png" alt="Smiley face">
 +
                                </div>
 +
                                <div class="arrowImg">
 +
                                    <img class="arrowRht" src="https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png" alt="Smiley face" onclick="Slides.next()">
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
        </div>
 +
        </center>
 
         </div>
 
         </div>
 
     </center>
 
     </center>
−
 
+
    <div id="hh6" style="font-size: 10px; margin-right:30px;">Wiki Freeze Countdown</div>
−
 
+
    <div id="clockdiv">
−
 
+
−
<div id="hh6" style="font-size: 10px; margin-right:30px;">Wiki Freeze Countdown</div>
+
−
<div id="clockdiv">
+
 
         <div>
 
         <div>
 
             <span class="days"></span>
 
             <span class="days"></span>
Line 146: Line 393:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
    <script>
 +
    console.log("hello js");
  
 +
    function getTimeRemaining(endtime) {
 +
        var t = Date.parse(endtime) - Date.parse(new Date());
 +
        var seconds = Math.floor((t / 1000) % 60);
 +
        var minutes = Math.floor((t / 1000 / 60) % 60);
 +
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
 +
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
 +
        return {
 +
            'total': t,
 +
            'days': days,
 +
            'hours': hours,
 +
            'minutes': minutes,
 +
            'seconds': seconds
 +
        };
 +
    }
  
−
<script>
+
    function initializeClock(id, endtime) {
−
         console.log("hello js");
+
         var clock = document.getElementById(id);
 +
        var daysSpan = clock.querySelector('.days');
 +
        var hoursSpan = clock.querySelector('.hours');
 +
        var minutesSpan = clock.querySelector('.minutes');
 +
        var secondsSpan = clock.querySelector('.seconds');
  
−
         function getTimeRemaining(endtime) {
+
         function updateClock() {
−
             var t = Date.parse(endtime) - Date.parse(new Date());
+
             var t = getTimeRemaining(endtime);
−
             var seconds = Math.floor((t / 1000) % 60);
+
 
−
             var minutes = Math.floor((t / 1000 / 60) % 60);
+
             daysSpan.innerHTML = t.days;
−
             var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+
             hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
−
             var days = Math.floor(t / (1000 * 60 * 60 * 24));
+
             minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
−
             return {
+
             secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
−
                 'total': t,
+
 
−
                'days': days,
+
             if (t.total <= 0) {
−
                'hours': hours,
+
                 clearInterval(timeinterval);
−
                'minutes': minutes,
+
             }
−
                'seconds': seconds
+
−
             };
+
 
         }
 
         }
  
−
         function initializeClock(id, endtime) {
+
         updateClock();
−
            var clock = document.getElementById(id);
+
        var timeinterval = setInterval(updateClock, 1000);
−
            var daysSpan = clock.querySelector('.days');
+
    }
−
            var hoursSpan = clock.querySelector('.hours');
+
−
            var minutesSpan = clock.querySelector('.minutes');
+
−
            var secondsSpan = clock.querySelector('.seconds');
+
  
−
            function updateClock() {
+
    //        var deadline = new Date(Date.parse(new Date()) + 31 * 24 * 60 * 60 * 1000);
−
                var t = getTimeRemaining(endtime);
+
    var deadline = new Date(2016, 9, 19, 0, 0, 0, 0)
  
−
                daysSpan.innerHTML = t.days;
+
    initializeClock('clockdiv', deadline);
−
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+
−
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+
−
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
  
−
                if (t.total <= 0) {
+
    /////////////////////////////////////////////////////////////
−
                     clearInterval(timeinterval);
+
 
 +
    // 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 = '800px';
 +
            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 = "100px";
 +
            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
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/7/78/T--Freiburg--GT_s0.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/1/1e/T--Freiburg--GT_s0c.png" alt="Smiley face" onclick="" />\n ' +
 +
            '</div>',
 +
            // 1
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/c/c0/T--Freiburg--GT_s1.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/8/82/T--Freiburg--GT_s1c.png" alt="Smiley face" onclick="" />\n ' +
 +
            '</div>',
 +
            // 2
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/0/06/T--Freiburg--GT_s2.png" alt="Smiley face" onclick="" />\n' +
 +
            '<video class="gtContent" width="320" height="240" controls> <source src="https://static.igem.org/mediawiki/2016/b/bb/T--Freiburg--GT_s2c1.mp4" type="video/mp4"></video>\n ' +
 +
            '</div>',
 +
            // 3 
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/7/73/T--Freiburg--GT_s3.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent2" src="https://static.igem.org/mediawiki/2016/4/47/T--Freiburg--GT_s3c.png" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
            // 4
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/7/78/T--Freiburg--GT_s4.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent3" src="https://static.igem.org/mediawiki/2016/4/40/T--Freiburg--GT_s4c.gif" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
            // 5   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/d/db/T--Freiburg--GT_s5.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/9/92/T--Freiburg--GT_s5c.png" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
            // 6   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/0/09/T--Freiburg--GT_s6.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/1/1d/T--Freiburg--GT_s6c.png" alt="Smiley face" onclick="" />\n ' +
 +
            '</div>',
 +
            // 7   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/7/79/T--Freiburg--GT_s7.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/8/89/T--Freiburg--GT_s7c.png" alt="Smiley face" onclick="" />\n ' +
 +
            '</div>',
 +
            // 8   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/3/36/T--Freiburg--GT_s8.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/c/c9/T--Freiburg--GT_s8c.png" alt="Smiley face" onclick="" />\n ' +
 +
            '</div>',
 +
            // 9   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/f/fd/T--Freiburg--GT_s9.png" alt="Smiley face" onclick="" />\n' +
 +
            '<video class="gtContent" width="320" height="240" controls> <source src="https://static.igem.org/mediawiki/2016/2/2a/T--Freiburg--GT_s9c1.mp4" type="video/mp4"></video>\n ' +
 +
            '</div>',
 +
            // 10   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/3/36/T--Freiburg--GT_s10.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/3/33/T--Freiburg--GT_s10c.png" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
            // 11   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/b/b7/T--Freiburg--GT_s11.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/1/13/T--Freiburg--GT_s11c.png" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
            // 12   
 +
            '<div>\n' +
 +
            '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/8/8d/T--Freiburg--GT_s12.png" alt="Smiley face" onclick="" />\n' +
 +
            '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/9/97/T--Freiburg--GT_s12c.png" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>',
 +
 
 +
        ],
 +
 
 +
        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("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();
 
             }
 
             }
 +
        },
  
−
            updateClock();
+
        prev: function() {
−
             var timeinterval = setInterval(updateClock, 1000);
+
             // No more left to go back.
−
        }
+
            if (Slides.translateAmount === 0) return;
  
−
//        var deadline = new Date(Date.parse(new Date()) + 31 * 24 * 60 * 60 * 1000);
+
            Slides.translateAmount += Slides.slideWidth;
−
         var deadline = new Date(2016,9,19,0,0,0,0)
+
            Slides.updateHash(--Slides.currentSlide);
 +
            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;
 +
        }
 +
    };
  
−
        initializeClock('clockdiv', deadline);
+
    Slides.init(13);
 
     </script>
 
     </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 17:16, 19 October 2016

Menu

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.
Smiley face
Smiley face
Smiley face
Smiley face
Wiki Freeze Countdown
Days
Hours
Minutes
Seconds