Difference between revisions of "Template:Team:TU Eindhoven/Home HTML"

 
(37 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<br />
 +
<div id="wikiTour">
 +
<a style="text-decoration: none" href="https://2015.igem.org/Team:TU_Eindhoven/Project">
 +
<div id="nextChapter">
 +
<span class="tekst1BI">Start the Tour</span><br />
 +
<img class="tourButton" src="https://static.igem.org/mediawiki/2015/7/7c/TU_Eindhoven_PlayButton.png">
 +
<span class="tekst1">
 +
Our Wiki tour walks you through the highlights of our iGEM Project. Click here to start it.
 +
</span>
 +
</div>
 +
</a>
 +
</div>
 +
 +
 
<div id="containercontent">
 
<div id="containercontent">
 +
<div id="landingPage">
 +
 +
<br /><br /><br />
 +
<div class="tekstMiddle">
 +
<h1>Welcome to the Wiki of TU Eindhoven</h1><br />
 +
<span class="tekst1">Feel free to take the wiki tour or watch the video below</span>
 +
</div>
 +
<div id="hexagonwrapper">
 +
</div>
 +
 +
<div class="vid">
 +
<video class="video" controls>
 +
    <source src="https://static.igem.org/mediawiki/2015/c/c1/TU_Eindhoven_Movie.mp4"type="video/mp4">
 +
    Your browser does not support the video tag.
 +
</video>
 +
</div>
 
<br />
 
<br />
 
<br />
 
<br />
−
<br />
+
<div style="text-align:center;" ><span class="tekst1">  
−
<br />
+
−
<br />
+
−
<br />
+
  
−
<div style="text-align:center;" ><h1> Welcome to the wiki of iGEM TU Eindhoven 2015! </h1> </div>
+
iGEM is the world’s leading competition in the field of Synthetic Biology. We are the fourth iteration of TU Eindhoven students taking part in this awesome competition. Inspired by Eindhoven's last year's results and the exciting field of SynBio, we are driven to set the bar high with an innovative idea. For more information, select one of the hexagons above to check out our wiki! </span></div>
 
<br />
 
<br />
 
<br />
 
<br />
 
<br />
 
<br />
−
<br />
 
−
 
 
<div style="text-align:center;" ><span class="tekst1">  
 
<div style="text-align:center;" ><span class="tekst1">  
−
 
+
For questions, information or collaborations, you can
−
iGEM is the world’s leading competition in the field of Synthetic Biology <br /></span></div>
+
<span class="tekst1BI"><a href="mailto:igem@tue.nl">contact us.</a> </span>
−
 
+
</div>
−
<html>
+
−
 
+
−
<head>
+
−
<meta charset="UTF-8" />
+
−
<script src="jquery-2.1.4.min.js"></script>
+
−
<script>
+
−
var vergroot = 0;
+
−
var steps = 13;
+
−
var afknot = 50;
+
−
var amount = 6;
+
−
var radius = 170;
+
−
var width = 270;
+
−
var height = 0.5 * Math.sqrt(3) * width;
+
−
var image = ['f/f0/TU_Eindhoven_menu_policypractice.png','5/53/TU_Eindhoven_menu_collaborations.png','1/14/TU_Eindhoven_menu_sponsors.png','b/bb/TU_Eindhoven_menu_home.png','5/56/TU_Eindhoven_menu_team.png','1/1a/TU_Eindhoven_menu_project.png'];
+
−
var title = ['Policy Practices','Collaboratons','Sponsors','Home','Team','Project'];
+
−
var links = ['/Policy_Practices','/Collaboratons','/Team/Sponsors','','/Team','/Project'];
+
−
 
+
−
function groter(id) {
+
−
    if (vergroot == 0) {
+
−
        $("#hexagon" + id).css('transition', 'transform 0.5s');
+
−
        $("#hexagon" + id).css('transform', 'scale(1,1) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)');
+
−
        $("#hexagon" + id).css('z-index', 50);
+
−
        vergroot = 1;
+
−
    }
+
−
}
+
−
 
+
−
function kleiner(id) {
+
−
    if (vergroot == 1) {
+
−
        $("#hexagon" + id).css('transition', 'transform 0.5s, z-index 0.5s');
+
−
        $("#hexagon" + id).css('transform', 'scale(0.66, 0.66) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)');
+
−
        $("#hexagon" + id).css('z-index', 0);
+
−
        vergroot = 0;
+
−
    }
+
−
}
+
−
 
+
−
$(document).ready(function() {
+
−
 
+
−
        for (j = 1; j <= amount; j++) {
+
−
            $('<div class="hexagon" id="hexagon' + j.toString() + '"></div>').appendTo($("#hexagonwrapper"));
+
−
            $('<div class="hexagoncontentwrapper" id="hexagoncontentwrapper' + j.toString() + '" ><div class="hexagontext">' + title[j-1] + '</div> <div class="hexagonimage"> <img class="hexagonlogos" src="https://static.igem.org/mediawiki/2015/' + image[j-1] + '" /></div></div>').appendTo($("#hexagon" + j.toString()));
+
−
            for (i = 0; i < steps + 1; i++) {
+
−
                $("<a class='hexagonhitbox" + j.toString() + "' >").appendTo("#hexagon" + j.toString()).css({
+
−
                        'display': 'block',
+
−
                        'width': ((100 - afknot) + afknot * (i / steps)).toString() + '%',
+
−
                        'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')',
+
−
                        'margin': '0 auto'
+
−
                    });
+
−
            }
+
−
 
+
−
            for (i = 1; i < steps + 1; i++) {
+
−
                $("<a class='hexagonhitbox" + j.toString() + "' href='https://2015.igem.org/Team:TU_Eindhoven" + links[j-1].toString() + "' >").appendTo("#hexagon" + j.toString()).css({
+
−
                        'display': 'block',
+
−
                        'width': (100 - afknot * (i / steps)).toString() + '%',
+
−
                        'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')',
+
−
                        'margin': '0 auto'
+
−
                    });
+
−
            }
+
−
 
+
−
            $("#hexagon" + j.toString()).css({
+
−
                    'left': (radius * Math.cos(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px",
+
−
                    'top': (radius * Math.sin(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px",
+
−
                    'transform': 'scale(0.66, 0.66) rotate(' + (360 / amount * (j - 1) - 30).toString() + 'deg)'
+
−
                });
+
−
           
+
−
            $("#hexagon" + j.toString()).hover(function() {
+
−
                    groter($(this).attr('id').match(/\d+/))
+
−
                }, function() {
+
−
                    kleiner($(this).attr('id').match(/\d+/))
+
−
                });
+
−
 
+
−
            $(".hexagonhitbox" + j.toString()).css("pointer-events", "auto");
+
−
            $("#hexagoncontentwrapper" + j.toString()).css('transform', 'rotate(' + (-(360 / amount * (j - 1) + 60)).toString() + 'deg)');
+
−
        }
+
−
       
+
−
       
+
−
 
+
−
 
+
−
           
+
−
            $('<div class="hexagon" id="hexagon' + (amount+1).toString() + '"></div>').appendTo($("#hexagonwrapper"));
+
−
 
+
−
            $("#hexagon" + (amount + 1).toString()).css({
+
−
                'left': (radius).toString() + "px",
+
−
                'transform': 'scale(0.66,0.66) rotate(-90deg)',
+
−
                'top': (radius).toString() + "px",
+
−
                'background-image': 'url("logo_website.png")'
+
−
            });
+
−
           
+
−
            $(".hexagon").css({
+
−
                "width": width,
+
−
                "height": height
+
−
            });
+
−
            $("#hexagonwrapper").css({
+
−
                "width": radius * 2 + width,
+
−
                "height": radius * 2 + height
+
−
            });
+
−
    });
+
−
</script>
+
−
 
+
−
<style>
+
−
#hexagonwrapper{
+
−
transform: rotate(90deg);
+
−
margin: 100px auto;
+
−
position:relative;
+
−
}
+
−
 
+
−
.hexagoncontentwrapper{
+
−
text-align:center;
+
−
position:absolute;
+
−
height:100%;
+
−
width:100%;
+
−
line-height: 80px;
+
−
}
+
−
 
+
−
.hexagon{
+
−
-webkit-backface-visibility: hidden;
+
−
pointer-events: none;
+
−
z-index:0;
+
−
background-image:url('hexagon3.png');
+
−
background-size: 100% 100%;
+
−
background-repeat: no-repeat;
+
−
position:absolute;
+
−
}
+
−
 
+
−
.hexagontext{
+
−
position:relative;
+
−
font-size: 18pt;
+
−
}
+
−
.hexagonimage{
+
−
position: relative;
+
−
}
+
−
.hexagonlogos{
+
−
transform: scale(1.5,1.5);
+
−
}
+
−
 
+
−
</style>
+
−
</head>
+
−
 
+
−
<body>
+
−
<div id="hexagonwrapper">
+
 
</div>
 
</div>
−
</body>
 
−
 
−
</html>
 
−
<html>
 
−
<div style="text-align:center;" ><span class="tekst1">
 
−
For more information, you can
 
−
<span class="tekst1BI"><a href="mailto:igem@tue.nl">contact us.</a> </span>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 03:51, 19 September 2015





Welcome to the Wiki of TU Eindhoven


Feel free to take the wiki tour or watch the video below


iGEM is the world’s leading competition in the field of Synthetic Biology. We are the fourth iteration of TU Eindhoven students taking part in this awesome competition. Inspired by Eindhoven's last year's results and the exciting field of SynBio, we are driven to set the bar high with an innovative idea. For more information, select one of the hexagons above to check out our wiki!



For questions, information or collaborations, you can contact us.