Difference between revisions of "Team:Freiburg"

Line 3: Line 3:
 
<!-- 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 {
+
    hh6 {
    margin-right: 30px;
+
        margin-right: 30px;
    color: black;
+
        color: black;
    font-weight: 0;
+
        font-weight: 0;
    font-size: 10px;
+
        font-size: 10px;
    /*            margin: 20px 0px 10px;*/
+
        /*            margin: 20px 0px 10px;*/
}
+
    }
 
+
   
#clockdiv {
+
    #clockdiv {
    font-family: sans-serif;
+
        font-family: sans-serif;
    color: #fff;
+
        color: #fff;
    display: inline-block;
+
        display: inline-block;
    font-weight: 10;
+
        font-weight: 10;
    text-align: center;
+
        text-align: center;
    font-size: 10px;
+
        font-size: 10px;
}
+
    }
 
+
   
#clockdiv>div {
+
    #clockdiv>div {
    padding: 5px;
+
        padding: 5px;
    border-radius: 3px;
+
        border-radius: 3px;
    /*            background: #00BF96;*/
+
        /*            background: #00BF96;*/
    display: inline-block;
+
        display: inline-block;
}
+
    }
 
+
   
#clockdiv div>span {
+
    #clockdiv div>span {
    padding: 5px;
+
        padding: 5px;
    border-radius: 3px;
+
        border-radius: 3px;
    background: black;
+
        background: black;
    display: inline-block;
+
        display: inline-block;
}
+
    }
 
+
   
.smalltext {
+
    .smalltext {
    color: black;
+
        color: black;
    padding-top: 5px;
+
        padding-top: 5px;
    font-size: 10px;
+
        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;
    position: relative;
+
        overflow: hidden;
    top: 40px;
+
        height: 500px;
    margin: auto;
+
    }
    width: 800px;
+
   
    overflow: hidden;
+
    body {
    height: 500px;
+
        background-color: rgba(0, 0, 0, 0.5);
}
+
        max-height: 500px;
 
+
    }
body {
+
   
    background-color: rgba(0, 0, 0, 0.5);
+
    #slides {
    max-height: 500px;
+
        /*    width: 999999px;*/
}
+
        height: 20000px;
 
+
    }
#slides {
+
   
    /*    width: 999999px;*/
+
    #slides > div {
    height: 20000px;
+
        background-color: #fff7f2;
}
+
        height: 500px;
 
+
        width: 800px;
#slides > div {
+
        border-radius: 200px;
    background-color: #fff7f2;
+
        float: left;
    height: 500px;
+
        /*    margin-right: 200px;*/
    width: 800px;
+
        margin-bottom: 100px;
    border-radius: 200px;
+
        text-align: center;
    float: left;
+
        display: -webkit-flex;
    /*    margin-right: 200px;*/
+
        -webkit-flex-direction: row;
    margin-bottom: 100px;
+
        -webkit-justify-content: center;
    text-align: center;
+
        -webkit-align-items: center;
    display: -webkit-flex;
+
        display: flex;
    -webkit-flex-direction: row;
+
        flex-direction: row;
    -webkit-justify-content: center;
+
        justify-content: center;
    -webkit-align-items: center;
+
        align-items: center;
    display: flex;
+
        -webkit-transition: all 1s linear;
    flex-direction: row;
+
        transition: all 1s linear;
    justify-content: center;
+
    }
    align-items: center;
+
   
    -webkit-transition: all 1s linear;
+
    #slides h1,
    transition: all 1s linear;
+
    #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 {
+
    }
    color: #534741;
+
   
    font-family: 'League Gothic', sans-serif;
+
    #slides > div h2 {
    letter-spacing: 5px;
+
        font-size: 180px;
}
+
        line-height: 1em;
 
+
        margin: 0;
#slides > div h2 {
+
    }
    font-size: 180px;
+
   
    line-height: 1em;
+
    .sporiBtm {
    margin: 0;
+
        width: 55px;
}
+
        position: absolute;
 
+
        left: 85%;
.sporiBtm {
+
        top: 47%;
    width: 55px;
+
        -moz-transform: scaleX(-1);
    position: absolute;
+
        -o-transform: scaleX(-1);
    left: 85%;
+
        -webkit-transform: scaleX(-1);
    top: 47%;
+
        transform: scaleX(-1);
    -moz-transform: scaleX(-1);
+
    }
    -o-transform: scaleX(-1);
+
   
    -webkit-transform: scaleX(-1);
+
    .arrowRht {
    transform: scaleX(-1);
+
        width: 60px;
}
+
        position: absolute;
 
+
        left: 83%;
.arrowRht {
+
        top: 57%;
    width: 60px;
+
    }
    position: absolute;
+
   
    left: 83%;
+
    .arrowLft {
    top: 57%;
+
        width: 60px;
}
+
        position: absolute;
 
+
        left: 83%;
.arrowLft {
+
        top: 34%;
    width: 60px;
+
    }
    position: absolute;
+
   
    left: 83%;
+
    .arrowImg:hover img {
    top: 34%;
+
        -webkit-transform: scale(1.15);
}
+
        /* Safari and Chrome */
 
+
        -moz-transform: scale(1.15);
.arrowImg:hover img {
+
        /* Firefox */
    -webkit-transform: scale(1.15);
+
        -ms-transform: scale(1.15);
    /* Safari and Chrome */
+
        /* IE 9 */
    -moz-transform: scale(1.15);
+
        -o-transform: scale(1.15);
    /* Firefox */
+
        /* Opera */
    -ms-transform: scale(1.15);
+
        transform: scale(1.15);
    /* IE 9 */
+
    }
    -o-transform: scale(1.15);
+
   
    /* Opera */
+
    .gtContent {
    transform: scale(1.15);
+
        position: relative;
}
+
        width: 400px;
 
+
        left: 20px;
.gtContent {
+
        top: 60px;
    position: relative;
+
    }
    width: 400px;
+
   
    left: 20px;
+
    .gtContent2 {
    top: 60px;
+
        position: relative;
}
+
        width: 200px;
 
+
        left: 20px;
.gtContent2 {
+
        top: 40px;
    position: relative;
+
    }
    width: 200px;
+
   
    left: 20px;
+
    .gtContent3 {
    top: 40px;
+
        position: relative;
}
+
        width: 350px;
 
+
        left: 20px;
.gtContent3 {
+
        top: 60px;
    position: relative;
+
    }
    width: 350px;
+
   
    left: 20px;
+
    .gtContent4 {
    top: 60px;
+
        position: relative;
}
+
        top: 50px;
 
+
        left: 20px;
.gtContent4 {
+
    }
    position: relative;
+
   
    top: 50px;
+
    .gtContent5 {
    left: 20px;
+
        position: relative;
}
+
        width: 200px;
 
+
        left: 20px;
.gtContent5 {
+
        top: 80px;
    position: relative;
+
    }
    width: 200px;
+
   
    left: 20px;
+
    .gtBubble {
    top: 80px;
+
        width: 500px;
}
+
        top: 10%;
 
+
        left: 20%;
.gtBubble {
+
        position: absolute;
    width: 500px;
+
    }
    top: 10%;
+
   
    left: 20%;
+
    .gtBubble2 {
    position: absolute;
+
        width: 700px;
}
+
        top: 10%;
 
+
        left: 20%;
.gtBubble2 {
+
        position: absolute;
    width: 700px;
+
    }
    top: 10%;
+
   
    left: 20%;
+
    .gtSpori {
    position: absolute;
+
        width: 300px;
}
+
        position: absolute;
 
+
        left: 0%;
.gtSpori {
+
        top: 35%;
    width: 300px;
+
        z-index: 8;
    position: absolute;
+
    }
    left: 0%;
+
    /*---------------------------------------------*/
    top: 35%;
+
      
    z-index: 8;
+
}
+
 
+
 
+
/*---------------------------------------------*/
+
 
+
.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;
+
}
+
 
+
.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 {
 
     .info {
         margin-left: 2%;
+
         /*            left: 25%;*/
         -webkit-transform: scale(0.40);
+
         position: relative;
         -moz-transform: scale(0.40);
+
         top: 10%;
         -ms-transform: scale(0.40);
+
         height: 800px;
         transform: scale(0.40);
+
         width: 1000px;
         -ms-transform-origin: 0% 0%;
+
         /*            background-color: #299ac5;*/
         -webkit-transform-origin: 0% 0%;
+
         display: flex;
         transform-origin: 0% 0%;
+
        flex-direction: column;
 +
         /*            justify-content: center;*/
 
     }
 
     }
     #back-top {
+
      
 +
    .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>
        </div>
+
 
        </center>
+
            </center>
 
         </div>
 
         </div>
 
     </center>
 
     </center>
  
 
     <script>
 
     <script>
   
+
        /////////////////////////////////////////////////////////////
  
 
+
        // for opoening and closing GT tag
    /////////////////////////////////////////////////////////////
+
  
    // 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");
  
    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
+
        //GT
    var Slides = {
+
        var Slides = {
        container: $('#slides'),
+
            container: $('#slides'),
  
        totalSlides: '',
+
            totalSlides: '',
  
        translateAmount: 0,
+
            translateAmount: 0,
  
        currentSlide: 0,
+
            currentSlide: 0,
  
        slideWidth: '',
+
            slideWidth: '',
  
        slideArray: [
+
            slideArray: [
 
             // 0
 
             // 0
 
             '<div>\n' +
 
             '<div>\n' +
Line 505: Line 496:
 
         ],
 
         ],
  
        init: function(totalSlides) {
+
            init: function (totalSlides) {
            var each;
+
                var each;
  
            if (!totalSlides) throw new Error('Please pass the total number of slides.');
+
                if (!totalSlides) throw new Error('Please pass the total number of slides.');
            Slides.totalSlides = totalSlides;
+
                Slides.totalSlides = totalSlides;
  
            Slides.loadContent();
+
                Slides.loadContent();
  
            each = Slides.container.children('div');
+
                each = Slides.container.children('div');
  
            // Determine the width of our canvas
+
                // Determine the width of our canvas
            Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10));
+
                Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10));
  
            Slides.keyPress();
+
                Slides.keyPress();
            Slides.keyDown();
+
                Slides.keyDown();
        },
+
            },
  
        loadContent: function() {
+
            loadContent: function () {
            Slides.container.hide();
+
                Slides.container.hide();
            for (var i = 0; i < Slides.totalSlides; i++) {
+
                for (var i = 0; i < Slides.totalSlides; i++) {
                $('<div id="#slide-' + i + '"></div>')
+
                    $('<div id="#slide-' + i + '"></div>')
                    //                .load('slides/' + i + '.html')
+
                        //                .load('slides/' + i + '.html')
                    .html(Slides.slideArray[i])
+
                        .html(Slides.slideArray[i])
                    .appendTo(Slides.container);
+
                        .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();
+
 
                 }
 
                 }
            });
+
                Slides.container.show();
        },
+
            },
  
        keyPress: function() {
+
            keyDown: function () {
             console.log("keypress func");
+
                console.log("keydown func");
            $(document.body).keypress(function(evt) {
+
                $(document.body).keydown(function (evt) {
                //            console.log(evt);
+
                    //            console.log(evt);
                var e = evt || window.event;
+
                    var e = evt || window.event;
                console.log("key:", e.keyCode);
+
                    console.log("key:", e.keyCode);
                // if left or right arrow key is pressed
+
                    // if left or right arrow key is pressed
                if (e.keyCode === 39 || e.keyCode === 37) {
+
                    if (e.keyCode === 39 || e.keyCode === 37) {
                    e.preventDefault();
+
                        e.preventDefault();
                    (e.keyCode === 39) ? Slides.next(): Slides.prev();
+
                        (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;
  
        next: function() {
+
                 Slides.translateAmount += Slides.slideWidth;
            console.log(Slides.totalSlides, Slides.currentSlide);
+
                 Slides.updateHash(--Slides.currentSlide);
            if (Slides.currentSlide + 1 != Slides.totalSlides) {
+
                 Slides.translateAmount -= Slides.slideWidth;
+
                 Slides.updateHash(++Slides.currentSlide);
+
 
                 Slides.animate();
 
                 Slides.animate();
             }
+
             },
        },
+
  
        prev: function() {
+
            animate: function () {
            // No more left to go back.
+
                Slides
            if (Slides.translateAmount === 0) return;
+
                    .container
 +
                    .children()
 +
                    .css({
 +
                        '-webkit-transform': 'translateY(' + Slides.translateAmount + 'px)',
 +
                        'transform': 'translateY(' + Slides.translateAmount + 'px)'
 +
                    });
  
             Slides.translateAmount += Slides.slideWidth;
+
             },
            Slides.updateHash(--Slides.currentSlide);
+
            Slides.animate();
+
        },
+
  
        animate: function() {
+
             updateHash: function (direction) {
             Slides
+
                // Update current Slides and hash.
                .container
+
                location.hash = '#slide-' + Slides.currentSlide;
                .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);
+
        Slides.init(13);
 
     </script>
 
     </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 01:08, 20 October 2016

Template:Freiburg/top

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