Difference between revisions of "Team:UPMC-Paris"

Line 1: Line 1:
 
{{UPMC-Paris}}
 
{{UPMC-Paris}}
 
<html>
 
<html>
 
<div id="homepageWrapper">
 
<div id="homepageContainer">
 
 
@media screen and (max-device-width:480px) {
 
#sideFiller {
 
    width:80%;
 
    height:auto;
 
}
 
 
 
.mediabutton {
 
    width:48px;
 
    margin:3px;
 
    border-radius: 50%;
 
    display:inline-block;
 
}
 
@media screen and (max-device-width:480px) {
 
.mediabutton {
 
    width:120px;
 
    height:120px;
 
}
 
 
 
@media only screen and (max-device-width: 480px) {
 
.hideMenu {
 
    text-align: left;
 
    height:auto;
 
    float:none;
 
    margin: .3em 0 0 2em;
 
    background-color:#383838;
 
    position:absolute;
 
    width:100%;
 
}
 
 
 
 
 
<div class="content" id="homeMainContainer" style="float:left;width:100%;height:50%;"><div class="contentInner" style="margin:1.25%;">
 
<div id="homeMainCaption"></div>
 
<div id="homepageImageContainer">
 
<img class="homeMainImage centered" id="homeImage0" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<img class="homeMainImage centered" id="homeImage1" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<img class="homeMainImage centered" id="homeImage2" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<img class="homeMainImage centered" id="homeImage3" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<img class="homeMainImage centered" id="homeimage4" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<img class="homeMainImage centered" id="homeImage5" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
 
<a id="homeMainArrowPrev" href="#" onclick="changeState(-1); return false;">&#9668;</a>
 
<a id="homeMainArrowNext" href="#" onclick="changeState(1); return false;">&#9658;</a>
 
</div>
 
 
<style>
 
.homeMainImage {
 
    transition: opacity 0.5s ease-out;
 
    position:absolute !important;
 
    height:100%;
 
/*    top:0%;
 
    left:0%;*/
 
    opacity:0;
 
}
 
#homeImage0 {
 
    opacity:1;
 
}
 
 
</style>
 
<style id="mainState0">
 
#homeImage0 {opacity:1;}
 
</style>
 
 
<style id="mainState1">
 
#homeImage1 {opacity:1;}
 
 
 
</style>
 
 
<style id="mainState2">
 
#homeImage2 {opacity:1;}
 
 
 
</style>
 
<style id="mainState3">
 
#homeImage3 {opacity:1;}
 
 
 
</style>
 
<style id="mainState4">
 
#homeImage4 {opacity:1;}
 
 
</style>
 
<style id="mainState5">
 
#homeImage5 {opacity:1;}
 
 
 
</style>
 
<style id="mainState6">
 
#homeImage6 {opacity:1;}
 
</style>
 
 
<script>
 
var homeMainStates = [
 
    document.getElementById('mainState0'),
 
    document.getElementById('mainState1'),
 
    document.getElementById('mainState2'),
 
    document.getElementById('mainState3'),
 
    document.getElementById('mainState4'),
 
    document.getElementById('mainState5')
 
];
 
var homeMainCaptions = [
 
    "<h3>1</h3>",
 
    "<h3>2</h3>",
 
    "<h3>3</h3>",
 
    "<h3>4</h3>",
 
    "<h3>5</h3>",
 
    "<h3>6</h3>",
 
    "<h3>7</h3>"
 
];
 
var curMainState = 0;
 
var numMainStates = homeMainStates.length;
 
 
$(function() {
 
    for (var i=1;i<numMainStates;i++) {
 
        homeMainStates[i].disabled = true;
 
    }
 
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[0];
 
});
 
 
function changeState(dir) {
 
    if (document.getElementById('homeMainContainer').className == "content") {
 
    document.getElementById('homeMainContainer').className = "content running";
 
    if (dir==1) {
 
        if (curMainState == numMainStates-1) {
 
            curMainState = numMainStates;
 
            while (curMainState--) {
 
                homeMainStates[curMainState].disabled = true;
 
            }
 
        } else {
 
            homeMainStates[curMainState+1].disabled = false;
 
        }
 
    } else {
 
        if (curMainState) {
 
            homeMainStates[curMainState].disabled = true;
 
        } else {
 
            curMainState = 1;
 
        }
 
    }
 
    curMainState += dir;
 
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[curMainState];
 
    setTimeout(function(){document.getElementById('homeMainContainer').className = "content";},700);
 
    }
 
}
 
</script>
 
 
<style>
 
#homeMainArrowNext, #homeMainArrowPrev {
 
    position:absolute;
 
    top:50%;
 
    font-size:500%;
 
    display:none;
 
}
 
#homeMainArrowNext {
 
    right:0;
 
}
 
#homeMainArrowPrev {
 
    left:0;
 
}
 
#homeMainContainer:hover #homeMainArrowNext, #homeMainContainer:hover #homeMainArrowPrev {
 
    display:block;
 
}
 
</style>
 
</div></div>
 
 
 
 
 
 
 
 
 
 
 
 
<body>
 
<body>
 
<div align="center">
 
<div align="center">

Revision as of 16:46, 30 September 2016