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

Line 15: Line 15:
  
 
<div style="text-align:center;" ><span class="tekst1">  
 
<div style="text-align:center;" ><span class="tekst1">  
−
iGEM is the world’s leading competition in the field of Synthetic Biology <br />
+
 
−
The site is currently under construction, but feel free to take a look.<br /><br />
+
iGEM is the world’s leading competition in the field of Synthetic Biology <br /></span></div>
−
For more information, you can <span class="tekst1BI"><a href="mailto:igem@tue.nl">contact us.</a> </span></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>
 +
</body>
 +
 
 +
</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>

Revision as of 20:46, 17 July 2015







Welcome to the wiki of iGEM TU Eindhoven 2015!





iGEM is the world’s leading competition in the field of Synthetic Biology

For more information, you can <a href="mailto:igem@tue.nl">contact us.</a>


</html>